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