u-slider.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
  3. backgroundColor: inactiveColor
  4. }">
  5. <view
  6. class="u-slider__gap"
  7. :style="[
  8. barStyle,
  9. {
  10. height: height + 'rpx',
  11. backgroundColor: activeColor
  12. }
  13. ]"
  14. >
  15. <view class="u-slider__button-wrap" @touchstart="onTouchStart"
  16. @touchmove="onTouchMove" @touchend="onTouchEnd"
  17. @touchcancel="onTouchEnd">
  18. <slot v-if="$slots.default || $slots.$default"/>
  19. <view v-else class="u-slider__button" :style="[blockStyle, {
  20. height: blockWidth + 'rpx',
  21. width: blockWidth + 'rpx',
  22. backgroundColor: blockColor
  23. }]"></view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. /**
  30. * slider 滑块选择器
  31. * @tutorial https://uviewui.com/components/slider.html
  32. * @property {Number | String} value 滑块默认值(默认0)
  33. * @property {Number | String} min 最小值(默认0)
  34. * @property {Number | String} max 最大值(默认100)
  35. * @property {Number | String} step 步长(默认1)
  36. * @property {Number | String} blockWidth 滑块宽度,高等于宽(30)
  37. * @property {Number | String} height 滑块条高度,单位rpx(默认6)
  38. * @property {String} inactiveColor 底部条背景颜色(默认#c0c4cc)
  39. * @property {String} activeColor 底部选择部分的背景颜色(默认#2979ff)
  40. * @property {String} blockColor 滑块颜色(默认#ffffff)
  41. * @property {Object} blockStyle 给滑块自定义样式,对象形式
  42. * @property {Boolean} disabled 是否禁用滑块(默认为false)
  43. * @event {Function} start 滑动触发
  44. * @event {Function} moving 正在滑动中
  45. * @event {Function} end 滑动结束
  46. * @example <u-slider v-model="value" />
  47. */
  48. export default {
  49. name: 'u-slider',
  50. props: {
  51. // 当前进度百分比值,范围0-100
  52. value: {
  53. type: [Number, String],
  54. default: 0
  55. },
  56. // 是否禁用滑块
  57. disabled: {
  58. type: Boolean,
  59. default: false
  60. },
  61. // 滑块宽度,高等于宽,单位rpx
  62. blockWidth: {
  63. type: [Number, String],
  64. default: 30
  65. },
  66. // 最小值
  67. min: {
  68. type: [Number, String],
  69. default: 0
  70. },
  71. // 最大值
  72. max: {
  73. type: [Number, String],
  74. default: 100
  75. },
  76. // 步进值
  77. step: {
  78. type: [Number, String],
  79. default: 1
  80. },
  81. // 滑块条高度,单位rpx
  82. height: {
  83. type: [Number, String],
  84. default: 6
  85. },
  86. // 进度条的激活部分颜色
  87. activeColor: {
  88. type: String,
  89. default: '#2979ff'
  90. },
  91. // 进度条的背景颜色
  92. inactiveColor: {
  93. type: String,
  94. default: '#c0c4cc'
  95. },
  96. // 滑块的背景颜色
  97. blockColor: {
  98. type: String,
  99. default: '#ffffff'
  100. },
  101. // 用户对滑块的自定义颜色
  102. blockStyle: {
  103. type: Object,
  104. default() {
  105. return {};
  106. }
  107. },
  108. },
  109. data() {
  110. return {
  111. startX: 0,
  112. status: 'end',
  113. newValue: 0,
  114. distanceX: 0,
  115. startValue: 0,
  116. barStyle: {},
  117. sliderRect: {
  118. left: 0,
  119. width: 0
  120. }
  121. };
  122. },
  123. watch: {
  124. value(n) {
  125. // 只有在非滑动状态时,才可以通过value更新滑块值,这里监听,是为了让用户触发
  126. if(this.status == 'end') this.updateValue(this.value, false);
  127. }
  128. },
  129. created() {
  130. this.updateValue(this.value, false);
  131. },
  132. mounted() {
  133. // 获取滑块条的尺寸信息
  134. this.$uGetRect('.u-slider').then(rect => {
  135. this.sliderRect = rect;
  136. });
  137. },
  138. methods: {
  139. onTouchStart(event) {
  140. if (this.disabled) return;
  141. this.startX = 0;
  142. // 触摸点集
  143. let touches = event.touches[0];
  144. // 触摸点到屏幕左边的距离
  145. this.startX = touches.clientX;
  146. // 此处的this.value虽为props值,但是通过$emit('input')进行了修改
  147. this.startValue = this.format(this.value);
  148. // 标示当前的状态为开始触摸滑动
  149. this.status = 'start';
  150. },
  151. onTouchMove(event) {
  152. if (this.disabled) return;
  153. // 连续触摸的过程会一直触发本方法,但只有手指触发且移动了才被认为是拖动了,才发出事件
  154. // 触摸后第一次移动已经将status设置为moving状态,故触摸第二次移动不会触发本事件
  155. if (this.status == 'start') this.$emit('start');
  156. let touches = event.touches[0];
  157. // 滑块的左边不一定跟屏幕左边接壤,所以需要减去最外层父元素的左边值
  158. this.distanceX = touches.clientX - this.sliderRect.left;
  159. // 获得移动距离对整个滑块的百分比值,此为带有多位小数的值,不能用此更新视图
  160. // 否则造成通信阻塞,需要每改变一个step值时修改一次视图
  161. this.newValue = (this.distanceX / this.sliderRect.width) * 100;
  162. this.status = 'moving';
  163. // 发出moving事件
  164. this.$emit('moving');
  165. this.updateValue(this.newValue, true);
  166. },
  167. onTouchEnd() {
  168. if (this.disabled) return;
  169. if (this.status === 'moving') {
  170. this.updateValue(this.newValue, false);
  171. this.$emit('end');
  172. }
  173. this.status = 'end';
  174. },
  175. updateValue(value, drag) {
  176. // 去掉小数部分,同时也是对step步进的处理
  177. const width = this.format(value);
  178. // 不允许滑动的值超过max最大值,百分比也不能超过100
  179. if(width > this.max || width > 100) return;
  180. // 设置移动的百分比值
  181. let barStyle = {
  182. width: width + '%'
  183. };
  184. // 移动期间无需过渡动画
  185. if (drag == true) {
  186. barStyle.transition = 'none';
  187. } else {
  188. // 非移动期间,删掉对过渡为空的声明,让css中的声明起效
  189. delete barStyle.transition;
  190. }
  191. // 修改value值
  192. this.$emit('input', width);
  193. this.barStyle = barStyle;
  194. },
  195. format(value) {
  196. // 将小数变成整数,为了减少对视图的更新,造成视图层与逻辑层的阻塞
  197. return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
  198. },
  199. onClick(event) {
  200. if (this.disabled) return;
  201. // 直接点击滑块的情况,计算方式与onTouchMove方法相同
  202. const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
  203. this.updateValue(value, false);
  204. }
  205. }
  206. };
  207. </script>
  208. <style lang="scss" scoped>
  209. @import "../../libs/css/style.components.scss";
  210. .u-slider {
  211. position: relative;
  212. border-radius: 999px;
  213. border-radius: 999px;
  214. background-color: #ebedf0;
  215. }
  216. .u-slider:before {
  217. position: absolute;
  218. right: 0;
  219. left: 0;
  220. content: '';
  221. top: -8px;
  222. bottom: -8px;
  223. z-index: -1;
  224. }
  225. .u-slider__gap {
  226. position: relative;
  227. border-radius: inherit;
  228. transition: width 0.2s;
  229. transition: width 0.2s;
  230. background-color: #1989fa;
  231. }
  232. .u-slider__button {
  233. width: 24px;
  234. height: 24px;
  235. border-radius: 50%;
  236. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  237. background-color: #fff;
  238. cursor: pointer;
  239. }
  240. .u-slider__button-wrap {
  241. position: absolute;
  242. top: 50%;
  243. right: 0;
  244. transform: translate3d(50%, -50%, 0);
  245. }
  246. .u-slider--disabled {
  247. opacity: 0.5;
  248. }
  249. </style>