|
| 1 | +<template> |
| 2 | + <n-popover placement="bottom-end" trigger="click"> |
| 3 | + <template #trigger> |
| 4 | + <n-input v-model:value="modelValue" readonly placeholder="点击选择图标"> |
| 5 | + <template #suffix> |
| 6 | + <Icon :icon="modelValue ? modelValue : 'mdi:apps'" class="text-30px p-5px" /> |
| 7 | + </template> |
| 8 | + </n-input> |
| 9 | + </template> |
| 10 | + <template #header> |
| 11 | + <n-input v-model:value="searchValue" placeholder="搜索图标"></n-input> |
| 12 | + </template> |
| 13 | + <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto"> |
| 14 | + <template v-for="iconItem in iconsList" :key="iconItem"> |
| 15 | + <Icon |
| 16 | + :icon="iconItem" |
| 17 | + class="border-1px border-[#d9d9d9] text-30px m-2px p-5px" |
| 18 | + :style="{ 'border-color': modelValue === iconItem ? theme.themeColor : '' }" |
| 19 | + @click="handleChange(iconItem)" |
| 20 | + /> |
| 21 | + </template> |
| 22 | + </div> |
| 23 | + <n-empty v-else class="w-306px" description="你什么也找不到" /> |
| 24 | + </n-popover> |
| 25 | +</template> |
| 26 | + |
| 27 | +<script lang="ts" setup> |
| 28 | +import { ref, computed } from 'vue'; |
| 29 | +import { NPopover, NInput, NEmpty } from 'naive-ui'; |
| 30 | +import { Icon } from '@iconify/vue'; |
| 31 | +import { useThemeStore } from '@/store'; |
| 32 | +
|
| 33 | +interface Props { |
| 34 | + /** 绑定的图标 */ |
| 35 | + value: string; |
| 36 | + /** 图标列表 */ |
| 37 | + icons?: string[]; |
| 38 | +} |
| 39 | +
|
| 40 | +interface Emits { |
| 41 | + (e: 'update:value', val: string): void; |
| 42 | +} |
| 43 | +
|
| 44 | +const props = withDefaults(defineProps<Props>(), { |
| 45 | + icons: () => [] |
| 46 | +}); |
| 47 | +
|
| 48 | +const emit = defineEmits<Emits>(); |
| 49 | +
|
| 50 | +const theme = useThemeStore(); |
| 51 | +const searchValue = ref(''); |
| 52 | +
|
| 53 | +const modelValue = computed({ |
| 54 | + get() { |
| 55 | + return props.value; |
| 56 | + }, |
| 57 | + set(val: string) { |
| 58 | + emit('update:value', val); |
| 59 | + } |
| 60 | +}); |
| 61 | +
|
| 62 | +const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value))); |
| 63 | +
|
| 64 | +function handleChange(iconItem: string) { |
| 65 | + modelValue.value = iconItem; |
| 66 | +} |
| 67 | +</script> |
| 68 | +<style lang="scss" scoped> |
| 69 | +:deep(.n-input-wrapper) { |
| 70 | + padding-right: 0; |
| 71 | +} |
| 72 | +:deep(.n-input__suffix) { |
| 73 | + border: 1px solid #d9d9d9; |
| 74 | +} |
| 75 | +</style> |
0 commit comments