u-slider.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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="modelValue"
  11. :activeColor="activeColor"
  12. :backgroundColor="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. import mpMixin from '../../libs/mixin/mpMixin.js';
  25. import mixin from '../../libs/mixin/mixin.js';
  26. export default {
  27. name: 'u--slider',
  28. mixins: [mpMixin, mixin, props],
  29. emits: ["changing", "change", "update:modelValue"],
  30. methods: {
  31. // 拖动过程中触发
  32. changingHandler(e) {
  33. const {
  34. value
  35. } = e.detail
  36. // 更新v-model的值
  37. // #ifdef VUE3
  38. this.$emit("update:modelValue", value);
  39. // #endif
  40. // #ifdef VUE2
  41. this.$emit("input", value);
  42. // #endif
  43. // 触发事件
  44. this.$emit('changing', value)
  45. },
  46. // 滑动结束时触发
  47. changeHandler(e) {
  48. const {
  49. value
  50. } = e.detail
  51. // 更新v-model的值
  52. // #ifdef VUE3
  53. this.$emit("update:modelValue", value);
  54. // #endif
  55. // #ifdef VUE2
  56. this.$emit("input", value);
  57. // #endif
  58. // 触发事件
  59. this.$emit('change', value)
  60. }
  61. },
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. @import "../../libs/css/components.scss";
  66. </style>