vue使用this.$message不生效的部分原因及解決方案
vue使用this.$message不生效的部分原因
目前message使用的過程中，已知的有兩點(diǎn)原因，會造成message不生效。
1.是this指向問題
解決辦法是：
在關(guān)鍵位置，let _this = this
------ let _this = this ------
2.是message的層級問題
可能有的頁面設(shè)置的層級太高，遮擋住message
解決辦法是：
設(shè)置class，給class定義樣式的z-index屬性
// js
this.$message({
message: '成功展示666我嘞寶貝',
type: 'success',
customClass: 'messageIndex'
})
// css
.messageIndex {
z-index: 99999 !important;
}
TypeError: this.$message is not a function報錯情況解決
在最近負(fù)責(zé)的一個前端項目中，使用this.$message報錯了，之前也沒注意，然后這次抽空看了一下問題報錯原因是因為我用了這種提示寫法：
首先，我最開始是用基礎(chǔ)寫法：
但是這種寫法有個弊端，
就是如果你當(dāng)前頁面有彈框的時候，這個提示信息會在遮罩層下面，導(dǎo)致提示信息的明顯都不高，甚至可能會被彈框遮?。?/strong>
然后這里有
兩種解決方案
1.適合于你不負(fù)責(zé)這個項目，用的次數(shù)比較少，或者你也不想去配置，就想當(dāng)前頁面用一下：
首先，在你要用的頁面去引入
import { Message } from "element-ui";然后在提示信息的地方寫：
Message({
type: "warning",
message: "必須選則一個模板且僅能選擇一個！"
});或者：
Message.warning("必須選則一個模板且僅能選擇一個！");這兩種都是可以的
2.適合于你負(fù)責(zé)的項目，之后肯定會經(jīng)常用到，首先找到項目的plugin.js文件，這個文件一般在utils文件目錄下，這個文件一般都是負(fù)責(zé)整個項目的全局配置屬性
然后同樣的先引入Message:
然后導(dǎo)出Message：
export default {
// 全局注冊message
Vue.prototype.$message = Message;
}引入后就可以直接寫了：
this.$message({
type: "warning",
message: "必須選則一個模板且僅能選擇一個！"
});或者直接：
this.$message.warning("必須選則一個模板且僅能選擇一個！");最終效果顯示：
具體代碼邏輯要看每個項目不同的配置寫法，我這個是vue項目，提供的是一種方法，具體要往哪里寫，各位看官自行研究
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue3鼠標(biāo)拖拽滑動效果實(shí)現(xiàn)demo
這篇文章主要為大家介紹了vue3鼠標(biāo)拖拽滑動效果實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Vue中v-if、v-if-else、v-else-if與v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于條件性地渲染一塊內(nèi)容,這塊內(nèi)容只會在指令的表達(dá)式返回truth值的時候被渲染,這篇文章主要給大家介紹了關(guān)于Vue中v-if、v-if-else、v-else-if與v-show的基本使用,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)
這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中內(nèi)置了很多的指令,但有時候這些指令并不能滿足我們,或者說我們想為元素附加一些特別的功能,這時候我們就需要用到vue中一個很強(qiáng)大的功能了—自定義指令,這篇文章主要給大家介紹了關(guān)于vue中自定義指令（directive）的基本使用方法,需要的朋友可以參考下2021-09-09
vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id
今天小編就為大家分享一篇vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題
這篇文章主要介紹了解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04