组件展示

实现原理

编写message.vue组件，完成弹框样式，定位等问题

编写message.js实现动态创建，销毁message.vue组件

编辑组件参数，弹框消息设置

代码实现

3.1 message.vue实现

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

<template><!--transition实现进入动画 --><Transition name="down"><!-- 根据传参类型，动态调整不同弹框 --><div class="message" :style="style[type]" v-show="visible"><!-- 动态绑定样式 --><i class="iconfont" :class="[style[type].icon]"></i><span class="text">{{ text }}</span></div></Transition></template><script setup>import { ref, onMounted, defineProps } from 'vue'// 规定提示框的类型和数据const props = defineProps({type: {type: String,default: 'primary'},text: {type: String,default: ''}})// 弹出框的样式const style = {warn: {color: 'fff',icon:'icon-warning',backgroundColor: 'yellow',borderColor: 'yellow'},error: {color: '#fff',icon:'icon-error',backgroundColor: 'red',borderColor: 'red'},success: {color: '#fff',icon:'icon-success',backgroundColor: 'green',borderColor: 'green'}}// 是否展示弹出框const visible = ref(false)// 使用这个组件，页面挂载onMounted(() => {visible.value = true})</script><style scoped lang="less">.down {&-enter {&-from {transform: translate3d(0, -75px, 0);opacity: 0;}&-active {transition: all 0.5s;}&-to {transform: none;opacity: 1;}}}.message {width: 300px;height: 50px;position: fixed;z-index: 9999;left: 50%;margin-left: -150px;top: 25px;line-height: 50px;padding: 0 25px;border: 1px solid #e4e4e4;background: #f5f5f5;color: #999;border-radius: 4px;i {margin-right: 4px;vertical-align: middle;}.text {vertical-align: middle;}}</style>

3.2 message.js实现

实现步骤

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

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

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

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

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

设置定时器，定期销毁dom

时间到将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节点为nullrender(null,div)},2000)}

3.3使用封装好的弹框

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

<script setup>import message from './utils/message.js'// message({type:'success',text:'123'})message({type:'warn',text:'123'})// message({type:'error',text:'123'})</script>

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')

总结

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