快捷導(dǎo)航

vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決

更新時(shí)間：2023年02月08日 14:25:24 作者：程序猿_“大神”

在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下

ElMessage 樣式失效

其實(shí)他不是失效了，只是加載到我們的

可以看到下面使用的方式和效果圖，vue3的element-plus遇到的問題，因?yàn)橐獪y試一下，所以點(diǎn)的頻率比較大，但可以明顯的看到ElMessage樣式顯示在你瀏覽器的下面

import { ElMessage } from "element-plus";
 
//點(diǎn)擊登錄提示信息
const handleSubmit = () => {
      ElMessage({
        showClose: true,
        message: "登錄注冊(cè)成功",
        type: "success",
      });
}

解決方案

我在網(wǎng)上查了很多種，我分別列出來兩種

1、在main.ts再引入一遍,像這樣，引入之后重啟一下項(xiàng)目就好了

import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-message-box.css";

2，因?yàn)槲覀兪褂玫氖前葱枰?，所以就不用要在引入element-plus，把下面的這剛代碼刪掉

import { ElMessage } from "element-plus";

然后攔截一下ts的檢測就可以了攔截的方式：//@ts-ignore

就是在你用element-plus提示信息的上面用//@ts-ignore，他的//不是用來注釋的，我也看是看網(wǎng)上是這樣用的，具體原理我也不知道

//點(diǎn)擊登錄提示信息
const handleSubmit = () => {
      //@ts-ignore
      ElMessage({
        showClose: true,
        message: "登錄注冊(cè)成功",
        type: "success",
      });
}

ElLoading 樣式失效

它也不是失效了，也藏在瀏覽器的最下面

解決方案

ElLoading的問題跟ElMessage的問題一樣，解決方法也是一樣的，在你用它的方法上面加上ts攔截就可以了//@ts-ignore，

總結(jié)

以上的問題最方便的就是用ts攔截，但在項(xiàng)目中并不是每一次代碼報(bào)下滑紅色波浪線就要用它，因?yàn)槲覀冇胑lement-plus是按需引入，我們的node依賴包里面有這個(gè)樣式，但是ts它有bus，ts找不到這個(gè)方法，所以就會(huì)給你一條下滑紅色波浪線，其實(shí)這個(gè)影響，就是看著很煩，所以這個(gè)時(shí)候就可以用ts攔截一下，不讓他有下滑紅色波浪線。

到此這篇關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的文章就介紹到這了,更多相關(guān)element-plus按需引入ElLoading ElMessage失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: