最近在做vue3+vite+ element-plus 后臺(tái)管理項(xiàng)目 原本以為后臺(tái)管理樣式大差不差就行
沒想到UI走查時(shí)像素級(jí)的檢查
比如下拉選擇的三角icon element圖標(biāo)庫里面有個(gè)實(shí)心三角的icon
我通過原有插槽進(jìn)行替換 suffix-icon
正當(dāng)我暗自慶幸自己的奇巧淫技時(shí) 被UI告知 '我圖上的三角是有圓角的'
what s the f*** !
跑題了 開始上fuck good
從vue2中我們常用的更換圖標(biāo)的方法是找到 類似于這個(gè)樣式的一個(gè)碼 放到偽類中進(jìn)行替換
.el-icon-plus:before {
content: "\e6d9";
}
當(dāng)然 這個(gè)方案在vue3中 貌似不能用的這么痛快
方案一 ：在element未給出插槽時(shí) 且不存在一個(gè)容器內(nèi)有兩個(gè)相同標(biāo)簽名的icon標(biāo)簽
所以 還有更常用的方案 就是找到這個(gè)class名 將其背景圖片設(shè)置為要更改的圖標(biāo)樣式
比如這樣
.icon-arrow-down{
background-image: url('@/assets/svg/sanjiao3.svg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
// width: 12px;
// height: 12px;
svg{
display: none;
}
}
方案二： 這個(gè)方案其實(shí)和方案一類似 只不過 某些場(chǎng)景 不能動(dòng)當(dāng)前的標(biāo)簽名 而又需要在當(dāng)前的標(biāo)簽前后加上圖標(biāo)
比如這樣
.el-message-box__title:before {
content: '';
position: absolute;
left: 0;
top: -3px;
width: 22px;
height: 22px;
background-image: url(../assets/confirmi.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
也就是使用偽類 在前面或者后天添加進(jìn)去圖標(biāo) ，在這里 這是個(gè)message-box 我需要在標(biāo)題前面加上一個(gè)icon
以上方案足以解決大部分圖標(biāo)問題，但有的時(shí)候 比如我方案一的描述不存在一個(gè)容器內(nèi)有兩個(gè)相同標(biāo)簽名的icon標(biāo)簽
在這里我舉例一個(gè)場(chǎng)景：
select選擇下拉框組件：如果添加clearble屬性后 選擇值后鼠標(biāo)懸浮會(huì)出現(xiàn)個(gè)小X號(hào)
這個(gè)好在select給出兩個(gè)插槽 但是此插槽非彼插槽 是直接在屬性上的
element是使用js控制的DOM 他倆的類名是相同的 也就是說 我如果使用方法一方法二更換了圖標(biāo) 這兩種狀態(tài)顯示的圖標(biāo)會(huì)同時(shí)被替換 相當(dāng)于改了一個(gè)其他的也被改
現(xiàn)在的問題點(diǎn)在抓住這兩個(gè)狀態(tài)進(jìn)行控制 css上是抓不住了 如果想改某個(gè)下拉框可以單獨(dú)寫js 根據(jù)當(dāng)前下拉框是否有值加上:class 去展示
但是我要全局都用 這樣會(huì)太麻煩 唯一的辦法是通過更換element能夠識(shí)別的圖標(biāo)組件
方案三： element給出的插槽 使用外面的圖標(biāo)庫（這個(gè)方法我還沒用過 別的地兒找的）
<el-input @input="fun" class="inputClass" v-model="inputModel">
<template #prefix>
<i class="iconfont icon-wodimaya"></i>
</template>
</el-input>
方案四：做一個(gè)讓element能識(shí)別的圖標(biāo)組件 并且全局放入到element的圖標(biāo)組件庫中
第一步
需要安裝插件
npm i -D unplugin-icons
第二步
config中配置
Vue3 + VueCLI
// vue.config.js
// 引入
const Icons = require('unplugin-icons/webpack')
module.exports = {
configureWebpack: {
plugins: [
// 使用
Icons({ compiler: 'vue3' }),
],
}
}
vue3 + vite
// vite.config.js
import Icons from 'unplugin-icons/vite'
export default defineConfig({
plugins: [
Icons({ compiler: 'vue3' }),
],
})
第三步
放入要替換的svg文件
第四步
config中配置SVG 文件解析的 loader
Icons({
compiler: 'vue3',
autoInstall: true,
// 自定義圖標(biāo)加載
customCollections: {
// home圖標(biāo)集
// 給svg文件設(shè)置fill="currentColor"屬性，使圖標(biāo)的顏色具有適應(yīng)性
home: FileSystemIconLoader('src/assets/svg', svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
}
}),
第五步
在頁面中引用一下 看看是否成功
<template>
<el-icon size="14" color="#000"><IconSanjiao /></el-icon>
</template>
<script setup>
// 自定義圖標(biāo)
import IconSanjiao from '~icons/home/sanjiao3';
</script>
在這一步 把圖標(biāo)名放入到屬性插槽中是不顯示的 因?yàn)閑lement現(xiàn)在還不認(rèn)她
第六步
讓element識(shí)別到她
個(gè)人認(rèn)為這一步比較關(guān)鍵 在加載ElementPlusIconsVue時(shí) 將自己的組件混入其中 比如這樣
而在后面調(diào)用時(shí) key 也就是你組件的名字
現(xiàn)在去頁面看一下效果唄
至此 大部分vue3圖標(biāo)組件就處于可調(diào)整的狀態(tài)了
希望更多大佬能給給出其他思路與技巧 大家一起探討！
更多unplugin-icons使用方法參考
https://blog.csdn.net/qq_43430453/article/details/123267638
