Slider 滑块

使用指南

  1. import { Slider } from 'vant';
  3. Vue.use(Slider);

基本用法

  1. <van-slider v-model="value" @change="onChange" />
  1. export default {
  2.   data() {
  3.     return {
  4.       value: 50
  5.     };
  6.   },
  8.   methods: {
  9.     onChange(value) {
  10.       this.- toast('当前值：' + value);
  11.     }
  12.   }
  13. };

指定选择范围

  1. <van-slider v-model="value" :min="10" :max="90" />

禁用

  1. <van-slider v-model="value" disabled />

指定步长

  1. <van-slider v-model="value" :step="10" bar-height="4px" />

API

参数 说明 类型 默认值
value 当前进度百分比 Number 0
disabled 是否禁用滑块 Boolean false
max 最大值 Number 100
min 最小值 Number 0
step 步长 Number 1
bar-height 进度条高度 String 2px

Event

事件名 说明 参数
change 进度值改变后触发 value: 当前进度

原文:

https://youzan.github.io/vant/#/zh-CN/slider