<style>
main{
padding: 10px;
display: inline-block;
border: 1px solid black;
}
.line{
box-sizing: border-box;
background-color: #1B6D85;
position: relative;
border-radius: 2px;
}
.point{
box-sizing: border-box;
background-color: #1B6D85;
border-radius: 50%;
position: absolute;
}
</style>
<body>
<div id="app">
<input type="text" v-model.number.lazy="number">
<br>
<br>
<v-slider v-model="number"></v-slider>
</div>
</body>
<script id="v-slider" type="text/html">
<main>
<!--@click = "mousedown" 点击的时候调用自定义mousedown方法-->
<section @mousedown="md" class="line" :style="lineStyle">
<div class="point" :style="pointStyle"></div>
</section>
</main>
</script>
<script>
Vue.component("v-slider",{
template:"#v-slider",
props:{
length:{
default:400
},
height:{
default:5
},
size:{
default:10
},
value:{}
},
computed:{
lineStyle:function () {
return{
width:this.length + "px",
height:this.height + "px"
}
},
pointStyle:function () {
return{
width:this.size + "px",
height:this.size + "px",
top:-this.size / 4 + "px",
left:(this.length - 10) / 100 * this.value + "px"
}
}
},
methods:{
md:function () {
var _this = this
var mv = function (e) {
// 坐标的更新
_this.pointUpdate(e)
}
document.addEventListener("mousemove",mv)
// 当监听到鼠标松开的时候，移除mousemove事件
document.addEventListener("mouseup",function () {
document.removeEventListener("mousemove",mv)
})
},
pointUpdate:function (e) {
// 兼容火狐和谷歌
e=event || window.event
var pointX = e.pageX
if(pointX < 0){
pointX = 0
}
if(pointX > this.length){
pointX = this.length
}
var rate = pointX / this.length * 100
if(rate > 100){
rate = 100
}
this.$emit("input",rate)
console.log(pointX)
}
}
})
var vue = new Vue({
el:"#app",
data:{
number:0
}
})
在输入框输入1-100的数，下面的滑块会自动到相应的位置，拖动滑块，输入框内的值也会改变
