update: 字典 colorpicker
This commit is contained in:
parent
5b9f647cfd
commit
b8ec8edb38
@ -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",
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user