Vue3 encapsulates the message prompt instance function

Results show

  • Vue2.0 useVue.prototype.$message = function () {}
  • Vue3.0 use app. Config. GlobalProperties mount prototype methodapp.config.globalProperties.$message = Message
  • Direct import functions using import Message from ‘./ message.js are also supported

The style layout encapsulates message.vue

<template> <Transition name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <! --> <! . -- a sign in a different icon will change - > < 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 Warning error Success default: 'WARN'}}, setup () {// Define an object that contains the styles of the three cases, the key of the object is the type string 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, OnMounted (() => {isShow. Value = true}) return {style, const isShow = ref(false) 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>Copy the code

Function to implement message.js

Import {createVNode,render} from 'vue' import myMessage from './message.vue' // create a DOM container const div=document.createElement('div') div.setAttribute('class','my-message-container') document.body.appendChild(div) export Default ({text,type})=>{let timer=null //createVNode for creating a virtual node // Parameter 1 supports components // Parameter 2 represents the option passed to components const vnode= CreateVNode (myMessage,{text, type}) createVNode(myMessage,{text, type}) // Render virtual nodes into the DOM of the page. ClearTimeout (timer) timer=setTimeout(()=>{// Clear the contents of div render(null,div) }, 1000)} / / $message ({text: 'login failed, type:' error '})Copy the code

Register custom directives

Import Message from './ message.js' export default {install(app){// If you want to mount global properties, Can through the properties of the component instance call this $message / / extend an instance method app. Config. GlobalProperties $message}} = message / / prototype functionCopy the code

Use:

  • Methods a
  • Import Message from './message.js' setup(){Message({text: 'login failed ', type: 'error'})}Copy the code
  • Method 2
Import {getCurrentInstance} from 'vue' setup(){const instance= getCurrentInstance() Instance.proxy.$message({text: 'login failed ', type: 'error'})}Copy the code

  • Methods three enclosing $message

    This.$message({text: 'login failed ', type: 'error'})Copy the code

  • \