UNPKG

wot-design-uni

Version:

一个基于Vue3+TS开发的uni-app组件库,提供70+高质量组件,支持暗黑模式、国际化和自定义主题。

139 lines (117 loc) 2.61 kB
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue' import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props' /** * 滑块值类型 - 单滑块为数字,双滑块为数组 */ export type SliderValue = number | number[] export const sliderProps = { ...baseProps, /** * 自定义最小值的样式类名 * 类型: string * 默认值: '' */ customMinClass: makeStringProp(''), /** * 自定义最大值的样式类名 * 类型: string * 默认值: '' */ customMaxClass: makeStringProp(''), /** * 是否隐藏左右的最大最小值 * 类型: boolean * 默认值: false */ hideMinMax: makeBooleanProp(false), /** * 是否隐藏当前滑块值 * 类型: boolean * 默认值: false */ hideLabel: makeBooleanProp(false), /** * 是否禁用滑块 * 类型: boolean * 默认值: false */ disabled: makeBooleanProp(false), /** * 进度条未激活的背景颜色 * 类型: string * 默认值: '#e5e5e5' */ inactiveColor: makeStringProp('#e5e5e5'), /** * 进度条激活的背景颜色 * 类型: string * 默认值: '' */ activeColor: makeStringProp(''), /** * 滑块的最大值 * 类型: number * 默认值: 100 */ max: makeNumberProp(100), /** * 滑块的最小值 * 类型: number * 默认值: 0 */ min: makeNumberProp(0), /** * 滑块的步进值 * 类型: number * 默认值: 1 */ step: makeNumberProp(1), /** * 滑块的值,如果为数组,则为双向滑块 * 类型: number | number[] * 默认值: 0 */ modelValue: { type: [Number, Array] as PropType<SliderValue>, default: 0 } } /** * 滑块拖动事件参数 */ export interface SliderDragEvent { /** * 当前滑块的值 * 单滑块模式为数字,双滑块模式为数组 */ value: SliderValue } /** * 滑块组件事件类型定义 */ export type SliderEmits = { /** * 开始拖动滑块时触发 */ dragstart: [event: SliderDragEvent] /** * 拖动滑块过程中触发 */ dragmove: [event: SliderDragEvent] /** * 结束拖动滑块时触发 */ dragend: [event: SliderDragEvent] /** * 更新滑块值时触发,用于v-model绑定 */ 'update:modelValue': [value: SliderValue] } export type SliderExpose = { /** * 初始化slider宽度 */ initSlider: () => void } export type SliderProps = ExtractPropTypes<typeof sliderProps> export type SliderInstance = ComponentPublicInstance<SliderProps, SliderExpose>