update: 字典 colorpicker

This commit is contained in:
dap 2025-04-08 19:33:35 +08:00
parent 5b9f647cfd
commit b8ec8edb38
2 changed files with 22 additions and 18 deletions

View File

@ -54,7 +54,8 @@
"tinymce": "^7.3.0", "tinymce": "^7.3.0",
"unplugin-vue-components": "^0.27.3", "unplugin-vue-components": "^0.27.3",
"vue": "catalog:", "vue": "catalog:",
"vue-router": "catalog:" "vue-router": "catalog:",
"vue3-colorpicker": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@types/crypto-js": "^4.2.2", "@types/crypto-js": "^4.2.2",

View File

@ -1,14 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RadioChangeEvent } from 'ant-design-vue'; import type { RadioChangeEvent } from 'ant-design-vue';
import type { PropType } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
import { Input, RadioGroup, Select } from 'ant-design-vue'; import { usePreferences } from '@vben/preferences';
import { RadioGroup, Select } from 'ant-design-vue';
import { ColorPicker } from 'vue3-colorpicker';
import { tagSelectOptions } from '#/components/dict'; import { tagSelectOptions } from '#/components/dict';
import 'vue3-colorpicker/style.css';
/** /**
* 需要禁止透传 * 需要禁止透传
* 不禁止会有奇怪的bug 会绑定到selectType上 * 不禁止会有奇怪的bug 会绑定到selectType上
@ -32,23 +35,26 @@ const computedOptions = computed(
type SelectType = (typeof options)[number]['value']; type SelectType = (typeof options)[number]['value'];
const selectType = defineModel('selectType', { const selectType = defineModel<SelectType>('selectType', {
default: 'default', default: 'default',
type: String as PropType<SelectType>,
}); });
/** /**
* color必须为hex颜色或者undefined * color必须为hex颜色或者undefined
*/ */
const color = defineModel('value', { const color = defineModel<string | undefined>('value', {
default: undefined, default: undefined,
type: String as PropType<string | undefined>,
}); });
function handleSelectTypeChange(e: RadioChangeEvent) { function handleSelectTypeChange(e: RadioChangeEvent) {
// hex // hex
color.value = e.target.value === 'custom' ? '#000000' : undefined; color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
} }
const { isDark } = usePreferences();
const theme = computed(() => {
return isDark.value ? 'black' : 'white';
});
</script> </script>
<template> <template>
@ -69,15 +75,12 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
placeholder="请选择标签样式" placeholder="请选择标签样式"
@deselect="$emit('deselect')" @deselect="$emit('deselect')"
/> />
<Input <ColorPicker
v-if="selectType === 'custom'" v-if="selectType === 'custom'"
v-model:value="color" disable-alpha
class="flex-1" format="hex"
disabled v-model:pure-color="color"
> :theme="theme"
<template #addonAfter> />
<input v-model="color" class="rounded-lg" type="color" />
</template>
</Input>
</div> </div>
</template> </template>