vue3提示框组件(vue3extend替代方案)

Posted 2022-05-30 GHUIJS

之前做过一个vue的提示框组件，想用vue3也实现一下：

tips.vue

<template>
<div>消息组件title</div>
</template>

<script setup lang="ts">
defineProps(
  title: 
    type: String,
    default: '你好'
  
)
</script>

index.ts

import  createVNode,render  from "vue";

import message from './src/index.vue'

export function msg(opiton: any) 
    const instance = createVNode(message, opiton);
    render(instance, document.querySelector('body') as htmlElement);

使用：

<template>
  <button @click="fn">触发消息</button>
</template>

<script setup lang="ts">
import  msg  from '@/components/message/index';
let str:string;
const fn = () => 
  msg(
    title: str
  )

</script>