refactor(web-antd): 移除vue3-colorpicker依赖并使用antdv-next的ColorPicker
替换vue3-colorpicker为antdv-next内置的ColorPicker组件,简化依赖并统一组件库
This commit is contained in:
parent
0ab5c46812
commit
2d68ff0d61
@ -53,8 +53,7 @@
|
|||||||
"tinymce": "7.9.1",
|
"tinymce": "7.9.1",
|
||||||
"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/lodash-es": "^4.17.12"
|
"@types/lodash-es": "^4.17.12"
|
||||||
|
|||||||
@ -3,15 +3,10 @@ import type { RadioChangeEvent } from 'antdv-next';
|
|||||||
|
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
import { usePreferences } from '@vben/preferences';
|
import { ColorPicker, RadioGroup, Select } from 'antdv-next';
|
||||||
|
|
||||||
import { RadioGroup, Select } from 'antdv-next';
|
|
||||||
import { ColorPicker } from 'vue3-colorpicker';
|
|
||||||
|
|
||||||
import { tagSelectOptions } from '#/components/dict';
|
import { tagSelectOptions } from '#/components/dict';
|
||||||
|
|
||||||
import 'vue3-colorpicker/style.css';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 需要禁止透传
|
* 需要禁止透传
|
||||||
* 不禁止会有奇怪的bug 会绑定到selectType上
|
* 不禁止会有奇怪的bug 会绑定到selectType上
|
||||||
@ -50,11 +45,6 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
|
|||||||
// 必须给默认hex颜色 不能为空字符串
|
// 必须给默认hex颜色 不能为空字符串
|
||||||
color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
|
color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { isDark } = usePreferences();
|
|
||||||
const theme = computed(() => {
|
|
||||||
return isDark.value ? 'black' : 'white';
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -75,12 +65,11 @@ const theme = computed(() => {
|
|||||||
placeholder="请选择标签样式"
|
placeholder="请选择标签样式"
|
||||||
@deselect="$emit('deselect')"
|
@deselect="$emit('deselect')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
v-if="selectType === 'custom'"
|
v-if="selectType === 'custom'"
|
||||||
disable-alpha
|
v-model:value="color"
|
||||||
format="hex"
|
show-text
|
||||||
v-model:pure-color="color"
|
|
||||||
:theme="theme"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user