fix: builtin color change throttled in preference drawer (#5924)
修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题
This commit is contained in:
parent
f46ec30995
commit
36bf6fc149
@ -9,6 +9,8 @@ import { $t } from '@vben/locales';
|
|||||||
import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
|
import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
|
||||||
import { convertToHsl, TinyColor } from '@vben/utils';
|
import { convertToHsl, TinyColor } from '@vben/utils';
|
||||||
|
|
||||||
|
import { useThrottleFn } from '@vueuse/core';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'PreferenceBuiltinTheme',
|
name: 'PreferenceBuiltinTheme',
|
||||||
});
|
});
|
||||||
@ -19,6 +21,15 @@ const colorInput = ref();
|
|||||||
const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
|
const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
|
||||||
const themeColorPrimary = defineModel<string>('themeColorPrimary');
|
const themeColorPrimary = defineModel<string>('themeColorPrimary');
|
||||||
|
|
||||||
|
const updateThemeColorPrimary = useThrottleFn(
|
||||||
|
(value: string) => {
|
||||||
|
themeColorPrimary.value = value;
|
||||||
|
},
|
||||||
|
300,
|
||||||
|
true,
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
|
||||||
const inputValue = computed(() => {
|
const inputValue = computed(() => {
|
||||||
return new TinyColor(themeColorPrimary.value || '').toHexString();
|
return new TinyColor(themeColorPrimary.value || '').toHexString();
|
||||||
});
|
});
|
||||||
@ -84,7 +95,7 @@ function handleSelect(theme: BuiltinThemePreset) {
|
|||||||
|
|
||||||
function handleInputChange(e: Event) {
|
function handleInputChange(e: Event) {
|
||||||
const target = e.target as HTMLInputElement;
|
const target = e.target as HTMLInputElement;
|
||||||
themeColorPrimary.value = convertToHsl(target.value);
|
updateThemeColorPrimary(convertToHsl(target.value));
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectColor() {
|
function selectColor() {
|
||||||
|
Loading…
Reference in New Issue
Block a user