通過vue.extend實現(xiàn)消息提示彈框的方法記錄
更新時間：2021年01月07日 09:58:55 作者：林子醬
這篇文章主要給大家介紹了關于通過vue.extend實現(xiàn)消息提示彈框的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前提回顧
在項目開發(fā)中我們經常使用的組件注冊分為兩種，一個是全局注冊和另一個是局部注冊，假設我們的業(yè)務場景是用戶在瀏覽注冊頁面時，點擊頁面中的注冊按鈕后，前端根據用戶的注冊信息先做一次簡單的驗證，并根據驗證彈出一個對應消息提示彈框
我們拿到這個需求后，便開始著手準備要通過局部注冊消息彈框組件的方法來實現(xiàn)這個場景，在通過局部注冊消息彈框組件的方法解決完這個需求后，自然是沾沾自喜，緊接著又迎來了一個需求，該需求是用戶在點擊該注冊按鈕時，點擊幾次就要出現(xiàn)幾次這個消息彈框，你開始犯了難，并思考難道我要在頁面中提前插入n個組件標簽，不然我怎么知道用戶要點擊幾次注冊按鈕？
在你還沒有解決第二個需求的時候，又一個需求來了，第三個需求是不僅僅是注冊頁面需要用到這個消息彈框組件，在其他多個頁面中也需要用到這個消息彈框組件。
基于上述的業(yè)務需求，我們可以通過vue.extend編程式的使用組件，從而實現(xiàn)功能性的動態(tài)的消息提示彈框
局部注冊消息彈框組件
先通過局部注冊的方法來實現(xiàn)消息彈框組件
效果圖如下：
構造目錄如下：
'src/main.js'文件的代碼：
import Vue from 'vue'
import App from './App.vue'
//全局引入樣式文件
import './assets/css.css';
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
'src/bus/bus.js'文件的代碼：
import vue from 'vue'; var bus=new vue() export default bus;
'src/App.vue'文件的代碼：
<template>
<div id="app">
<button @click="handleShowMessage">點擊出現(xiàn)彈框</button>
<TMessage :offsetTop='50'></TMessage>
<TMessage :offsetTop='100'></TMessage>
<TMessage :offsetTop='150'></TMessage>
<!-- 我是不是得在這里埋下幾萬個消息彈框組件？？？ -->
</div>
</template>
<script>
import TMessage from './components/TMessage/TMessage.vue';
import bus from './bus/bus';
export default {
name:'app',
data() {
return {
}
},
components: {
TMessage,
},
methods: {
handleShowMessage(){
//打印查看消息彈框的組件對象
console.log(TMessage);
//點擊按鈕后出現(xiàn)消息彈框
bus.$emit('showMessage')
}
},
}
</script>
<style>
#app {
display: flex;
justify-content: center;
}
#app button{
margin-top: 250px;
}
</style>
'src/components/TMessage/TMessage.vue'文件的代碼：
<template>
<transition name="message-fade">
<div :class="[
'message',
'message-' + type,
center ? 'is-center' : ''
]"
:style="{top: offset + 'px'}"
v-if="!closed"
>
<p class="message-content">提示信息：{{message}}</p>
<i class="icon icon-close"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
data() {
return {
message: '這是默認信息', //彈框的提示內容
type: 'success', //彈框的樣式 success、warning、error
center: true, //彈框是否居中顯示
offset: 20, //彈框默認的偏移量
closed: true, //彈框默認隱藏 通過v-if="!closed"控制
duration: 1000, //彈框消失的時間
timer: null, //準備一個定時器
}
},
mounted() {
this.offset=this.offsetTop
bus.$on('showMessage',()=>{
this.closed=false;
this.timer = setTimeout(() => {
//如果彈框是顯示狀態(tài)的話在duration后會變?yōu)殡[藏狀態(tài)
if (!this.closed) {
this.close();
}
}, this.duration);
})
},
props:['offsetTop'],
methods: {
close() {
this.closed = true;
}
}
}
</script>
寫到這里，我們實現(xiàn)的效果為(動圖如下)：
'src/assets/css.css'文件的代碼：
/*
樣式重點解析:
1.'message'
2.'message-' + type:
2.1:message-success
2.2:message-warning
2.3:message-error
3.'is-center' //決定了彈框居中顯示
4.'message-fade-enter' //4和5決定了彈框的的過渡效果
5.'message-fade-leave-active'
6. .message {
top:20px; //決定了彈框的偏移量
}
*/
.message {
min-width: 380px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #EBEEF5;
position: fixed;
left: 50%;
top: 20px;
z-index: 999999999;
transform: translateX(-50%);
background-color: #edf2fc;
transition: opacity .3s, transform .4s, top .4s;
overflow: hidden;
padding: 15px 15px 15px 20px;
display: flex;
align-items: center
}
.message.is-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.message p {
margin: 0
}
.message-info .message-content {
color: #909399
}
.message-success {
background-color: #f0f9eb;
border-color: #e1f3d8
}
.message-success .message-content {
color: #67C23A
}
.message-warning {
background-color: #fdf6ec;
border-color: #faecd8
}
.message-warning .message-content {
color: #E6A23C
}
.message-error {
background-color: #fef0f0;
border-color: #fde2e2
}
.message-error .message-content {
color: #F56C6C
}
.message-content {
padding: 0;
font-size: 14px;
line-height: 1
}
.message-content:focus {
outline-width: 0
}
.message .icon-close {
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
color: #C0C4CC;
font-size: 16px
}
.message .icon-close:focus {
outline-width: 0
}
.message .icon-close:hover {
color: #909399
}
.message-fade-enter, .message-fade-leave-active {
opacity: 0;
transform: translate(-50%, -100%)
}
編程式的使用組件
上方在通過局部注冊消息彈框組件時體現(xiàn)的局限性：靈活性低、可復用性低、代碼觀感較差
緊接著我們就要使用vue.extend來實現(xiàn)消息提示彈框，做到編程式的使用組件
該構造目錄為：
'src/App.vue'文件的代碼：
<template>
<div id="app">
<button @click="handleShowMessage">點擊出現(xiàn)彈框</button>
</div>
</template>
<script>
import Message from './components/TMessage/TMessage.js';
export default {
name:'app',
data() {
return {
}
},
methods: {
handleShowMessage(){
/**
* 每點擊一次按鈕就調用一次該工廠函數(shù)
* 每調用一次該工廠函數(shù)就創(chuàng)建一個彈框組件對象
*/
return Message('我好帥啊我好帥啊我好帥啊')
}
},
}
</script>
<style>
#app {
display: flex;
justify-content: center;
}
#app button{
margin-top: 250px;
}
</style>
'src/components/TMessage/TMessage.vue'文件的代碼：
<template>
<transition name="message-fade">
<div :class="[
'message',
'message-' + type,
center ? 'is-center' : ''
]"
:style="{top: offset + 'px'}"
v-if="!closed"
>
<p class="message-content">提示信息：{{message}}</p>
<i class="icon icon-close"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
data() {
return {
message: '這是默認信息', //彈框的提示內容
type: 'success', //彈框的樣式 success、warning、error
center: true, //彈框是否居中顯示
offset: 20, //彈框默認的偏移量
closed: false, //彈框默認隱藏 通過v-if="!closed"控制
duration: 1000, //彈框消失的時間
timer: null, //準備一個定時器
}
},
mounted() {
/*為了方便演示先不讓彈框消失
this.timer = setTimeout(() => {
//在規(guī)定的this.duration后該消息彈框消失
if (!this.closed) {
this.close();
}
}, this.duration);
*/
},
methods: {
close() {
this.closed = true;
}
}
}
</script>
'src/components/TMessage/TMessage.js'文件的代碼：
import Vue from 'vue';
import TMessage from "./TMessage.vue";
function Message(data) {
data = data || {};
if (typeof data === 'string') {
data = {
message: data
}
}
const TMessageClass = Vue.extend(TMessage);
//得到的是一個組件對象VueComponent實例
//new TMessageClass接收的是一個包含組件選項的對象 覆蓋
let instance = new TMessageClass({
data
});
instance.$mount();
console.log(instance.$el,'現(xiàn)在才可以訪問$el');
/* instance.$el的打印結果如下：
<div class="message message-success is-center" style="top: 20px;">
<p class="message-content">提示信息：我好帥啊我好帥啊我好帥啊</p>
<i class="icon icon-close"></i>
</div>
*/
document.body.appendChild(instance.$el);
}
export default Message
寫到這里，我們來看一下效果，如下圖：
解決消息彈框覆蓋問題
我們已經做到了每點擊一次按鈕就出現(xiàn)一個消息彈框組件，但是因為定位的問題出現(xiàn)了相互覆蓋，所以得再接著去'TMessage.js'文件中去完善邏輯：
//file：'src/components/TMessage/TMessage.js'
/*
解決方法：
通過維護一個隊列來存儲每一個消息彈框組件對象
在每一次生成消息彈框組件時都需要重新計算其top值
通過該隊列來計算上一個消息彈框組件對象的top值
*/
import Vue from 'vue';
import TMessage from "./TMessage.vue";
//裝有instance消息彈框組件對象的容器
let instances = [];
function Message(data) {
data = data || {};
if (typeof data === 'string') {
data = {
message: data
}
}
data.onClose = function() {
console.log('onClose');
// 每消失一個消息彈框就會觸發(fā)一個onClose
//instance是消息彈框組件的實例對象即VueComponent
console.log(instance,'instance');
//每消失一個就得把在instances容器中對應的該組件對象給刪除掉
Message.close(instance);
};
const TMessageClass = Vue.extend(TMessage);
let instance = new TMessageClass({
data
});
instance.$mount();
document.body.appendChild(instance.$el);
//如果data數(shù)據中有設置偏移量則使用該偏移量
//否則使用默認的偏移量值20
let offset = data.offset || 20;
//規(guī)定每一個消息彈框的間隔
//這里直接使用offset值做為間隔
let offsetTop = offset;
/**思路如下：
* let offsetTop=20;
* [].forEach(()=>{offsetTop+=10});
* console.log(offsetTop) //還是20
*
* [{a:'1'}].forEach(()=>{offsetTop+=10});
* console.log(offsetTop) //才是30
*/
/*這里是在循環(huán)之后才去push
因為生成的第一個消息彈框是不需要計算offsetTop的
生成的第一個消息彈框直接使用offset值即可
*/
//從第一個起instances里有值了(組件對象)以后再去循環(huán)計算offsetTop值
instances.forEach( item => {
//根據上一個計算的offsetTop+自身的高度+規(guī)定的間隔
offsetTop += item.$el.offsetHeight + offset;
});
//當前生成的消息彈框的高度為offsetTop
//offsetTop是根據上一個生成的消息彈框的三個值計算得到的
//instances容器中第0個是不需要參與計算的即采用默認的offset值
instance.$el.style.top = offsetTop + 'px';
instances.push(instance);
}
Message.close = function(instance) {
//每消失一個就得把在instances容器中對應的該組件對象給刪除掉
instances = instances.filter( item => item !== instance );
};
export default Message
'src/components/TMessage/TMessage.vue'文件的代碼:
//file：'src/components/TMessage/TMessage.vue'
<template>
<transition name="message-fade">
<div :class="[
'message',
'message-' + type,
center ? 'is-center' : ''
]"
:style="{top: offset + 'px'}"
v-if="!closed"
>
<p class="message-content">提示信息：{{message}}</p>
<i class="icon icon-close"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
data() {
return {
message: '這是默認信息', //彈框的提示內容
type: 'success', //彈框的樣式 success、warning、error
center: true, //彈框是否居中顯示
offset: 20, //彈框默認的偏移量
closed: false, //彈框默認隱藏 通過v-if="!closed"控制
duration: 1000, //彈框消失的時間
timer: null, //準備一個定時器，
onClose: null //擴充一個功能 彈框消失后觸發(fā)
}
},
mounted() {
//在規(guī)定的this.duration后該消息彈框消失
//消息框消失后會觸發(fā)this.close()函數(shù)方法
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
},
methods: {
close() {
this.closed = true;
//如果該組件可以接收到this.onClose方法則調用該方法
//該方法是在該消息彈框消失的時候被觸發(fā)
if (typeof this.onClose === 'function') {
this.onClose();
}
}
}
}
</script>
寫到這里，我們來看一下效果，如下圖：
優(yōu)化消息彈框消失的效果
我們可以進一步的優(yōu)化消息彈框消失的效果,效果圖如下：
'src/components/TMessage/TMessage.vue'文件的代碼:
<template>
<transition name="message-fade">
<div :class="[
'message',
'message-' + type,
center ? 'is-center' : ''
]"
:style="{top: offset + 'px'}"
v-if="!closed"
>
<p class="message-content">提示信息：{{message}}</p>
<i class="icon icon-close"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
data() {
return {
message: '這是默認信息',
type: 'success',
center: true,
offset: 20,
closed: false,
duration: 1000,
timer: null,
onClose: null //擴充一個功能 彈框消失后觸發(fā)
}
},
mounted() {
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
},
methods: {
close() {
this.closed = true;
//當彈框消失時會調用this.onClose()該函數(shù)方法
if (typeof this.onClose === 'function') {
this.onClose();
}
}
}
}
</script>
'src/components/TMessage/TMessage.js'文件的代碼：
import Vue from 'vue';
import TMessage from "./TMessage.vue";
//裝有instance的容器
let instances = [];
function Message(data) {
data = data || {};
if (typeof data === 'string') {
data = {
message: data
}
}
const TMessageClass = Vue.extend(TMessage);
let instance = new TMessageClass({
data
});
instance.$mount();
document.body.appendChild(instance.$el);
data.onClose = function() {
console.log('onClose');
// 每消失一個彈框就會觸發(fā)一個onClose方法
Message.close(instance);
};
//如果data數(shù)據中有設置偏移量則使用該偏移量
//否則使用默認的偏移量20
let offset = data.offset || 20;
//規(guī)定每一個消息彈框的間隔
let offsetTop = offset;
instances.forEach( item => {
//上一個實例對象的offsetTop+自身的高度+規(guī)定的間隔
offsetTop += item.$el.offsetHeight + offset;
});
instance.$el.style.top = offsetTop + 'px';
instances.push(instance);
}
Message.close = function(instance) {
/*
每次彈窗關閉都會調用一次這個函數(shù)
* 獲取當前這個instance的高度
* 把這個instance后面的所有實例的top減去這個高度，再減去偏移
* */
let removeHeight = instance.$el.offsetHeight + instance.offset;
//把傳遞進來的instance在容器instances中刪除
let index = instances.findIndex( item => item === instance );
instances = instances.filter( item => item !== instance );
//對應的消息彈框消失后在該消息彈框后面的消息彈框會依次出現(xiàn)頂上來的效果
//原理是找到對應的消息彈框在instances容器中的下標位置
//通過循環(huán)改變對應的消息彈框后面的所有消息彈框的高度
for (let i = index; i<instances.length; i++) {
instances[i].$el.style.top = parseFloat(instances[i].$el.style.top) - removeHeight + 'px';
}
};
export default Message
'src/App.vue'文件的代碼：
<template>
<div id="app">
<button @click="handleShowMessage">點擊出現(xiàn)彈框</button>
</div>
</template>
<script>
import Message from './components/TMessage/TMessage.js';
export default {
name:'app',
data() {
return {
}
},
methods: {
handleShowMessage(){
/**
* 調用一次就創(chuàng)建一個彈框組件對象
*/
return Message('我好帥啊我好帥啊我好帥啊')
}
},
}
</script>
<style>
#app {
display: flex;
justify-content: center;
}
#app button{
margin-top: 250px;
}
</style>
終極版實現(xiàn)版
我們在上方'src/App.vue'文件中是通過引入TMessage.js后再通過Message()的方式調用使用該組件的，還可以將調用方式掛載到Vue全局上，來看看怎么操作：
'src/main.js'文件的代碼
import Vue from 'vue'
import App from './App.vue'
import './assets/css.css';
import Message from '../src/components/TMessage/TMessage';
Vue.config.productionTip = false
//掛載到全局
Vue.prototype.$message = Message;
new Vue({
render: h => h(App)
}).$mount('#app')
'src/App.vue'文件的代碼
<template>
<div id="app">
<button @click="handleShowMessage">點擊出現(xiàn)彈框</button>
</div>
</template>
<script>
export default {
name:'app',
data() {
return {
}
},
methods: {
handleShowMessage(){
this.$message.error('我好帥啊我好帥啊我好帥啊')
this.$message.success('我好帥啊我好帥啊我好帥啊')
this.$message.info('我好帥啊我好帥啊我好帥啊')
this.$message.warning('我好帥啊我好帥啊我好帥啊')
}
},
}
</script>
<style>
#app {
display: flex;
justify-content: center;
}
#app button{
margin-top: 250px;
}
</style>
'src/components/TMessage/TMessage.vue'文件的代碼:
<template>
<transition name="message-fade">
<div :class="[
'message',
'message-' + type,
center ? 'is-center' : ''
]"
:style="{top: offset + 'px'}"
v-if="!closed"
>
<p class="message-content">提示信息：{{message}}</p>
<i class="icon icon-close"></i>
</div>
</transition>
</template>
<script>
export default {
name: 'TMessage',
data() {
return {
message: '這是默認信息',
type: 'success',
center: true,
offset: 20,
closed: false,
duration: 1000,
timer: null,
onClose: null //擴充一個功能 彈框消失后觸發(fā)
}
},
mounted() {
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
},
methods: {
close() {
this.closed = true;
//當彈框消失時會調用this.onClose()該函數(shù)方法
if (typeof this.onClose === 'function') {
this.onClose();
}
}
}
}
</script>
'src/components/TMessage/TMessage.js'文件的代碼：
import Vue from 'vue';
import TMessage from "./TMessage.vue";
let instances = [];
function Message(data) {
data = data || {};
if (typeof data === 'string') {
data = {
message: data
}
}
data.onClose = function() {
console.log('onClose');
//instance是消息彈框組件的實例對象即VueComponent
Message.close(instance);
};
const TMessageClass = Vue.extend(TMessage);
let instance = new TMessageClass({
data
});
instance.$mount();
// console.log(instance.$el,'現(xiàn)在才可以訪問$el');
document.body.appendChild(instance.$el);
let offset = data.offset || 20;
//規(guī)定每一個消息彈框的間隔
let offsetTop = offset;
//第一個彈框是不需要計算偏移量的
//從第一個以后再去循環(huán)
instances.forEach( item => {
//上一個實例對象的offsetTop+自身的高度+規(guī)定的間隔
offsetTop += item.$el.offsetHeight + offset;
});
instance.$el.style.top = offsetTop + 'px';
instances.push(instance);
}
Message.close = function(instance) {
let removeHeight = instance.$el.offsetHeight + instance.offset;
let index = instances.findIndex( item => item === instance );
instances = instances.filter( item => item !== instance );
for (let i = index; i<instances.length; i++) {
instances[i].$el.style.top = parseFloat(instances[i].$el.style.top) - removeHeight + 'px';
}
};
['info', 'success', 'error', 'warning'].forEach( type => {
Message[type] = function(data) {
if (typeof data === 'string') {
data = {
message: data
}
}
data.type = type;
//整合data后再次去調用Message()
return Message(data);
};
} );
// Message.error=function(data){
// if (typeof data === 'string') {
// data = {
// message: data
// }
// }
// return Message({
// ...data,
// type:'error'
// })
// }
export default Message
完結撒花，最后來看一下效果圖：
總結
到此這篇關于通過vue.extend實現(xiàn)消息提示彈框的文章就介紹到這了,更多相關vue.extend實現(xiàn)消息提示彈框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了詳解Vue2 無限級分類(添加,刪除,修改) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式，本文給大家分享Vue3.0中快速上手Vuex狀態(tài)管理的方式，本文通過實例代碼講解的很詳細，對大家學習Vuex狀態(tài)管理相關知識有很大的幫助，感興趣的朋友一起學習吧2021-05-05
vue-cli-service serve報錯error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報錯error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue-i18n實現(xiàn)中英文切換的方法，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue兩個組件間值的傳遞或修改的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了安裝vue-cli報錯 -4058 的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue實現(xiàn)路由跳轉至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
最近在學習一些底層方面的知識,所以想做個系列嘗試去聊聊這些比較復雜又很重要的知識點,下面這篇文章主要給大家介紹了關于Vue異步更新機制及$nextTick原理的相關資料,需要的朋友可以參考下2022-04-04
本文旨在記錄解決在工作中一鍵復制功能得需求,本文主要使用了Vue3+TypeScript+Ant-Design-Vue,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11