自定义组件------element弹框提示

1. 组件展示

2. 实现原理

编写message.vue组件，完成弹框样式，定位等问题
编写message.js实现动态创建，销毁message.vue组件
编辑组件参数，弹框消息设置

3. 代码实现

3.1 message.vue实现

完成第一步，基本组件实现，后面通过js操作实现动态创建和销毁

3.2 message.js实现

实现步骤

1. 准备dom容器放置message.vue组件，命名为div（第5行）

2. 将div放置在body标签中（第7行）

3. 对外暴露函数，函数有两个参数，为控制组件类型的type，组件文本的text（第11行）

4. 使用createVNode函数创建虚拟dom，内容为需要的组件和内容（13）

5. 使用render（）函数将虚拟dom渲染到之前准备的dom容器中（16）

6. 设置定时器，定期销毁dom

7. 时间到将dom容器内容销毁（20）

import {render,createVNode} from 'vue'
// 引入需要动态创建的组件
import message from './message.vue'
// 准备dom容器
const div=document.createElement('div')
div.setAttribute('class','message-container')
document.body.appendChild(div)
// 定时器
let timer=null
// 暴露函数出去,使用弹出框时执行
export default ({type,text})=>{
    // 创建虚拟dom节点（未渲染）
    const vnode=createVNode(message,{type,text})
    console.log(vnode)
    // 渲染dom节点  render(虚拟节点，dom容器)
    render(vnode,div)
    clearTimeout(timer)
    timer=setTimeout(()=>{
        // 销毁dom节点,badiv节点为null
        render(null,div)
    },2000)
}

3.3使用封装好的弹框

在需要的地方引入message.js文件，调用对外暴露的函数即可，若没有传递参数，会使用messgae.vue里面的默认参数

4. iconfont标签的引入

在网站阿里矢量图标库中生成对应的css代码，放入到项目文件夹中

在main.js进行引入即可（第七行）

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// import ElementPlus from 'element-plus'
// import router from './router'
import 'element-plus/dist/index.css'
import './assets/iconfont.css'

createApp(App).use(ElementPlus).mount('#app')

5. 总结

封装组件是前端开发必不可少的，平时将自己封装好的组件保存，方便开发