79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<Popover v-model:open="visible" placement="bottomLeft" trigger="focus">
|
|
<template #content>
|
|
<div class="select-box">
|
|
<template v-for="iconItem in glyphs" :key="iconItem.font_class">
|
|
<div :title="iconItem.name" class="select-box-item"
|
|
:class="{ active: modelValue?.replace('icon-', '') == iconItem.font_class }" @click="selectIcon(iconItem)">
|
|
<cust-icon-font :type="iconItem.font_class" size="20" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<a-input :disabled="disabled" v-model:value="modelValue" :placeholder="placeholder">
|
|
<template v-if="modelValue" #prefix>
|
|
<cust-icon-font :type="modelValue" size="22" />
|
|
</template>
|
|
</a-input>
|
|
</Popover>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useVModel } from '@vueuse/core';
|
|
import { Popover } from 'ant-design-vue';
|
|
import icons from './icons.json';
|
|
import { CustIconFont } from '@/components/basic/iconfont';
|
|
|
|
const { glyphs } = icons;
|
|
|
|
interface Props {
|
|
value: string;
|
|
placeholder?: string;
|
|
disabled:boolean;
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:value', val: string): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
value: '',
|
|
placeholder: '请选择',
|
|
});
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const visible = ref(false);
|
|
const modelValue = useVModel(props, 'value', emit);
|
|
|
|
const selectIcon = (iconItem: (typeof glyphs)[number]) => {
|
|
modelValue.value = iconItem.font_class;
|
|
visible.value = false;
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.select-box {
|
|
display: grid;
|
|
grid-template-columns: repeat(9,minmax(0,1fr));
|
|
height: 300px;
|
|
width: 600px;
|
|
overflow: auto;
|
|
justify-content:flex-start;
|
|
|
|
&-item {
|
|
display: flex;
|
|
margin: -2px;
|
|
padding: -6px;
|
|
height: 30px;
|
|
width: 30px;
|
|
|
|
border: 1px solid #e5e7eb;
|
|
|
|
&:hover,
|
|
&.active {
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
}
|
|
}
|
|
</style>
|