vue3和vue2掛載實(shí)例到全局(自定義消息提示框組件方式)
更新時(shí)間:2024年04月27日 15:50:54 作者:Jyann~
這篇文章主要介紹了vue3和vue2掛載實(shí)例到全局(自定義消息提示框組件方式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue2
入口文件中引入JS文件及css樣式
//入口文件:main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TMessage from '@/components/TMessage/TMessage.js';
import '@/assets/css/css.css'
Vue.config.productionTip = false
Vue.prototype.$message = TMessage;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')//TMessage.js文件
import { createApp, createVNode, render } from 'vue'
import TMessage from '@/components/TMessage/TMessage.vue'
// 用于儲(chǔ)存多個(gè)實(shí)例
let instances = [];
function Message(data) {
// 使用該方法組件(如Login)傳過來的數(shù)據(jù)沒有傳的變量需要有默認(rèn)值,否則是undefined傳給TMessage
if (typeof data === 'string') {
// Message("這是錯(cuò)誤的"),除了message,其他的設(shè)置默認(rèn)值
data = {
message: data,
type: 'info',
}
}
data = {
...data,
// 設(shè)置具體data參數(shù),根據(jù)傳入的顯示不同
message: data.message ? data.message : '默認(rèn)提示信息',
type: data.type ? data.type : 'info',
center: data.center ? data.center : true,
offset: data.offset ? data.offset : 20,
duration: data.duration ? data.duration : 1000
}
// 用于處理所有消息提示框消失后,其他提示框的位置(需要在TMessage.vue中調(diào)用)
data.onClose = function() {
Message.close(msgNode);
}
// 處理多個(gè)實(shí)例之間間距
let offset = data.offset || 20;
// 用于改變后的offset值記錄
let offsetTop = offset;
console.log(instances.length);
// * 0: 20
// * 1: 20 40 20(第0個(gè)的offset + 第0個(gè)的div高度(offsetHeight) + 第1個(gè)的offset 20)
instances.forEach((item) => {
// 直接通過item獲取的實(shí)例offsetHeight不準(zhǔn)確
offsetTop += item.offsetHeight + offset + 26;
});
// 設(shè)置offset及TMessage.vue中的top值
data.offset = offsetTop;
// 創(chuàng)建實(shí)例
const app = createApp(TMessage, data);
// 準(zhǔn)備dom容器
const msgNode = document.createElement('div');
// 添加到body上
app.mount(msgNode);
document.body.appendChild(msgNode);
msgNode.style.top = offsetTop + 'px';
msgNode.style.height = '20px';
// 將當(dāng)前實(shí)例加入instances
instances.push(msgNode);
}
// 消息類型:success,info,error,warning
['error', 'info', 'success', 'warning'].forEach(item => {
Message[item] = function(data) {
if (typeof data === 'string') {
data = {
message: data
};
}
data.type = item;
return Message(data);
};
});
//
// * 獲取當(dāng)前這個(gè)instance的高度
// * 把這個(gè)instance后面的所有實(shí)例的top減去這個(gè)高度,再減去偏移
// *
Message.close = function(msgNode) {
// 獲取到DOM結(jié)構(gòu)中所有新創(chuàng)建的Node
let curMessage = document.querySelectorAll("div.message");
// 找到當(dāng)前div是在instances數(shù)組的下標(biāo)
let index = instances.findIndex(item => item === msgNode);
instances = instances.filter(item => item !== msgNode);
// 獲取需要減去的高度(66=自身高度+offset高度);curMessage[0].offsetHeight才能得到真正解析后的高度
let removeHeight = msgNode.offsetHeight + curMessage[0].offsetHeight;
for (let i = index; i < curMessage.length; i++) {
curMessage[i].style.top = parseInt(curMessage[i].style.top.split('px')[0]) - removeHeight + 'px';
}
// curMessage.length=1時(shí)是最后一次調(diào)用close方法,此時(shí)清空instances,則再次點(diǎn)擊offsetTop不會(huì)一直累加
if (curMessage.length == 1) {
instances = [];
}
}
export default Message;
Message;//TMessage.vue
<template>
<!-- 動(dòng)畫效果 -->
<transition name="message-fade">
<!-- 使用數(shù)據(jù)綁定class -->
<div
v-if="!closed"
:class="['message', 'message-' + type, center ? 'is-center' : '']"
:style="{ top: offset + 'px' }"
>
<p class="message-content">{{ type }}:{{ message }}</p>
<i class="icon icon-close" @click="closeTip"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
props: {
message: '默認(rèn)提示信息',
type: 'info',
center: true,
offset: 20,
duration: 2000,
// 用于處理所有消息提示框消失后,其他提示框的位置
onClose: null
},
data () {
return {
// 定時(shí)器
timer: null,
closed: false,
}
},
mounted () {
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
},
methods: {
close () {
this.closed = true;
if (typeof this.onClose === 'function') {
this.onClose();
}
}
}
}
</script>在任何其他組件中使用:通過this.即可簡(jiǎn)單使用
this.$message.error('用戶名和密碼不能為空');
// this.$message({
// duration: 1000,
// message: '1111',
// type: 'warning',
// })
// this.$message({
// duration: 5000,
// message: '5555',
// type: 'error',
// })
// this.$message({
// duration: 3000,
// message: '3333',
// type: 'warning',
// })
// this.$message({
// duration: 4000,
// message: '4444',
// type: 'info',
// })
// this.$message({
// duration: 2000,
// message: '2222',
// type: 'success',
// })vue3
TMessage.js和TMessage.vue文件同上
//入口文件:main.js
import { createApp } from 'vue'
import App from './App.vue'
// css文件直接引入
import '@/assets/css/css.css'
import router from '@/route/route'
import store from '@/store/store'
import Message from '@/components/TMessage/TMessage.js'
// Vue3將自定義組件加載到全局方法
const app = createApp(App);
app.config.globalProperties.$message = Message;
// 4.創(chuàng)建一個(gè)vue應(yīng)用,將App組件和定義的路由放入到vue應(yīng)用,并掛載到模板頁面id為app的元素上。
app.use(router).use(store).mount('#app')使用:
this直接引用
this.$message.error("這是測(cè)試錯(cuò)誤");問題:
消息提示框的消失有點(diǎn)問題,點(diǎn)擊多個(gè)時(shí)不連續(xù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對(duì)象代理,而 echarts 則使用了大量的全等(===), 對(duì)比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3.x?的shallowReactive?與?shallowRef?使用場(chǎng)景分析
在Vue3.x中,`shallowReactive`和`shallowRef`是用于創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的API,它們與`reactive`和`ref`類似,本文介紹vue3.x??shallowReactive?與?shallowRef的使用場(chǎng)景,感興趣的朋友一起看看吧2025-02-02

