| vue3+element plus封装自定义图标选择器(带图标搜索功能) | 您所在的位置：网站首页 › 图标选择器 › vue3+element plus封装自定义图标选择器(带图标搜索功能) |
vue3+element plus封装自定义图标选择器(带图标搜索功能)
|
在日常的开发中，element plus中的icon图标可能无法满足开发需求，需要用到自定义图标，闲暇之际，封装了一个自定义图标选择器，如有不足欢迎指正~ 一、效果展示
我是从iconfont里面下载自己需要的svg图标，如图： 参考路径：src\components\svgIcon\index.vue import {computed} from 'vue' const props = defineProps({ prefix: { type: String, default: 'icon' }, iconClass: { type: String, default:'' }, color: { type: String, default:'' }, size: { type: String, default: '18px' } }) const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`) .svg-icon { fill: currentColor;//currentColor变量表示当前图标color值 } 6.使用组件 //如需要更改图标颜色，直接color传参即可 import { ref } from 'vue' const color = ref('#0aa1ed')注意：如果需要更改图标颜色需要将下载的每个.svg图标中path路径里所有的“fill='*****(颜色值)'”直接删除，传参绑定color即可，如上。 7.创建图片选择器组件并使用参考路径：src\view\system\menu\components\iconSelect.vue,子组件部分代码如下： {{icon}}
请选择图标
{{item}}
import { ElPopover, formEmits } from 'element-plus'
import { computed, reactive, watch, ref, onMounted } from 'vue'
import { menuIcon } from '@/common/menuIcons'
const props = defineProps({
icon:{
type:String,
default:''
}
})
const menuIcons = ref([])
const icon = ref()
const showPopover = ref(false)
const keyword = ref('')
// 搜索图标
const searchKw = () => {
if(!menuIcons.value) return
let list = menuIcons.value.filter(item => {
return item.indexOf(keyword.value) >= 0
})
menuIcons.value = list
}
onMounted(() => {menuIcons.value = menuIcon})
const emit = defineEmits(['selected'])
// 选择图标
const changeIcons = ( item: string ) => {
icon.value = item
keyword.value = ''
showPopover.value = false
emit('selected',icon.value)
}
// 关闭
const clearIconPpopver = () => {
keyword.value = ''
menuIcons.value = []
}
watch([ keyword, ()=>props.icon],( newVal, oldVal ) => {
icon.value = newVal[1]
if(!keyword.value) menuIcons.value = menuIcon
let list = menuIcons.value.filter(item => {
return item.indexOf(keyword.value) >= 0
})
menuIcons.value = list
},{immediate:true})
menuIcons文件： 参考路径：src\common\menuIcons.js //下载的svg图标名称 export const menuIcon = [ 'audit', 'classify', 'collect', 'comment', 'dept', 'dictionaries', 'link', 'log', 'logininfor', 'menu', 'notice', 'noticeList', 'news', 'operlog', 'post', 'port', 'role', 'system', 'table', 'user', //..... ]父组件使用： 参考路径：src\view\system\menu\index.vue //.... //... import IconSelect from './iconSelect.vue' import { reactive } from 'vue' const formMsg = reactive({ icon:'',//菜单图标 }) const selected = (val) => {formMsg.icon = val} 总结以上就是自定义图标选择器封装的全部内容，下载图标后即可直接使用，第一次写文章，如有不足欢迎指正~。 |
【本文地址】
公司简介
联系我们