vue3.0封装命令式组件

注安装下面两个插件
# 安装@vue/babel-plugin-jsx插件支持JSX
npm install --save @vue/babel-plugin-jsx

#  安装 @styils/vue 插件支持JS内编写样式
npm install stylus stylus-loader --save-dev

组件代码

import {createApp} from 'vue'
import { styled } from '@styils/vue'

const mask = styled('div', {
    background: "argb(0,0,0,0.8)",
    position:"absolute",
    top:0,
    left:0,
    bottom:0,
  })
  

const dataTemplate={
   props: {
    mag:{
        type:String,
        requied:true
    }
   },
   render(cxt) {
      const {$props,$emit}=cxt
      return (
        <mask class="mask">{$props}
          <div class="bnt" onClick={$emit('onClick')}>信息内容</div>
       </mask>
      )
   }
}

export default function toast(msg,clickHandler){
    const app=createApp(dataTemplate,{
        msg,
        onClick(){
            clickHandler && clickHandler(()=>{
                app.unmount();
                div.remove();
            });
        }
    })
    const div=document.createElement('div')
    document.body.append(div)
    app.mount(div)
}

组件使用

import toast from "@/components/toast.js"
const clickHandle = () => {
	// 关闭弹窗
  toast("传递给B组件的数据",()=> {
    hide() // 关闭弹窗
  })
}