滑块 Slider

基本用法

**注意:因为仅支持触摸事件,所以请打开chrome手机模拟查看demo

滑块组件 Slider - 图1

  1. <template lang="html">
  2. <div>
  3. <div class="demo-hidden">
  4. <za-panel>
  5. <za-panel-header title="基本">
  6. </za-panel-header>
  7. <za-panel-body>
  8. <za-cell title="普通">
  9. <za-slider
  10. :default-value='0'
  11. @change='handleChange'
  12. ></za-slider>
  13. </za-cell>
  14. <za-cell title="设置默认值">
  15. <za-slider :default-value='20'></za-slider>
  16. </za-cell>
  17. <za-cell title="设置上下限">
  18. <za-slider :min='-100' :max='100' :default-value='0' ></za-slider>
  19. </za-cell>
  20. <za-cell title="设置步长">
  21. <za-slider :step='10' ></za-slider>
  22. </za-cell>
  23. <za-cell title="禁用状态">
  24. <za-slider :default-value='20' disabled ></za-slider>
  25. </za-cell>
  26. </za-panel-body>
  27. </za-panel>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. }
  36. },
  37. methods: {
  38. handleChange(ev,value){
  39. console.log(value)
  40. }
  41. },
  42. };
  43. </script>

API

Slider Attributes

属性类型默认值可选值/参数说明
prefixClsstringza-slider类名前缀
defaultValuenumber
minnumber最小值
maxnumber最大值
stepnumber1步长
disabledboolfalse是否禁用

Slider Events

事件名称说明回调参数
changefuncnoop