3 changed files with 65 additions and 3 deletions
@ -0,0 +1,62 @@ |
|||
<script setup lang="ts"> |
|||
import { watch } from 'vue'; |
|||
|
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { |
|||
NumberField, |
|||
NumberFieldContent, |
|||
NumberFieldDecrement, |
|||
NumberFieldIncrement, |
|||
NumberFieldInput, |
|||
} from '@vben-core/shadcn-ui'; |
|||
|
|||
defineOptions({ |
|||
name: 'PreferenceFontSize', |
|||
}); |
|||
|
|||
const modelValue = defineModel<number>({ |
|||
default: 16, |
|||
}); |
|||
|
|||
const min = 15; |
|||
const max = 22; |
|||
const step = 1; |
|||
|
|||
// 限制输入值在 min 和 max 之间 |
|||
watch( |
|||
modelValue, |
|||
(newValue) => { |
|||
if (newValue < min) { |
|||
modelValue.value = min; |
|||
} else if (newValue > max) { |
|||
modelValue.value = max; |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="flex w-full flex-col gap-4"> |
|||
<div class="flex items-center gap-2"> |
|||
<NumberField |
|||
v-model="modelValue" |
|||
:max="max" |
|||
:min="min" |
|||
:step="step" |
|||
class="w-full" |
|||
> |
|||
<NumberFieldContent> |
|||
<NumberFieldDecrement /> |
|||
<NumberFieldInput /> |
|||
<NumberFieldIncrement /> |
|||
</NumberFieldContent> |
|||
</NumberField> |
|||
<span class="text-muted-foreground whitespace-nowrap text-xs">px</span> |
|||
</div> |
|||
<div class="text-muted-foreground text-xs"> |
|||
{{ $t('preferences.theme.fontSizeTip') }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue