vue使用this.$message不生效的部分原因及解決方案
更新時間：2023年09月26日 08:45:28 作者：愛意迷了眼丶
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用this.$message不生效的部分原因
目前message使用的過程中，已知的有兩點原因，會造成message不生效。
1.是this指向問題
解決辦法是：
在關鍵位置，let _this = this
------ let _this = this ------
2.是message的層級問題
可能有的頁面設置的層級太高，遮擋住message
解決辦法是：
設置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報錯情況解決
在最近負責的一個前端項目中，使用this.$message報錯了，之前也沒注意，然后這次抽空看了一下問題報錯原因是因為我用了這種提示寫法：
首先，我最開始是用基礎寫法：
但是這種寫法有個弊端，
就是如果你當前頁面有彈框的時候，這個提示信息會在遮罩層下面，導致提示信息的明顯都不高，甚至可能會被彈框遮?。?/strong>
然后這里有
兩種解決方案
1.適合于你不負責這個項目，用的次數(shù)比較少，或者你也不想去配置，就想當前頁面用一下：
首先，在你要用的頁面去引入
import { Message } from "element-ui";然后在提示信息的地方寫：
Message({
type: "warning",
message: "必須選則一個模板且僅能選擇一個！"
});或者：
Message.warning("必須選則一個模板且僅能選擇一個！");這兩種都是可以的
2.適合于你負責的項目，之后肯定會經常用到，首先找到項目的plugin.js文件，這個文件一般在utils文件目錄下，這個文件一般都是負責整個項目的全局配置屬性
然后同樣的先引入Message:
然后導出Message：
export default {
// 全局注冊message
Vue.prototype.$message = Message;
}引入后就可以直接寫了：
this.$message({
type: "warning",
message: "必須選則一個模板且僅能選擇一個！"
});或者直接：
this.$message.warning("必須選則一個模板且僅能選擇一個！");最終效果顯示：
具體代碼邏輯要看每個項目不同的配置寫法，我這個是vue項目，提供的是一種方法，具體要往哪里寫，各位看官自行研究
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-element-admin+flask實現(xiàn)數(shù)據(jù)查詢項目的實例代碼
這篇文章主要介紹了vue-element-admin+flask實現(xiàn)數(shù)據(jù)查詢項目,填寫數(shù)據(jù)庫連接信息和查詢語句，即可展示查詢到的數(shù)據(jù)，需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關于如何一步步基于element-ui封裝查詢組件的相關資料,本文通過示例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇iview中Select 選擇器多選校驗方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
作為使用Vue已經很多年的人，特別是去年一直在使用?Vue3，因此，學到了很多東西。所以本文為大家準備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
本文主要介紹了Vue顯示圖片的幾種方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了vue3的ref是如何實現(xiàn)響應式的,我們講了ref是如何實現(xiàn)響應式的,主要分為兩種情況：ref接收的是number這種原始類型、ref接收的是對象這種非原始類型,需要的朋友可以參考下2024-07-07
VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09