Vue3封裝 Message消息提示實例函數詳解
Vue3封裝 消息提示實例函數
- Vue2.0使用
Vue.prototype.$message = function () {}
- vue3.0使用app.config.globalProperties掛載原型方法
app.config.globalProperties.$message = Message
- 也支持直接導入函數使用 import Message from ‘./Message.js
樣式佈局封裝 message.vue
<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>
功能實現 message.js
//圖標 // 文本 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' })
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- 一起來做一下Vue全局提示組件
- vue3中實現使用element-plus調用message
- 關於vue3編寫掛載DOM的插件問題
- Vue3實現Message消息組件示例
- 如何使用Vue3設計實現一個Model組件淺析