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">