脚本宝典收集整理的这篇文章主要介绍了Vue3封装 Message消息提示实例函数详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue.PRototyPE.$message = function () {}
app.config.globalProperties.$message = Message
<template> <TransITion name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i class="iconfont" :class="[style[type].icon]"></i> <span class="text">{{text}}</span> </div> </Transition> </template> <script> import { onmounted, ref } from 'vue' export default { name: 'myMessage', props: { text: { type: String, default: '' }, type: { type: String, // warn 警告 error 错误 success 成功 default: 'warn' } }, 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 isShow = ref(false) // 组件模板渲染成功后触发 onMounted(() => { isShow.value = true }) return { style, isShow } } } </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; } } } .my-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>
//图标 // 文本 import { createVNode,render } from 'vue' import myMessage from './message.vue' // 动态创建一个DOM容器 const div=document.createElement('div') div.setattribute('class','my-message-container') document.body.appendChild(div) export default ({text,type})=>{ let timer=null //createVNode 用于创建一个虚拟节点 // 参数1 支持组件 // 参数2 表示传递给组件的选项 const vnode= createVNode(myMessage,{text, type}) //把虚拟的节点渲染到页面的DOM中即可 // render函数的参数 //参数一:表示表示需要渲染的内容(虚拟节点) // 参数二:表示渲染的目标位置 (DOM元素) render(vnode,div) // 希望1s后消失 clearTimeout(timer) timer=setTimeout(()=>{ // 清空div里面的内容 render(null,div) },1000) } // $message({ text: '登录失败', type: 'error'})
import Message from './Message.js' export default { install(app){ // 如果你想挂载全局的属性,能够通过组件实例调用的属性 this.$message // 扩展一个实例方法 app.config.globalProperties.$message = Message // 原型函数 } }
方法一
import Message from './message.js' setup(){ Message({ text: '登录失败', type: 'error' }) }
方法二
// setup函数中访问组件实例对象 import { getcurrentInstance } from 'vue' setup(){ const instance= getCurrentInstance() instance.Proxy.$message({ text: '登录失败', type: 'error' }) }
方法三 this.$message
this.$message({ text: '登录失败', type: 'error' })
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的Vue3封装 Message消息提示实例函数详解全部内容,希望文章能够帮你解决Vue3封装 Message消息提示实例函数详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。