滑动输入条 Slider

基本

  1. <za-cell title="普通">
  2. <za-slider :default-value="40" @change="handleChange"></za-slider>
  3. </za-cell>
  4. <za-cell title="设置默认值">
  5. <za-slider :default-value="20"></za-slider>
  6. </za-cell>
  7. <za-cell title="设置上下限">
  8. <za-slider :min="-100" :max="100" v-model="initvalue" @change="handleChange"></za-slider>
  9. </za-cell>
  10. <za-cell title="设置步长">
  11. <za-slider :step="10"></za-slider>
  12. </za-cell>
  13. <za-cell title="禁用状态">
  14. <za-slider :default-value="20" disabled></za-slider>
  15. </za-cell>

Vue Script

  1. <script name="vue">
  2. export default {
  3. data() {
  4. return {
  5. initvalue: 10,
  6. }
  7. },
  8. methods: {
  9. handleChange(){
  10. const self = this;
  11. console.log(self.initvalue)
  12. }
  13. },
  14. };
  15. </script>

API

Slider Attributes

属性类型默认值可选值/参数说明
v-modelnumber绑定选项值
default-valuenumber
minnumber最小值
maxnumber最大值
stepnumber1步长
disabledbooleanfalse是否禁用

Slider Events

事件名称说明回调参数
changefunctionnoop

Slider 滑动输入条 - 图1