feat: FaSlider 组件增加 tooltip 属性

This commit is contained in:
Hooray
2025-08-02 04:00:20 +08:00
parent 2e904eb8e4
commit c19d749c61
2 changed files with 7 additions and 2 deletions
+2
View File
@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
step?: SliderRootProps['step']
orientation?: SliderRootProps['orientation']
thumbAlignment?: SliderRootProps['thumbAlignment']
tooltip?: boolean
class?: HTMLAttributes['class']
}>(), {
defaultValue: () => [0],
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<{
step: 1,
orientation: 'horizontal',
thumbAlignment: 'contain',
tooltip: true,
})
const modelValue = defineModel<number[]>()
+5 -2
View File
@@ -5,7 +5,10 @@ import { reactiveOmit } from '@vueuse/core'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/utils'
const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
const props = defineProps<SliderRootProps & {
class?: HTMLAttributes['class']
tooltip?: boolean
}>()
const emits = defineEmits<SliderRootEmits>()
const delegatedProps = reactiveOmit(props, 'class')
@@ -24,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary data-[orientation=vertical]:w-2">
<SliderRange class="absolute h-full bg-primary data-[orientation=vertical]:w-full" />
</SliderTrack>
<FaTooltip v-for="(val, key) in modelValue" :key="key" :text="val.toString()" disable-closing-trigger>
<FaTooltip v-for="(val, key) in modelValue" :key="key" :text="val.toString()" disable-closing-trigger :disabled="!props.tooltip">
<SliderThumb
class="block h-5 w-5 border-2 border-primary rounded-full bg-background ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
/>