diff --git a/snowy-admin-web/src/components/Selector/iconSelector.vue b/snowy-admin-web/src/components/Selector/iconSelector.vue index 80f84e83..47babe9b 100644 --- a/snowy-admin-web/src/components/Selector/iconSelector.vue +++ b/snowy-admin-web/src/components/Selector/iconSelector.vue @@ -5,7 +5,6 @@ :mask-closable="false" :width="800" :destroy-on-close="true" - :footer="null" @cancel="onCancel" > @@ -16,6 +15,7 @@ iconItem.name }} + {{ iconInfo }}
@@ -27,7 +27,9 @@ :class="icon === modelValue ? 'active' : ''" @click="selectIcon(icon)" > - +
+ +
@@ -43,6 +45,7 @@ const modelValue = ref('') const activeKey = ref('default') const iconItemDefault = ref('default') + const iconInfo = ref() onMounted(() => { iconData.value.push(...config.icons) @@ -52,6 +55,7 @@ const showIconModal = (value) => { visible.value = true defaultSetting(value) + autoSwitchTab(value) } // 暴露子组件的方法 @@ -87,6 +91,19 @@ ?.iconItem.some((groupItem) => groupItem.key === iconItemDefault.value) || (iconItemDefault.value = 'default') } + function autoSwitchTab(val) { + if (val) { + iconData.value.some( + (tabItem) => + tabItem.iconItem.some( + (groupItem) => groupItem.item.some((icon) => icon === val) && (iconItemDefault.value = groupItem.key) + ) && (activeKey.value = tabItem.key) + ) + nextTick(() => { + document.getElementById(val)?.scrollIntoView({ block: 'center' }) + }) + } + } // 切换icon风格 const radioGroupChange = (e) => { iconItemDefault.value = e.target.value