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

1. 组件展示

2. 实现原理

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

3. 代码实现

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实现

实现步骤

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里面的默认参数

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

message({type:'warn',text:'123'})
// message({type:'error',text:'123'})
</script>

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. 总结

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