Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題
更新時(shí)間：2024年03月15日 09:22:45 作者：寒風(fēng)_冷月
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示
問題描述
使用Vue3時(shí)，ElementPlus引入方式為自動(dòng)導(dǎo)入，需要添加ElMessage彈出提示
按照教程進(jìn)行如下：
import {ElMessage} from 'element-plus'
ElMessage.error('需要填完所有項(xiàng)')但瀏覽器不報(bào)錯(cuò)也不顯示，后在網(wǎng)上查看他人相同問題后得知自動(dòng)導(dǎo)入方式不需要import
解決
刪除import行，直接使用ElMessage，成功解決
ElMessage.error('需要填完所有項(xiàng)')
element plus 使用ElMessage不生效或樣式出現(xiàn)問題或出現(xiàn)在最底部
如下效果：
產(chǎn)生的原因是
使用了element plus的按需引入，然后在組件中 又
import { ElMessage } from 'element-plus' 引入了一次，就會(huì)出現(xiàn)這個(gè)問題，
解決的方法
將組件中的引入刪除，直接使用
ElMessage.success('Successfully sent ！') 總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中如何使用$refs和ref屬性來操作DOM和組件實(shí)例,$refs是一個(gè)對(duì)象,包含由ref屬性注冊(cè)的DOM元素和組件實(shí)例,通過$refs可以在Vue中獲取DOM節(jié)點(diǎn)、組件實(shí)例、組件數(shù)據(jù)和屬性等2025-10-10
解決chunk-vendors.js語(yǔ)法錯(cuò)誤問題
在遇到chunk-vendors.js文件的語(yǔ)法錯(cuò)誤時(shí),可以嘗試在vue.config.js文件中添加transpileDependencies參數(shù)進(jìn)行配置,這通過明確指示哪些依賴需要被babel轉(zhuǎn)譯,從而幫助解決編譯過程中的語(yǔ)法問題,此方法適用于Vue項(xiàng)目中遇到的相關(guān)錯(cuò)誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11
vue引入element-ui之后,頁(yè)面是空白的問題及解決
這篇文章主要介紹了vue引入element-ui之后，頁(yè)面是空白的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue生命周期介紹和鉤子函數(shù)的相關(guān)資料，對(duì)大家學(xué)習(xí)或者使用vue2具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨小編一起來看看吧2021-10-10
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國(guó)際化方案就是根據(jù)它的規(guī)則自己建立一套語(yǔ)言字典,對(duì)于每一個(gè)字（message）都有一個(gè)統(tǒng)一的標(biāo)識(shí)符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁(yè)面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件2022-12-12
vue前端獲取不同客戶端mac地址最詳細(xì)步驟(避免踩坑)
在開發(fā)過程中,綁定賬號(hào)和電腦的功能可以通過獲取電腦的MAC地址實(shí)現(xiàn),下面這篇文章主要介紹了vue前端獲取不同客戶端mac地址的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue3全局導(dǎo)入bootstrap5方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10