renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: improve slider implementation & fix TS errors

Browse Source
This commit is contained in:
Hakadao
2023-09-03 14:08:38 +08:00
parent 8338f1a9d1
commit a91e710bce
3 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Settings/components/Appearance.vue
View File

@@ -159,13 +159,13 @@ function changeWallpaper(url: string) {
<Radio v-model="settings.enableWallpaperMasking" />
</SettingItem>
<SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
<Slider v-model:value="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
<Slider v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
</SettingItem>
<SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
<template #desc>
<span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
</template>
<Slider v-model:value="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
<Slider v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
</SettingItem>
</template>

4
src/components/Settings/components/SearchPage.vue
View File

@@ -214,13 +214,13 @@ function changeWallpaper(url: string) {
<Radio v-model="settings.searchPageEnableWallpaperMasking" />
</SettingItem>
<SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
<Slider v-model:value="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
<Slider v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
</SettingItem>
<SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
<template #desc>
<span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
</template>
<Slider v-model:value="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
<Slider v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
</SettingItem>
</template>
</template>

20
src/components/Slider.vue
View File

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
interface Props {
min?: number
max?: number
value: number
modelValue: number
label: string
}
const props = withDefaults(defineProps<Props>(), {
@@ -12,23 +12,23 @@ const props = withDefaults(defineProps<Props>(), {
max: 100,
})
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:modelValue'])
const modelValue = ref<number>(props.value)
const rangeRef = ref<HTMLElement>() as Ref<HTMLElement>
const modelValue = ref<number>(props.modelValue)
const rangeRef = ref<HTMLInputElement>() as Ref<HTMLInputElement>
onMounted(() => {
modelValue.value = props.value
const progress = (modelValue.value / rangeRef.value!.max) * 100
modelValue.value = props.modelValue
const progress = (modelValue.value / Number(rangeRef.value.max)) * 100
rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
if (rangeRef.value) {
rangeRef.value.addEventListener('input', (event: Event) => {
const tempSliderValue = event.target!.value
emit('update:value', tempSliderValue)
const tempSliderValue = Number((event.target as HTMLInputElement).value)
emit('update:modelValue', Number(tempSliderValue))
const progress = (tempSliderValue / rangeRef.value!.max) * 100
const progress = (tempSliderValue / Number(rangeRef.value.max)) * 100
rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
})
@@ -40,7 +40,7 @@ onMounted(() => {
<label cursor-pointer flex items-center gap-3 w="$b-slider-width">
<input
ref="rangeRef"
type="range" :min="min" :max="max" :value="value" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
v-model="modelValue" type="range" :min="min" :max="max" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
border="size-$b-border-width color-$bew-border-color" w="$b-slider-width" h="$b-slider-height"
>
<span>{{ label }}</span>