vue3如何自定义message弹窗
作者:jjw_zyfx
这篇文章主要介绍了vue3如何自定义message弹窗问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1、定义一个Message.vue组件
其内容如下
<template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show="visible"> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 :class="{'icon-warning':true}" :class="['icon-warning']" --> <!--这个需要用到https://www.iconfont.cn/的图片库--> <!-- <i class="iconfont" :class="[style[type].icon]"></i>--> <span class="text">{{text}}</span> </div> </Transition> </template> <script> import { ref } from 'vue' export default { name: 'Message', props: { type: { type: String, default: 'warn' }, text: { type: String, default: '' } }, setup () { // 定义一个对象,包含三种情况的样式,对象key就是类型字符串 const style = { warn: { icon: 'icon-warning', color: '#E6A23C', backgroundColor: 'rgb(253, 246, 236)', borderColor: 'rgb(250, 236, 216)' }, error: { icon: 'icon-shanchu', color: '#F56C6C', backgroundColor: 'rgb(254, 240, 240)', borderColor: 'rgb(253, 226, 226)' }, success: { icon: 'icon-queren2', color: '#67C23A', backgroundColor: 'rgb(240, 249, 235)', borderColor: 'rgb(225, 243, 216)' } } // 控制元素显示隐藏 // const visible = ref(false) const visible = ref(true)// 这个感觉可以不用,即不用v-show // onMounted(() => { // visible.value = true // }) return { style, visible } } } </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; } } } .xtx-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>
2、创建一个叫Message.js的文件
其内容如下:
// 提供一个能够显示Message组件的函数 // 这个函数将来:导入直接使用,也可以挂载在vue实例原型上 import { createVNode, render } from 'vue' import HelloWorld from "@/components/Message.vue"; // DOM容器 const div = document.createElement('div') div.setAttribute('class', 'xtx-msssage-container') document.body.appendChild(div) // 定时器标识 let timer = null export default ({ type, text }) => { // 渲染组件 // 1. 导入消息提示组件 // 2. 将消息提示组件编译为虚拟节点(dom节点) // createVNode(组件,属性对象(props)) const vnode = createVNode(HelloWorld, { type, text }) // 3. 准备一个装载消息提示组件的DOM容器 // 4. 将虚拟节点渲染再容器中 // render(虚拟节点,DOM容器) render(vnode, div) // 5. 3s后销毁组件 clearTimeout(timer) timer = setTimeout(() => { render(null, div) }, 3000) }
3、在app.vue中导入并使用
<template> <div class="btn" @click="btn">点击弹出消息提示框</div> </template> <script setup> import Message from "@/Message"; import {onMounted} from "vue"; const btn = ()=>{ Message({type:'warn', text:"hello world"}) } // 这种方式虽然也可以但是不推荐 // onMounted(()=>{ // this.$message({type:'warn', text:"hello world"}) // }) </script>
<style lang="less" scoped> .btn{ width: 300px; height: 40px; text-align: center; line-height: 40px; background-color: deeppink; } </style>
4、效果如下
当点击左边按钮后会弹出一个消息提示框,3秒后关闭
5、如果想使用this.$message这种方式
则需定义一个UI.js文件用来挂载Message.js
其内容如下:
import Message from "@/Message"; export default { install (app) { // 定义一个原型函数 app.config.globalProperties.$message = Message } }
6、在main.js中导入并使用use挂载到app上
如下所示:
import { createApp } from 'vue' import App from './App.vue' import UI from "@/UI"; // 导入自己UI组件库 // import UI from './UI' // 插件的使用,在main.js使用app.use(插件) createApp(App).use(UI).mount('#app')
这种方式的缺点是还是得在选项式上才方便使用,在组合式方式上不推荐
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。