Slider 滑块

使用指南

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

基本用法

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

指定选择范围

  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" />

自定义样式

  1. <van-slider
  2. v-model="value"
  3. bar-height="4px"
  4. active-color="#f44"
  5. />

自定义按钮

  1. <van-slider
  2. v-model="value"
  3. active-color="#f44"
  4. >
  5. <div
  6. slot="button"
  7. class="custom-button"
  8. >
  9. {{ value }}
  10. </div>
  11. </van-slider>

API

参数说明类型默认值版本
value当前进度百分比Number01.1.0
disabled是否禁用滑块Booleanfalse1.1.0
max最大值Number1001.1.0
min最小值Number01.1.0
step步长Number11.1.0
bar-height进度条高度String2px1.1.0
active-color进度条激活态颜色String#1989fa1.5.1
inactive-color进度条默认颜色String#e5e5e51.5.1

Event

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

Slot

名称说明
button自定义滑动按钮

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