vue使用this.$message不生效的部分原因及解決方案
vue使用this.$message不生效的部分原因
目前message使用的過程中，已知的有兩點(diǎn)原因，會(huì)造成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報(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 {
// 全局注冊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-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目的實(shí)例代碼
這篇文章主要介紹了vue-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目,填寫數(shù)據(jù)庫連接信息和查詢語句，即可展示查詢到的數(shù)據(jù)，需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇iview中Select 選擇器多選校驗(yàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個(gè)讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue3?ref實(shí)現(xiàn)響應(yīng)式的方法
這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況：ref接收的是number這種原始類型、ref接收的是對象這種非原始類型,需要的朋友可以參考下2024-07-07
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue中實(shí)現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動(dòng)示例詳解
這篇文章主要為大家介紹了Vue中實(shí)現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動(dòng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09