mint-ui range 源码(?)分析

mint-ui  range 分析

前段时间学习了 mint-ui， 一看，感觉这个 ui 真的是 前端的福音，但是继续学习感觉怪怪的，有一部分出现了问题，

网站上大部分有解答，但是 range 我发现我真心是 找不到答案，就是  拖不动那个滑块，百度也没有资源

当时 是弄了个 input type=range ，正好参数一致，对好位置后放在 那个 range 上面隐形，能正常使用

<input type="range" class="range" v-model.number="rangeValue" max="90" min="10" step="10">

                                             注意这里要使用 .number ，要不然返回的是 字符型的 数据

后来想想不能这样糊弄自己，只好自己去看代码(目前只是小白，写这个单纯交流，勿喷)

html

<template>
  <div class="content" ref="content">
  <!-- <div class="thumb" ref="thumb"></div> -->
    <div class="progress" ref="thumb" :style="{width: progress + '%'}"></div>
    <div class="thumb" ref="thumb" :style="{left: progress + '%'}"></div>
  </div>
</template>

 

 

<script>

data()

data () {

return {

progress: 0, // 当前的 进度(相对于 整个 range 的 百分比)

max: 100,

min: 0,

step: 1,

dragState: {}, // 拖动的 状态

newProgress: null, // 新的 在 range 里的 占比

isDragging: false, // 是否正在拖动

supportTouch: true // 是否支持 touch 事件(源码里是判断来着，但我还是写死好了)

}

},

 

 

mounted()

 

 //  这里主要就是 给 元素绑定 各种 拖动的事件    

//  我发现 在源码中 主要是没有在这里写 各种绑定事件导致的不能拖动

mounted () {

let element = this.$refs.content // 获取 range 组件的 根节点

element.addEventListener(this.supportTouch ? 'touchstart' : 'mousedown', (event) => {

if (this.isDragging) return

event.preventDefault()

// 就是 防止 在拖动的时候 顺便把 东西给 左键 选中

document.onselectstart = function () {return false}

// 就是 防止 在拖动滑块的时候 顺便把 东西给 拖放了

document.ondragstart = function () {return false}

if (!this.supportTouch) { // 这里 this.supportTouch 我顺便被 默认 true 了

document.addEventListener('mousemove', this.moveFn)

document.addEventListener('mouseup', this.endFn)

}

this.isDragging = true

if (this.start) {

this.start(this.supportTouch ? event.changedTouches[0] || event.touches[0] : event)

}

})

if (this.supportTouch) {

element.addEventListener('touchmove', this.moveFn);

element.addEventListener('touchend', this.endFn);

element.addEventListener('touchcancel', this.endFn);

}

}，

 

 

methods: {

// 获取 滑块的 信息

getThumbPosition () {

// 那个小滑块

let thumb = this.$refs.thumb

// 整个 range 的 容器 (不包括 文字)

let content = this.$refs.content

let contentBox = content.getBoundingClientRect()

let thumbBox = thumb.getBoundingClientRect()

return {

left: thumbBox.left - contentBox.left,

top: thumbBox.top - contentBox.top,

thumbBoxLeft: thumbBox.left

}

},

/**********************************************************************

说实话，我这是第一次看到这个函数 getBoundingClientRect()，当时找半天，找不到这个函数的 定义在哪里

查了 资料才知道原来是一个 原生 的函数，特意在控制台输出了一下

返回值：

 

一个一个属性过，说一下

left 和 top 就是理解的那个 left  top

但是 bottom  =  top + height

     right    =  left + width

这个真的是，孤陋寡闻，如闻天音

**********************************************************************/

 

// 刚点击的 滑块 和 点击点 的位置信息

start (event) {

console.log('start')

if (this.disabled) return

let position = this.getThumbPosition()

// 看点击的 位置 和 原先 滑块的 位置有 多少距离

let thumbClickDetalX = event.clientX - position.thumbBoxLeft

// 点击之后 滑块 的 位置 属性

this.dragState = {

thumbStartLeft: position.left,

thumbStartTop: position.top,

thumbClickDetalX: thumbClickDetalX

}

},

drag (event) {

if (this.disabled) return

let dragState = this.dragState

let content = this.$refs.content

let contentBox = content.getBoundingClientRect()

// 点击之后 拖动的 距离(搞得这么麻烦我也是醉了)

let deltax = event.pageX - contentBox.left - dragState.thumbStartLeft - dragState.thumbClickDetalX

let stepCount = Math.ceil((this.max - this.min) / this.step)

// 这里有点奇妙，我卡在这里有一会了。

// 原始的距离 + 拖动的 距离 理论上就是 当前 距离的数值，

// 但是若设置了 步长， 这里 假设 stepCount = 1, 那 % 之后 一直为 0

// 那 当前的 距离就是 原始的 距离 + 拖动 的 距离

// 若 步长 不为 1 假设 为 10

// 若 拖动的 距离 小于 10 那 % 出来的 数字 即为 拖动的 那一段距离,正好被减掉，滑块为 不拖动,

// 若拖动距离 为 10 那 % 之后的 数字为 0， 那就 会 跳了 一格

let newPosition = (dragState.thumbStartLeft + deltax) -

(dragState.thumbStartLeft + deltax) % (contentBox.width / stepCount)

 

console.log(newPosition)

let newProgress = newPosition / contentBox.width

console.log(newProgress)

if (newProgress < 0) {

newProgress = 0

} else if (newProgress > 1) {

newProgress = 1

}

// console.log(newProgress)

this.progress = newProgress * 100

 

this.$emit('input', Math.round(this.min + newProgress * (this.max - this.min)))

},

end () {

if (this.disabled) return

this.$emit('change', this.value)

this.dragState = {}

},

moveFn (event) {

// console.log(event.touches)

if (this.drag) {

this.drag(this.supportTouch ? event.touches[0] : event)

}

},

endFn (event) {

if (!this.supportTouch) {

document.removeEventListener('mousemove', this.moveFn)

document.removeEventListener('mouseup', this.endFn)

}

document.onselectstart = null

document.ondragstart = null

 

this.isDragging = false

 

if (this.end) {

this.end(this.supportTouch ? event.touches[0] : event)

}

}

}

 

style  只写了很简单的一点

 

<style lang="stylus">

.content

  width 100%

  height 10px

  background-color pink

  div

    position absolute

    &.thumb

      width 20px

      height 20px

      background-color white

      border-radius 50%

      &.progress

         background-color blue

         height 10px

</style>