mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 15:28:36 +08:00
feat: FaSlider 组件增加 tooltip 属性
This commit is contained in:
@@ -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,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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user