123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- export default {
- watch: {
- value(n) {
-
- if (this.status === 'end') {
- this.updateSliderPlacement(n, true)
- }
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getSliderRect()
- },
-
- getSliderRect() {
-
- setTimeout(() => {
- this.$uGetRect('.u-slider').then((rect) => {
- this.sliderRect = rect
- this.updateSliderPlacement(this.value, true)
- })
- }, 10)
- },
-
- canNotDo() {
- return this.disabled
- },
-
- getTouchX(e) {
- return e.touches[0].clientX
- },
- formatStep(value) {
-
- return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
- },
-
- emitEvent(event, value) {
- this.$emit(event, value || this.value)
- },
-
- setTouchStatus(status) {
- this.status = status
- },
- onTouchStart(e) {
- if (this.canNotDo()) {
- return
- }
-
- this.emitEvent('start')
- this.setTouchStatus('start')
- },
- onTouchMove(e) {
- if (this.canNotDo()) {
- return
- }
-
- const x = this.getTouchX(e)
- const { left, width } = this.sliderRect
- const distanceX = x - left
-
-
- const percent = (distanceX / width) * 100
- this.setTouchStatus('moving')
- this.updateSliderPlacement(percent, true, 'moving')
- },
- onTouchEnd() {
- if (this.canNotDo()) {
- return
- }
- this.emitEvent('end')
- this.setTouchStatus('end')
- },
-
- updateSliderPlacement(value, drag, event) {
-
- const { width } = this.sliderRect
- const percent = this.formatStep(value)
-
- const barStyle = {
- width: `${percent / 100 * width}px`
- }
- // 移动期间无需过渡动画
- if (drag === true) {
- barStyle.transition = 'none'
- } else {
- // 非移动期间,删掉对过渡为空的声明,让css中的声明起效
- delete barStyle.transition
- }
- // 修改value值
- this.$emit('input', percent)
- // 事件的名称
- if (event) {
- this.emitEvent(event, percent)
- }
- this.barStyle = barStyle
- },
- onClick(e) {
- if (this.canNotDo()) {
- return
- }
- // 直接点击滑块的情况,计算方式与onTouchMove方法相同
- const { left, width } = this.sliderRect
- const value = ((e.detail.x - left) / width) * 100
- this.updateSliderPlacement(value, false, 'click')
- }
- }
- }
|