vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
ElMessage 樣式失效
其實他不是失效了，只是加載到我們的
可以看到下面使用的方式和效果圖，vue3的element-plus遇到的問題，因為要測試一下，所以點的頻率比較大，但可以明顯的看到ElMessage樣式顯示在你瀏覽器的下面
import { ElMessage } from "element-plus";
//點擊登錄提示信息
const handleSubmit = () => {
ElMessage({
showClose: true,
message: "登錄注冊成功",
type: "success",
});
}
解決方案
我在網(wǎng)上查了很多種，我分別列出來兩種
1、在main.ts再引入一遍,像這樣，引入之后重啟一下項目就好了
import "element-plus/theme-chalk/el-message.css"; import "element-plus/theme-chalk/el-message-box.css";
2，因為我們使用的是按需引入，所以就不用要在引入element-plus，把下面的這剛代碼刪掉
import { ElMessage } from "element-plus";然后攔截一下ts的檢測就可以了 攔截的方式：//@ts-ignore
就是在你用element-plus提示信息的上面用//@ts-ignore，他的//不是用來注釋的，我也看是看網(wǎng)上是這樣用的，具體原理我也不知道
//點擊登錄提示信息
const handleSubmit = () => {
//@ts-ignore
ElMessage({
showClose: true,
message: "登錄注冊成功",
type: "success",
});
}ElLoading 樣式失效
它也不是失效了，也藏在瀏覽器的最下面
解決方案
ElLoading的問題跟ElMessage的問題一樣，解決方法也是一樣的，在你用它的方法上面加上ts攔截就可以了//@ts-ignore，
總結(jié)
以上的問題最方便的就是用ts攔截，但在項目中并不是每一次代碼報下滑紅色波浪線就要用它，因為我們用element-plus是按需引入，我們的node依賴包里面有這個樣式，但是ts它有bus，ts找不到這個方法，所以就會給你一條下滑紅色波浪線，其實這個影響，就是看著很煩，所以這個時候就可以用ts攔截一下，不讓他有下滑紅色波浪線。
到此這篇關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的文章就介紹到這了,更多相關(guān)element-plus按需引入ElLoading ElMessage失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue后臺管理如何配置動態(tài)路由菜單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實現(xiàn)對前端界面的開發(fā)工作。2021-05-05
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)跑馬燈效果，可以更換顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue.config.js使用代理配置真實請求url方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue3實現(xiàn)長列表虛擬滾動的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項目中,父子組件數(shù)據(jù)傳遞是最常見的場景,但是今天在開發(fā)過程中父級數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-10-10