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

Element Plus的el-icon怎么用

 更新時間：2022年04月17日 11:22:41   作者：德育處主任  
在Element Plus里，Icon圖標(biāo)的用法和以前不一樣了，本文主要介紹了Element Plus的el-icon怎么用，具有一定的參考價值，感興趣的可以了解一下

在 Vue 生態(tài)里， Element UI 是排名前列的組件庫。 在 Vue 發(fā)布到 3.0 時，Element 也發(fā)布了對應(yīng)的組件庫。也就是 Element Plus 。隨之而來的用法也跟著變了。

比如本文要講的 el-icon 的用法。

在 Element Plus 里，Icon 圖標(biāo) 的用法和以前不一樣了。雖然官方文檔也有說明怎么用，但不是非常詳細(xì)，可能會給新手帶來一丟丟障礙。

本文將花幾分鐘的時間講解 el-icon 幾種用法和注意事項。

注意：需要留意本文發(fā)表時間與使用的 Element Plus 版本，隨著時間的推移可能會出現(xiàn)使用上的差異。

  • vue: ^3.2.25
  • element-plus: ^2.1.7
  • @element-plus/icons-vue: ^1.1.4

初步了解

Icon 在 Element UI 和 Element Plus 用法上的差別

在 vue2 + Element UI 的用法

<i class="el-icon-edit"></i>

在 vue3 + Element Plus 的用法

<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- 也可以直接使用圖標(biāo)標(biāo)簽，無需父標(biāo)簽包裹 -->
<edit />

個人覺得，Element UI 的用法會更加簡單。

下一篇文章我會講解如何在 Element Plus 的基礎(chǔ)上二次封裝出一個更好用的 Icon組件 。

Icon 在 Element Plus 中的使用邏輯

Element Plus 拋棄了字體圖標(biāo)的用法，直接使用了 svg 的方式。

可以說，圖標(biāo)這個東西被拎出來單獨維護(hù)了。所以在使用前必須把 svg圖標(biāo)庫 下載下來。

下載 svg圖標(biāo)庫 的命令：

npm install @element-plus/icons-vue

你也可以使用 Yarn 或 pnpm 的方式下載

# Yarn
yarn add @element-plus/icons-vue

# pnpm
pnpm install @element-plus/icons-vue

使用的方式有2種，一種是直接使用 svg，另一種是配合 el-icon 標(biāo)簽一起使用。

接下來就分別講講這兩種使用方式（全局和局部引入都會講到）

只使用 svg

如果你只需使用 Element Plus 提供的 svg圖標(biāo)庫 的話，是可以不安裝 Element Plus 的。不過這種場景應(yīng)該很少出現(xiàn)。

安裝命令：

npm install @element-plus/icons-vue

Element Plus 提供的 svg圖標(biāo) 種類可以到 圖標(biāo)集合 里查看。

通過 svg組件 的方式使用圖標(biāo)，如需設(shè)置圖標(biāo)大小和顏色，都需要通過 css 來設(shè)置。

全局引入

全部引入的方式會將所有 svg組件 都注冊到全局，用的時候比較方便，但會犧牲一點性能。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // 引入所有圖標(biāo)，并命名為 Icons

const app = createApp(App)

// 通過遍歷的方式注冊所有 svg組件，會犧牲一點點性能
for (let i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app')

如果你不想全部引入，只是想在全局注冊某個 svg圖標(biāo)組件，可以用以下方式在 main.js 里注冊（我以 Edit 圖標(biāo)為例）

/* 省略部分代碼 */
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 圖標(biāo)

const app = createApp(App)

app.component(Edit.name, Edit) // 全局注冊 Edit 圖標(biāo)

app.mount('#app')

在頁面中使用

<template>
  <div>
    <edit />
  </div>
</template>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

局部引入

局部引入的方式只需在使用的地方引入即可。

<template>
  <div>
    <edit />
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 這個 svg組件
</script>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

配合 el-icon 一起使用

Element Plus 還提供了 el-icon 組件用來包裹 svg圖標(biāo)組件 ，使得設(shè)置圖標(biāo)大小和顏色更加方便。

但需要在項目中安裝 Element Plus ，安裝命令如下：

# 選擇其中一種方式安裝即可。

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

安裝完 Element Plus 后，可以在全局引入，也可以局部引入。

全局引入

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 圖標(biāo)
import App from './App.vue'

const app = createApp(App)
app.component(Edit.name, Edit) // 全局注冊 Edit 圖標(biāo)

app
.use(ElementPlus)
.mount('#app')

在頁面中使用

<el-icon :size="20" color="hotpink">
  <edit />
</el-icon>

此時，在 el-icon 上設(shè)置 size 和 color 就能控制 svg圖標(biāo) 的大小和顏色。

需要注意的是 size 屬性必須傳數(shù)字，不能傳字符串進(jìn)去！

局部引入

<template>
  <div>
    <el-icon :size="30" color="hotpink">
      <edit />
    </el-icon>
  </div>
</template>

<script setup>
import { ElIcon } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>

局部引入的話，我們只需要引入 icon 對應(yīng)的 css 即可。

如果你在 main.js 引入了 element-plus/dist/index.css 就不需要在頁面再引入 element-plus/es/components/icon/style/css 。

到此這篇關(guān)于Element Plus的el-icon怎么用的文章就介紹到這了,更多相關(guān)Element Plus el-icon內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue實現(xiàn)登錄數(shù)據(jù)的持久化的使用示例

    vue實現(xiàn)登錄數(shù)據(jù)的持久化的使用示例

    在Vue.js中,實現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲功能,Vue.js支持使用localStorage和sessionStorage來實現(xiàn)本地存儲,本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下
    2023-10-10
  • vue.js實現(xiàn)雙擊放大預(yù)覽功能

    vue.js實現(xiàn)雙擊放大預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)雙擊放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • vuedraggable實現(xiàn)拖拽功能

    vuedraggable實現(xiàn)拖拽功能

    這篇文章主要為大家詳細(xì)介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • element-ui中的select下拉列表設(shè)置默認(rèn)值方法

    element-ui中的select下拉列表設(shè)置默認(rèn)值方法

    今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 深入理解Vue.js3中Reactive的實現(xiàn)

    深入理解Vue.js3中Reactive的實現(xiàn)

    reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應(yīng)式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實現(xiàn),感興趣的可以了解一下
    2024-01-01
  • Vue前端整合Element?Ui的教程詳解

    Vue前端整合Element?Ui的教程詳解

    這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務(wù)于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-07-07
  • 詳解Vue.js——60分鐘組件快速入門（上篇）

    詳解Vue.js——60分鐘組件快速入門（上篇）

    本篇文章主要介紹了Vue.js組件，組件系統(tǒng)是Vue.js其中一個重要的概念，具有一定的參考價值，有需要的可以了解一下。
    2016-12-12
  • Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱

    Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱

    這篇文章主要介紹了Vue 實現(xiàn)v-for循環(huán)的時候更改 class的樣式名稱，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue 前端導(dǎo)出后端返回的excel文件方式

    Vue 前端導(dǎo)出后端返回的excel文件方式

    這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • Vue axios獲取token臨時令牌封裝案例

    Vue axios獲取token臨時令牌封裝案例

    這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09

最新評論