vue3手動封裝彈出框元件message的方法
阿新 • • 發佈:2021-09-27
本文例項為大家分享了3手動封裝彈出框元件message的具體程式碼,供大家參考,具體內容如下
封裝元件
<template> <Transition name="down"> <div class="xtx-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: 'XtxMessage',props: { text: { type: String,default: '' },type: { type: String,// warn 警告 error 錯誤 success 成功 default: 'warhttp://www.cppcns.comn' } },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 { NvegEswadtransform: 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>
掛載到vue的原型物件上
// 如下的方法需要渲染一個提示效果 import { createVNode,render } from 'vue' import XtxMessage from './xtx-message.vue' // 動態建立一個DOM容器 const div = document.createElement('div') div.setAttribute('class','xtx-meassage-container') document.body.appendChild(div) export default ({ text,type }) => { let timer = null // createVNode 用於建立一個虛擬節點 // 引數一支援元件 // 引數二表示傳遞給元件的選項 const vnode = createVNode(XtxMessage,{ text,type }) // 把虛擬的節點渲染到頁面的DOM中即可 // render函式的引數 // 引數一:表示需要渲染的內容(虛擬節點) // 引數二:表示渲染的目標位置(DOM元素) render(vnode,div) // 希望提示資訊顯示1秒後消失 clearTimeout(timer) timer = setTimeout(() => { // 清空div中的內容 render(null,div) },1000) } // $message({ text: '登入失敗',type: 'error'})
import Message from './Message' export default { install(app) { // 如果你想掛載全域性的屬性,能夠通過元件例項呼叫的屬性 this.$message app.config.globalProperties.$message = Message // 原型函式 } }
使用
一 .
import Message from '@/components/library/Message' setup () { // 觸發登入 const handleLogin = async () => { // 手動進行表單驗證 const flag = await target.value.validate() if (flag) { // 驗證通過,呼叫介面實現登入 // 如果登入失敗,就進行提示 Message({ type: 'error',text: '登入失敗' }) } } mounted () { this.$message({ type: 'error',text: '登入失敗' }) } }
二.
// 獲取元件的例項物件:類似於之前的this const instance = getCurrentInstance() // 點選登入 const handleLogin = async () => { const valid = await target.value.validate() if (valid) { // 表單驗證通過,呼叫介面實現登入 // Message({ text: '登入失敗',type: 'error' }) instance.proxy.$message({ text: '登入失敗',type: 'error' }) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。