ElementIcon圖標詳解

一、ElementIcon圖標如何cdn引入

ElementIcon是一組圖標庫，提供了大量的圖標供我們使用，官方也支持通過cdn引入，這樣可以減少我們本地的文件大小，提高頁面加載速度。

引入方式如下：

<!-- 引入 Element font icon CSS -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/icon.css">
<!-- 引入 Element icon font CDN -->
<script src="//unpkg.com/element-ui/lib/index.js"></script>

以上代碼中，我們需要引入element-ui的icon.css文件，然後再使用element-ui的cdn地址來進行引入。這樣我們就可以在項目中使用ElementIcon圖標了。

二、ElementUI圖標導出

ElementUI提供了圖標導出的功能，我們可以根據項目需求進行選擇外部或者內部的導出。如果我們需要導出內部的圖標，我們可以通過以下方式進行操作：

import { ElIcon } from 'element-plus';
import 'element-plus/lib/theme-chalk/icon.css';

這裡我們首先需要將ElIcon引入進來，然後再引入element-plus的樣式文件，這樣我們就可以方便地使用內置的ElementIcon圖標了。

如果我們需要導出外部的圖標，可以通過以下方式進行操作：

<!-- link片段文本 -->
<link rel="stylesheet" href="/path/to/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/dracula/7.1.0/js/dracula.min.js"></script>
<!-- 或者全局</head> 標籤中引入 -->
<script>
    import '@fortawesome/fontawesome-free/css/all.css'
    import '@fortawesome/fontawesome-free/js/all.js'
</script>

這裡我們需要先引入外部圖標庫的樣式和js文件，這樣我們就可以使用外部的圖標了。常見的外部圖標庫有Font Awesome、Material Icons等。

三、ElementUI顯示圖片

除了使用ElementIcon圖標，我們還可以在ElementUI中使用圖片來進行展示。主要有以下幾種方式：

1、使用img標籤進行展示

<img src="path/to/image.jpg">

2、使用ElementUI的Image組件進行展示

<el-image 
    style="width: 100px; height: 100px" 
    src="path/to/image.jpg" 
    fit="cover">
</el-image>

3、使用CSS背景圖進行展示

<div style="background-image: url(path/to/image.jpg)"></div>

四、ElementUI圖片預覽

在ElementUI中，我們可以使用Dialog組件來進行圖片預覽，具體操作如下：

<el-dialog title="圖片預覽" v-model="dialogVisible">
  <div style="text-align: center">
    <img :src="currentImageUrl">
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">關 閉</el-button>
  </span>
</el-dialog>

以上代碼中，我們使用Dialog組件來進行圖片預覽，然後使用img標籤來展示當前的圖片，同時在底部添加了一個關閉按鈕。

五、ElementUI判斷使用圖標選取

在項目中，我們經常需要判斷一些條件來使用不同的圖標，可以通過以下方式來實現：

<i class="el-icon-circle-check"
   v-if="status === 'finished'"></i>

<i class="el-icon-error"
   v-else-if="status === 'error'"></i>

<i class="el-icon-warning"
   v-else-if="status === 'warning'"></i>

<i class="el-icon-time"
   v-else-if="status === 'waiting'"></i>

以上代碼中，我們通過v-if指令來判斷使用不同的ElementIcon圖標，具體根據自己的項目需求來進行使用。