vue3 函数式(指令式调用)组件实现

vue3如果要实现一个message方法组件，通常要引入组件，注册并使用才行，操作流程过于繁杂 可以封装成一个方法，引入函数，直接调用函数方法

一：第一种实现

1：message.vue

<teleport to="body"> <div class="mask"> I am message </div> </teleport>

2:messages.ts文件

`
import Meaasge from "./message.vue"
import {createApp,} from "vue"
function fun(){
  const app=createApp(Meaasge,{})
  const div=document.body.createElement("div")
  app.mount(div)//挂载
  //app.unmount()//销毁
}

export default fun
`

3：然后在使用时，引入 调用

import fun from "message.ts" fun()

二：第二种实现

1：mask.vue

<teleport to="body"> <div class="mask"> <slot></slot> </div> </teleport>

2：dialog.vue

<div class="dialog"> dialog </div>

2:fun.ts文件

`
import Mask from "./mask.vue"
import Dialog from "./dialog.vue"
import {createApp,createVNode,h,} from "vue"
function fun(){
  const vm = createVNode({
        setup(props) {
          // 返回渲染函数
          return () => h(Mask, () => h(Dialog, { msg: 123 }))
        }
     })
   const div = document.createElement("div")
   render(vm, div)
}

export default fun
`

3：然后在使用时，引入 调用

import fun from "fun.ts" fun()

三：实现

 1：mask.vue
 
 
 ```javascript
   <template>
     <teleport to="body">
        <div class="mask">
          <slot></slot>
        </div>
     </teleport>
   </template>
   
   <style>
     .mask{
       position:fiexd;
       left:0;
       top:0;
       width:100%;
       height:100vh;
       background:rgba(0,0,0,.5);
       color:#fff;
     }
   </style>
 ```
 
 2:dialog.vue
 
 ```javascript
   <template>
        <div class="dialog">
          dialog
        </div>
   </template>
 ```
 
 3:fun.ts
 
 ```
 import {createApp,} from "vue/dist/vue.esm-bundler"
 import Mask from "./mask.vue"
 import Dialog from "./dialog.vue"
 
 function fun(){
   const app=createApp({
     components:{
         Mask,
         Dialog,
     },
     template:"<Mask></Dialog></Mask>",
   })
   const el:DocumentFragment=ducument.createDocumentFragment()
   app.mount(el)
 }
 
 export default fun
 ```
 
4:使用

 ```
 import fun from "./fun"
 
 fun()
 ```