slider.nvue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <view class="u-page__slide-item">
  6. <u-slider
  7. v-model="value1"
  8. ></u-slider>
  9. </view>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">自定义范围(0—50)</text>
  13. <view class="u-page__slide-item">
  14. <u-slider
  15. v-model="value2"
  16. showValue
  17. min="0"
  18. max="50"
  19. ></u-slider>
  20. </view>
  21. </view>
  22. <view class="u-demo-block">
  23. <text class="u-demo-block__title">指定步长(每次步进5)</text>
  24. <view class="u-page__slide-item">
  25. <u-slider
  26. v-model="value4"
  27. :step="5"
  28. ></u-slider>
  29. </view>
  30. </view>
  31. <view class="u-demo-block">
  32. <text class="u-demo-block__title">自定义样式</text>
  33. <view class="u-page__slide-item">
  34. <u-slider
  35. v-model="value5"
  36. activeColor="#deab8a"
  37. blockColor="#f47920"
  38. ></u-slider>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. value1: 30,
  48. value2: 30,
  49. value3: 30,
  50. value4: 30,
  51. value5: 30
  52. }
  53. },
  54. watch: {
  55. value1(n) {
  56. // console.log(n);
  57. }
  58. },
  59. methods: {
  60. moving(value) {
  61. // console.log('moving', value)
  62. },
  63. click(value) {
  64. // console.log('click', value)
  65. },
  66. end(value) {
  67. // console.log('end', value)
  68. },
  69. start(value) {
  70. // console.log('start', value)
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. .u-page {
  77. }
  78. </style>