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

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

在項目中使用elementui確實是很方便的一件事,下面這篇文章主要給大家介紹了關于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",
      });
}

解決方案

我在網上查了很多種，我分別列出來兩種

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，他的//不是用來注釋的，我也看是看網上是這樣用的，具體原理我也不知道

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

ElLoading 樣式失效

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

解決方案

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

總結

以上的問題最方便的就是用ts攔截，但在項目中并不是每一次代碼報下滑紅色波浪線就要用它，因為我們用element-plus是按需引入，我們的node依賴包里面有這個樣式，但是ts它有bus，ts找不到這個方法，所以就會給你一條下滑紅色波浪線，其實這個影響，就是看著很煩，所以這個時候就可以用ts攔截一下，不讓他有下滑紅色波浪線。

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

您可能感興趣的文章: