diff --git a/src/assets/icons/qq.svg b/src/assets/icons/qq.svg deleted file mode 100644 index 98da3953..00000000 --- a/src/assets/icons/qq.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/wechat.svg b/src/assets/icons/wechat.svg deleted file mode 100644 index 35de4bc3..00000000 --- a/src/assets/icons/wechat.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index ea6aed4e..864aa837 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -3,24 +3,57 @@ const props = defineProps({ modelValue: { type: String, require: false + }, + /** + * 选择器宽度 + */ + width: { + type: String, + require: false, + default: '400px' } }); const emit = defineEmits(['update:modelValue']); const visible = ref(false); const inputValue = toRef(props, 'modelValue'); -const iconList = ref([]); +const width = toRef(props, 'width'); +const iconNames: string[] = []; +const filterIconNames = ref([]); const filterValue = ref(''); -const icon = ref('perm'); - function loadIcons() { - const modules = import.meta.glob('../../assets/icons/*.svg'); - for (const path in modules) { - const icon = path.split('assets/icons/')[1].split('.svg')[0]; - iconList.value.push(icon); + const icons = import.meta.glob('../../assets/icons/*.svg'); + for (const icon in icons) { + const iconName = icon.split('assets/icons/')[1].split('.svg')[0]; + iconNames.push(iconName); } + filterIconNames.value = iconNames; +} + +/** + * 筛选图标 + */ +function handleIconFilter() { + console.log('筛选关键字', filterValue.value); + if (filterValue.value) { + filterIconNames.value = filterIconNames.value.filter(iconName => + iconName.includes(filterValue.value) + ); + } else { + filterIconNames.value = iconNames; + } +} + +/** + * 选择图标 + * + * @param iconName 选择的图标名称 + */ +function onIconSelect(iconName: string) { + emit('update:modelValue', iconName); + visible.value = false; } onMounted(() => { @@ -29,9 +62,16 @@ onMounted(() => {