u-slider.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view
  3. class="u-slider"
  4. :style="[$u.addStyle(customStyle)]"
  5. >
  6. <slider
  7. :min="min"
  8. :max="max"
  9. :step="step"
  10. :value="value"
  11. :activeColor="activeColor"
  12. :inactiveColor="inactiveColor"
  13. :blockSize="$u.getPx(blockSize)"
  14. :blockColor="blockColor"
  15. :showValue="showValue"
  16. :disabled="disabled"
  17. @changing="changingHandler"
  18. @change="changeHandler"
  19. ></slider>
  20. </view>
  21. </template>
  22. <script>
  23. import props from './props.js'
  24. export default {
  25. name: 'u--slider',
  26. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  27. methods: {
  28. // 拖动过程中触发
  29. changingHandler(e) {
  30. const {
  31. value
  32. } = e.detail
  33. // 更新v-model的值
  34. this.$emit('input', value)
  35. // 触发事件
  36. this.$emit('changing', value)
  37. },
  38. // 滑动结束时触发
  39. changeHandler(e) {
  40. const {
  41. value
  42. } = e.detail
  43. // 更新v-model的值
  44. this.$emit('input', value)
  45. // 触发事件
  46. this.$emit('change', value)
  47. }
  48. },
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. @import "../../libs/css/components.scss";
  53. </style>