增加iconSelector图标选择器在打开时定位到已经选择图标位置,光标移动到图标显示图标名称

pull/212/head
andrewgreat 2024-05-17 13:36:23 +08:00 committed by 小诺
parent 3bb09dafe4
commit 0b05df4f93
1 changed files with 19 additions and 2 deletions

View File

@ -5,7 +5,6 @@
:mask-closable="false" :mask-closable="false"
:width="800" :width="800"
:destroy-on-close="true" :destroy-on-close="true"
:footer="null"
@cancel="onCancel" @cancel="onCancel"
> >
<a-tabs v-model:activeKey="activeKey" tab-position="left" size="small" @change="paneChange"> <a-tabs v-model:activeKey="activeKey" tab-position="left" size="small" @change="paneChange">
@ -16,6 +15,7 @@
iconItem.name iconItem.name
}}</a-radio-button> }}</a-radio-button>
</a-radio-group> </a-radio-group>
<span style="margin-left: 10px">{{ iconInfo }}</span>
</div> </div>
<div :key="iconItemIns" v-for="iconItemIns in item.iconItem"> <div :key="iconItemIns" v-for="iconItemIns in item.iconItem">
@ -27,7 +27,9 @@
:class="icon === modelValue ? 'active' : ''" :class="icon === modelValue ? 'active' : ''"
@click="selectIcon(icon)" @click="selectIcon(icon)"
> >
<div :id="icon" @mouseover="iconInfo = icon">
<component :is="icon" class="xn-icons" /> <component :is="icon" class="xn-icons" />
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -43,6 +45,7 @@
const modelValue = ref('') const modelValue = ref('')
const activeKey = ref('default') const activeKey = ref('default')
const iconItemDefault = ref('default') const iconItemDefault = ref('default')
const iconInfo = ref()
onMounted(() => { onMounted(() => {
iconData.value.push(...config.icons) iconData.value.push(...config.icons)
@ -52,6 +55,7 @@
const showIconModal = (value) => { const showIconModal = (value) => {
visible.value = true visible.value = true
defaultSetting(value) defaultSetting(value)
autoSwitchTab(value)
} }
// //
@ -87,6 +91,19 @@
?.iconItem.some((groupItem) => groupItem.key === iconItemDefault.value) || (iconItemDefault.value = 'default') ?.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 // icon
const radioGroupChange = (e) => { const radioGroupChange = (e) => {
iconItemDefault.value = e.target.value iconItemDefault.value = e.target.value