Vue怎么实现双向滑动输入条(vue,开发技术)

时间:2024-03-29 06:44:51 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

效果图如下:

组件支持传入最小值(min)最大值(max)的范围,并可设置初始最小值(initialMin)和初始最大值(initialMax)

拖动滑块调整最大最小值,并可点击输入条位置,切换数值

Vue怎么实现双向滑动输入条

①创建滑动输入条组件Slider.vue

<template><divclass="m-slider"ref="slider"><divclass="u-slider-rail"@click="onClickPoint"></div><divclass="u-slider-track"@click="onClickPoint":></div><divclass="u-slider-handle"ref="left"@mousedown="onLeftMouseDown":></div><divclass="u-slider-handle"ref="right"@mousedown="onRightMouseDown":></div></div></template><script>exportdefault{name:'Slider',props:{min:{//滑动输入条最小值type:Number,default:0},max:{//滑动输入条最大值type:Number,default:100},initialMin:{//滑动输入条初始最小值,默认在最左侧type:Number,default:0},initialMax:{//滑动输入条初始最大值,默认在最右侧type:Number,default:100}},data(){return{left:'',//左滑块距离滑动条左端的距离right:'',//右滑动距离滑动条左端的距离width:''//滑动输入条在页面中的宽度}},mounted(){this.width=this.$refs.slider.clientWidththis.left=this.initialMin*this.width/this.maxthis.right=this.initialMax*this.width/this.max},computed:{low(){returnMath.round(this.left/this.width*this.max)},high(){returnMath.round(this.right/this.width*this.max)}},watch:{low(to,from){this.$emit('lowChange',to)//左滑块对应数字回调},high(to,from){this.$emit('highChange',to)//右滑块对应数字回调}},methods:{onClickPoint(e){//点击滑动条,移动滑块varoffsetLeft=this.$refs.slider.offsetLeft//滑动条左端距离屏幕左侧的距离varmoveX=e.clientX-offsetLeftif(moveX<=this.left){this.left=moveX}elseif(this.moveX>=this.right){this.right=this.moveX}else{if((moveX-this.left)<(this.right-moveX)){this.left=moveX}else{this.right=moveX}}},onLeftMouseDown(e){//在滚动条上拖动左滑块//滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX-this.$refs.left.offsetLeftvaroffsetLeft=this.$refs.slider.offsetLeft//滑动条左端距离屏幕左侧的距离document.onmousemove=(e)=>{varmoveX=e.clientX-offsetLeftif(moveX<0){this.left=0}elseif(moveX>=this.right){this.left=this.right}else{this.left=moveX}}document.onmouseup=(e)=>{document.onmousemove=nulldocument.onmouseup=null}},onRightMouseDown(e){//在滚动条上拖动右滑块///滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX-this.$refs.left.offsetLeftvaroffsetLeft=this.$refs.slider.offsetLeft//滑动条左端距离屏幕左侧的距离console.log('offsetLeft:',offsetLeft)document.onmousemove=(e)=>{varmoveX=e.clientX-offsetLeftif(moveX>this.width){this.right=this.width}elseif(moveX<=this.left){this.right=this.left}else{this.right=moveX}}document.onmouseup=(e)=>{document.onmousemove=nulldocument.onmouseup=null}}}}</script><stylelang="less"scoped>.m-slider{height:4px;position:relative;cursor:pointer;touch-action:none;&:hover{.u-slider-rail{//灰色未选择滑动条背景色background:#E3E3E3;}.u-slider-track{//蓝色已选择滑动条背景色background:#1890ff;}}.u-slider-rail{//灰色未选择滑动条背景色position:absolute;z-index:99;height:4px;width:100%;background:#f5f5f5;border-radius:2px;transition:background.3s;}.u-slider-track{//蓝色已选择滑动条背景色background:#91d5ff;border-radius:4px;position:absolute;z-index:99;height:4px;cursor:pointer;transition:background.3s;}.u-slider-handle{//滑块position:absolute;z-index:999;width:14px;height:14px;margin-top:-7px;box-shadow:0;background:#fff;border:2pxsolid#91d5ff;border-radius:50%;cursor:pointer;transition:border-color.3s,box-shadow.6s,transform.3scubic-bezier(.18,.89,.32,1.28);&:hover{border-color:#1890ff;}}}</style>

②在要使用的页面引入

<divclass="m-num"><pclass="u-num">{{low}}</p><pclass="u-num">{{high}}</p></div><divclass="slider"><Slider:min="0":max="100":initialMin="low":initialMax="high"@lowChange="lowChange"@highChange="highChange"/></div>importSliderfrom'@/components/Slider'components:{Slider}data(){return{low:20,high:80}}lowChange(val){this.low=valconsole.log('lowChange:',val)},highChange(val){this.high=valconsole.log('highChange:',val)}
 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:Vue怎么实现双向滑动输入条的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Qt如何使用windeployqt工具实现程序打包发布下一篇:

2 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18