GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 图标选择器增加扩展树形

Browse Source
This commit is contained in:
Yanbowen 2021-12-18 16:50:20 +08:00
parent 9472b51811
commit 041012b3ee
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/IconSelect/index.vue
View File

@ -3,7 +3,7 @@
<template #trigger> <template #trigger>
<n-input v-model:value="modelValue" readonly placeholder="点击选择图标"> <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
<template #suffix> <template #suffix>
<Icon :icon="modelValue ? modelValue : 'mdi:apps'" class="text-30px p-5px" /> <Icon :icon="modelValue ? modelValue : emptyIcon" class="text-30px p-5px" />
</template> </template>
</n-input> </n-input>
</template> </template>
@ -31,10 +31,12 @@ import { Icon } from '@iconify/vue';
import { useThemeStore } from '@/store'; import { useThemeStore } from '@/store';
interface Props { interface Props {
/** 绑定的图标 */ /** 选中的图标 */
value: string; value: string;
/** 图标列表 */ /** 图标列表 */
icons?: string[]; icons: string[];
/** 未选中图标 */
emptyIcon?: string;
} }
interface Emits { interface Emits {
@ -42,14 +44,14 @@ interface Emits {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
icons: () => [] emptyIcon: 'mdi:apps'
}); });
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const theme = useThemeStore(); const theme = useThemeStore();
const searchValue = ref(''); const searchValue = ref('');
const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
const modelValue = computed({ const modelValue = computed({
get() { get() {
return props.value; return props.value;
@ -59,8 +61,6 @@ const modelValue = computed({
} }
}); });
const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
function handleChange(iconItem: string) { function handleChange(iconItem: string) {
modelValue.value = iconItem; modelValue.value = iconItem;
} }