最近在做vue3+vite+ element-plus 后台管理项目 原本以为后台管理样式大差不差就行
没想到UI走查时像素级的检查
比如下拉选择的三角icon element图标库里面有个实心三角的icon
我通过原有插槽进行替换 suffix-icon
正当我暗自庆幸自己的奇巧淫技时 被UI告知 '我图上的三角是有圆角的'
what s the f*** !
跑题了 开始上fuck good
从vue2中我们常用的更换图标的方法是找到 类似于这个样式的一个码 放到伪类中进行替换
.el-icon-plus:before {
content: "\e6d9";
}
当然 这个方案在vue3中 貌似不能用的这么痛快
方案一 ：在element未给出插槽时 且不存在一个容器内有两个相同标签名的icon标签
所以 还有更常用的方案 就是找到这个class名 将其背景图片设置为要更改的图标样式
比如这样
.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;
}
}
方案二： 这个方案其实和方案一类似 只不过 某些场景 不能动当前的标签名 而又需要在当前的标签前后加上图标
比如这样
.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%;
}
也就是使用伪类 在前面或者后天添加进去图标 ，在这里 这是个message-box 我需要在标题前面加上一个icon
以上方案足以解决大部分图标问题，但有的时候 比如我方案一的描述不存在一个容器内有两个相同标签名的icon标签
在这里我举例一个场景：
select选择下拉框组件：如果添加clearble属性后 选择值后鼠标悬浮会出现个小X号
这个好在select给出两个插槽 但是此插槽非彼插槽 是直接在属性上的
element是使用js控制的DOM 他俩的类名是相同的 也就是说 我如果使用方法一方法二更换了图标 这两种状态显示的图标会同时被替换 相当于改了一个其他的也被改
现在的问题点在抓住这两个状态进行控制 css上是抓不住了 如果想改某个下拉框可以单独写js 根据当前下拉框是否有值加上:class 去展示
但是我要全局都用 这样会太麻烦 唯一的办法是通过更换element能够识别的图标组件
方案三： element给出的插槽 使用外面的图标库（这个方法我还没用过 别的地儿找的）
<el-input @input="fun" class="inputClass" v-model="inputModel">
<template #prefix>
<i class="iconfont icon-wodimaya"></i>
</template>
</el-input>
方案四：做一个让element能识别的图标组件 并且全局放入到element的图标组件库中
第一步
需要安装插件
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,
// 自定义图标加载
customCollections: {
// home图标集
// 给svg文件设置fill="currentColor"属性，使图标的颜色具有适应性
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>
// 自定义图标
import IconSanjiao from '~icons/home/sanjiao3';
</script>
在这一步 把图标名放入到属性插槽中是不显示的 因为element现在还不认她
第六步
让element识别到她
个人认为这一步比较关键 在加载ElementPlusIconsVue时 将自己的组件混入其中 比如这样
而在后面调用时 key 也就是你组件的名字
现在去页面看一下效果呗
至此 大部分vue3图标组件就处于可调整的状态了
希望更多大佬能给给出其他思路与技巧 大家一起探讨！
更多unplugin-icons使用方法参考
https://blog.csdn.net/qq_43430453/article/details/123267638
