forked from mirror/misskey
fix(client): fix range slider rendering
This commit is contained in:
parent
e42e9530cb
commit
8a3f860213
@ -40,7 +40,7 @@
|
|||||||
<template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
|
<template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
|
||||||
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
|
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
|
||||||
</FormRadios>
|
</FormRadios>
|
||||||
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" class="_formBlock">
|
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
|
||||||
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
|
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
|
||||||
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
|
||||||
</FormRange>
|
</FormRange>
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, ref, watch } from 'vue';
|
import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -58,6 +58,9 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
setup(props, context) {
|
setup(props, context) {
|
||||||
|
const containerEl = ref<HTMLElement>();
|
||||||
|
const thumbEl = ref<HTMLElement>();
|
||||||
|
|
||||||
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
|
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
|
||||||
const steppedValue = computed(() => {
|
const steppedValue = computed(() => {
|
||||||
if (props.step) {
|
if (props.step) {
|
||||||
@ -78,10 +81,25 @@ export default defineComponent({
|
|||||||
if (thumbEl.value == null) return 0;
|
if (thumbEl.value == null) return 0;
|
||||||
return thumbEl.value!.offsetWidth;
|
return thumbEl.value!.offsetWidth;
|
||||||
});
|
});
|
||||||
const thumbPosition = computed(() => {
|
const thumbPosition = ref(0);
|
||||||
if (containerEl.value == null) return 0;
|
const calcThumbPosition = () => {
|
||||||
return (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
|
if (containerEl.value == null) {
|
||||||
|
thumbPosition.value = 0;
|
||||||
|
} else {
|
||||||
|
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
watch([steppedValue, containerEl], calcThumbPosition);
|
||||||
|
onMounted(() => {
|
||||||
|
const ro = new ResizeObserver((entries, observer) => {
|
||||||
|
calcThumbPosition();
|
||||||
});
|
});
|
||||||
|
ro.observe(containerEl.value);
|
||||||
|
onUnmounted(() => {
|
||||||
|
ro.disconnect();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const steps = computed(() => {
|
const steps = computed(() => {
|
||||||
if (props.step) {
|
if (props.step) {
|
||||||
return (props.max - props.min) / props.step;
|
return (props.max - props.min) / props.step;
|
||||||
@ -89,8 +107,6 @@ export default defineComponent({
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const containerEl = ref<HTMLElement>();
|
|
||||||
const thumbEl = ref<HTMLElement>();
|
|
||||||
|
|
||||||
const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
@ -119,6 +119,7 @@ export default defineComponent({
|
|||||||
mim: 0,
|
mim: 0,
|
||||||
max: 1,
|
max: 1,
|
||||||
step: 0.05,
|
step: 0.05,
|
||||||
|
textConverter: (v) => `${Math.floor(v * 100)}%`,
|
||||||
label: this.$ts.volume,
|
label: this.$ts.volume,
|
||||||
default: this.sounds[type].volume
|
default: this.sounds[type].volume
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user