You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-slider.vue 6.5 KiB

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