vue 命令式渲染组件(弹窗等)

需求是在登录后展示一个弹窗
判断用户进入登录状态的函数在pinia中 用组件式弹窗不方便 故考虑命令式弹窗

import { createVNode, render } from 'vue'

/** 命令式临时渲染一个组件 */
export const tempRender = (comp, ...args) => {
  const container = document.createElement('div')
  document.body.append(container)
  const dialogNode = createVNode(comp, { ...args })
  render(dialogNode, container)
  function destory () {
    render(null, container)
    container.remove()
  }
  return destory
}

用法

import WXDialog from './WXDialog.vue'
import { tempRender } from '@/utils/tempRender'

export const openWXDialog = () => {
  const destory = tempRender(WXDialog, { onClose: () => destory() })
}

// 弹窗组件
<script setup>
import { ElDialog } from 'element-plus'
const props = defineProps(['onClose'])
</script>
<template>
  <el-dialog :model-value="true" v-on:update:model-value="props.onClose">11</el-dialog>
</template>

无关的小知识

在img的src属性后加时间戳可以规避浏览器的强缓存
可以通过这种方式无感更新静态资源 而无需前端重新发版

<script setup>
const now = Date.now()
</script>
<template>
  <img :src="`${imgUrl}?${now}`">
</template>