Vant Slider 滑块
Vant Slider 滑块组建主要用来设计圆型滑块与数字滑块的点。
import Vue from 'vue'; import { Slider } from 'vant'; Vue.use(Slider);
<van-slider v-model="value" @change="onChange" />
import { Toast } from 'vant'; export default { data() { return { value: 50 }; }, methods: { onChange(value) { Toast('当前值:' + value); } } };
<van-slider v-model="value" :min="-50" :max="50" />
<van-slider v-model="value" disabled />
<van-slider v-model="value" :step="10" />
<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />
<van-slider v-model="value" active-color="#ee0a24"> <div slot="button" class="custom-button"> {{ value }} </div> </van-slider> <style> .custom-button { width: 26px; color: #fff; font-size: 10px; line-height: 18px; text-align: center; background-color: #ee0a24; border-radius: 100px; } </style>
Slider 垂直展示时,高度为 100% 父元素高度
<div :style="{ height: '100px' }"> <van-slider v-model="value" vertical /> </div>