mirror of https://gitee.com/xiaonuobase/snowy
增加iconSelector图标选择器在打开时定位到已经选择图标位置,光标移动到图标显示图标名称
parent
3bb09dafe4
commit
0b05df4f93
|
@ -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)"
|
||||||
>
|
>
|
||||||
<component :is="icon" class="xn-icons" />
|
<div :id="icon" @mouseover="iconInfo = icon">
|
||||||
|
<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
|
||||||
|
|
Loading…
Reference in New Issue