欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中使用Element?Plus時el-icon無法顯示的問題解決

 更新時間:2022年03月31日 11:40:17   作者:沒刮胡子  
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下

問題描述

按照官方文檔安裝了icons

$ npm install @element-plus/icons

然后在頁面中使用

<template>
  <!-- <Header /> -->
  <!-- Icon 圖標(biāo) -->
  <el-icon><edit /></el-icon>
  <el-icon><fold /></el-icon>
  <el-icon><aim /></el-icon>
  <!-- SVG 圖標(biāo) -->
  <edit style="width: 1em; height: 1em; margin-right: 8px" />
  <share style="width: 1em; height: 1em; margin-right: 8px" />
  <delete style="width: 1em; height: 1em; margin-right: 8px" />
  <search style="width: 1em; height: 1em; margin-right: 8px" />
</template>

無法顯示:

runtime-core.esm-bundler.js?5c40:6584 
        
 [Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

解決方案

添加引用

<script>
//組件script
import { Fold } from "@element-plus/icons";
import { Edit } from "@element-plus/icons";
import { Aim } from "@element-plus/icons";
import { Share } from "@element-plus/icons";
import { Search } from "@element-plus/icons";
import { Delete } from "@element-plus/icons";
export default {
  components: {
    Fold,
    Edit,
    Aim,
    Share,
    Search,
    Delete,
  },
  data() {
    return {
    };
  },
};
</script>

顯示正常了。

總結(jié)

到此這篇關(guān)于Vue3中使用Element Plus時el-icon無法顯示問題解決的文章就介紹到這了,更多相關(guān)Vue3中el-icon無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

相關(guān)文章

  • vue element table 表格請求后臺排序的方法

    vue element table 表格請求后臺排序的方法

    今天小編就為大家分享一篇vue element table 表格請求后臺排序的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue混入mixin流程與優(yōu)缺點(diǎn)詳解

    vue混入mixin流程與優(yōu)缺點(diǎn)詳解

    混入(mixin)提供了一種非常靈活的方式,來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時,所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
    2022-09-09
  • vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程

    vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程

    這篇文章主要介紹了vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例

    Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例

    這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • Vue加入購物車判斷token添加登錄提示功能

    Vue加入購物車判斷token添加登錄提示功能

    加入購物車,是一個登錄后的用戶 才能進(jìn)行的操作,所以需要進(jìn)行鑒權(quán)判斷,判斷用戶token是否存在,這篇文章主要介紹了Vue加入購物車判斷token添加登錄提示,需要的朋友可以參考下
    2023-11-11
  • Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)

    Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)

    這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • vue 解決數(shù)組賦值無法渲染在頁面的問題

    vue 解決數(shù)組賦值無法渲染在頁面的問題

    今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例

    vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例

    這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過創(chuàng)建自定義組件來實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-09-09
  • vue.js基于ElementUI封裝了CRUD的彈框組件

    vue.js基于ElementUI封裝了CRUD的彈框組件

    這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件,問咋會給你圍繞主題展開詳細(xì)的內(nèi)容介紹,感興趣的小伙伴可以參考一下
    2022-07-07
  • vue 父組件通過$refs獲取子組件的值和方法詳解

    vue 父組件通過$refs獲取子組件的值和方法詳解

    今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評論