by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: builtin color change throttled in preference drawer (#5924)

Browse Source 
修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题
This commit is contained in:
Netfan 2025-04-12 01:44:08 +08:00 committed by GitHub
parent f46ec30995
commit 36bf6fc149
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
View File

@ -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() {