vue点击拖动进度条

需要实现拖拽和点击进度条的功能，但是很多插件都只实现拖拽事件，基于以上两个原因，自己封装了一个可以响应input和change事件（即一个是拖动进度条到某处，一个是在进度条某位置点击使其值变为该位置）的div实现的Vue组件。
目前该组件只实现了拖拽功能，点击事件后续慢慢更新出来
父组件

<Progress :min=0 :max=100 v-model="data.per"></Progress>
data() {return {data: {per: 0}}}

进度条组件

css

mixin文件是前辈封装好的方法，此为实例：
.mixin-size(@width, @height, @boxSizing: border-box) {box-sizing: @boxSizing;width: @width;height: @height;
}
.mixin-abs-item(@left: auto, @top: auto, @right: auto, @bottom: auto) {position: absolute;left: @left;top: @top;right: @right;bottom: @bottom;
}
使用：
.slider{position:relative;.mixin-size(260px, 2px);margin:20px 0;background:#D8D8D8;cursor:pointer;.process{.mixin-abs-item(0, 0);}.thunk{.mixin-abs-item(0, -5px);.mixin-size(12px,12px);}.block{position: absolute;z-index: 2;.mixin-size(12px,12px);background:#2C69F9;border:3px solid #D8E3FF;border-radius:50%;transition:.2s all}.space { &-1 {.mixin-step(0);    }&-2 {.mixin-step(52px);}&-3 {.mixin-step(104px);}&-4 {.mixin-step(156px);}&-5 {.mixin-step(208px);}&-6 {.mixin-step(260px);}}}

html

<template><div class="slider" ref="slider"><div class="process" :style="{width}"></div><div class="thunk" ref="trunk" :style="{left}"><div class="block"></div></div>//可以点击小球 进度条变化<div class="space" @click="clickhandler($event)"><div class="space-1"></div><div class="space-2"></div><div class="space-3"></div><div class="space-4"></div><div class="space-5"></div><div class="space-6"></div></div></div>
</template>

js

/** min 进度条最小值* max 进度条最大值* v-model 对当前值进行双向绑定实时显示拖拽进度
* */
export default {props: ['min', 'max', 'value'],data() {return {module_space: 1,//滚动条DOM元素slider: null,//拖拽DOM元素        thunk: null,//当前值per: this.value}},//渲染到页面的时候mounted() {this.mousedownhandler()},methods: {...mapActions(['setExtra']),// 点击事件clickhandler(e) {let  spaceWitch = e.clientX - this.$refs.trunk.offsetWidthvar scales = spaceWitch / this.$refs.slider.offsetWidth - 0.35this.per = Math.ceil((this.max - this.min) * scales + this.min)this.updateDataStore()},// 存储数据updateDataStore() {this.per = Math.max(this.per, this.min)this.per = Math.min(this.per, this.max)if (this.per === 0) {//设置间距 可根据实际需求 调整this.module_space = 0.5} else {this.module_space = this.per * 1.5}let data = {   module_space: this.module_space}this.setExtra({...this.Extra,...data    })},mousedownhandler() {this.slider = this.$refs.sliderthis.thunk = this.$refs.trunkvar _this = thisthis.thunk.onmousedown = function(e) {var width = parseInt(_this.width, 10)var disX = e.clientXdocument.onmousemove = function(ev) {// value, left, width// 当value变化的时候，会通过计算属性修改left，width// 拖拽的时候获取的新widthvar newWidth = ev.clientX - disX + widthvar scale = newWidth / _this.slider.offsetWidth_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min)_this.updateData2Store()}document.onmouseup = function() {document.onmousemove = document.onmouseup = null}return false}}},computed: {...mapGetters({Extra: 'getExtra'}),// 设置一个百分比，提供计算slider进度宽度和trunk的left值// 对应公式为  当前值-最小值/最大值-最小值 = slider进度width / slider总width// trunk left =  slider进度width + trunk宽度/2scale() {return (this.per - this.min) / (this.max - this.min)},width() {if (this.slider) {return this.slider.offsetWidth * this.scale + 'px'} else {return 0 + 'px'}},left() {if (this.slider) {return this.slider.offsetWidth * this.scale -  this.thunk.offsetWidth / 2  + 'px'} else {return 0 + 'px'}}}}

在做的过程中会遇到很多问题现总结如下：

1 ‘document.body.addEventLitener is not a function’

当时看到的时候，很粗心，第一个想法是百度查资料，可查到的都是：当监听某个节点事件的时候，可能是因为选择器没有正确选择元素对象
document.getElementsByClassName(…)捕捉到的是该类名元素的数组
正确的访问方式应该是：
document.getElementsByClassName(…)[0].addEventListener…
没有第一时间检查单词拼写错误 ，后来才发现问题所在

2 mousedownhandler事件没有执行

点击拖动的时候，事件没有执行，后来才发现在@mousedown="mousedownhandler(event)中绑定方法不对，vue中mousedown事件要加event) 中绑定方法不对，vue中mousedown事件要加event)中绑定方法不对，vue中mousedown事件要加$符号，而不是mousedownhandler（e）

在vue中最好不要直接操作dom元素

参考链接

vue开发拖拽进度条滑动组件