Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

基础用法

通过 v-model 绑定滑块的值。

<vd-slider v-model="value" />

const value = ref(0);

指定选择范围

通过 min 和 max 属性指定选择范围。

<vd-slider v-model="value" :min="0" :max="100" />

const value = ref(0);

双滑块模式

通过 range 属性开启双滑块模式，在 双滑块模式 下 v-model 为数组格式。

<vd-slider v-model="values" :range="true" />

const values = ref([0, 100]);

指定步长

通过 step 属性指定步长。

<vd-slider v-model="value" :step="10" />

const value = ref(0);

自定义激活色

通过 color 属性自定义激活色。

<vd-slider v-model="value" :color="'#ee0a24'" />

const value = ref(0);

展示限制

通过 show-limit 属性展示选择范围。

<vd-slider v-model="value" :show-limit="true" />

const value = ref(0);

展示文本标签

通过 show-text 属性展示文本标签。

<vd-slider v-model="value" label-type="text" />

<!-- 标签常显 -->
<vd-slider v-model="value" label-type="text" label-trigger="always" />

const value = ref(0);

自定义文案、颜色

通过插槽自定义文案，通过 color 属性自定义颜色。

<vd-slider
  v-model="value"
  min="1"
  max="4"
  show-limit
  label-trigger="always"
  :color="curValue"
>
  <template #label="{ value }">{{ labels[value] }}风险</template>
  <template #min="{ min, max, value }">{{ labels[min] }}</template>
  <template #max="{ min, max, value }">{{ labels[max] }}</template>
</vd-slider>

const value = ref(1);

const labels: any = {
  1: '一般',
  2: '较大',
  3: '重大',
  4: '特大',
};

const colors: any = {
  1: '#1989fa',
  2: '#ff976a',
  3: '#ffff00',
  4: '#ee0a24',
};

const curValue = computed(() => {
  return colors[value.value];
});

只读状态

通过 readonly 属性禁用滑块。

<vd-slider v-model="value" :readonly="true" />

const value = ref(0);

禁用状态

通过 disabled 属性禁用滑块。

<vd-slider v-model="value" :disabled="true" />

const value = ref(0);

API

Props

参数	说明	类型	默认值
v-model	当前值	string | number | (string | number)[]	-
min	最小值	string | number	0
max	最大值	string | number	100
step	步长	string | number	1
duration	动画时长	string | number	300
label-type	标签类型	text | bubble | none	bubble
label-trigger	标签触发方式	touch | always	touch
label-position	标签位置	top | bottom	top
show-limit	是否展示限制范围标签	boolean	false
range	是否双滑块模式	boolean	false
height	进度条高度	string | number	2
color	激活色	string	-
inactive-color	未激活色	string	-
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	number | number[]

Slots

名称	说明
min	最小限制
max	最大限制
thumb	滑块
label	标签