时间有限，直接坐代码
//slider.vuetemplatedivdivclass=' rect ' ref=' rect ' div 3360 class=' [ ' slide '，isRight？' side-right ' : ' ' ] ' ref=' slide ' a-iconv-show='！ is right ' type=' right '/a-iconv-show=' is right ' type=' check '/divspanv-show='！ 向右滑动isRight '完成验证/span span v-show='isRight '验证成功！/span/div/div/templatescriptexportdefault { data (} { return { is right 3360 false } )；mounted () ) { this.sliderReset； //窗口大小调整事件window.onresize=this.slider reset； }，methods: { //滑块事件定义sliderReset () { let oSlide=this.$refs.slide； let oRect=this.$refs.rect； let left=0； letslidewidth=oslide.offsetwidth； let rectWidth=oRect.offsetWidth； oslide.onmousedown=e={ let initx=e.clientx； //解决按下鼠标时x值document.onmousemove=e={ //挡板问题orect.style.border left='1px solid # ddddd '； let moveX=e.clientX； left=moveX - initX； if(left0) { left=0； (if )左收窄滑动窗口- 52 ) {左收窄滑动窗口； }left=math.max(left，0 )； left=math.min(left，rectWidth - slideWidth )； oSlide.style.left=left 'px '； if (left=rectwidth-slidewidth-52 ) { this.isRight=true； this.$Emit(gocheck )； oSlide.onmousedown=null； }； (； document.onmouseup=function () { document.onmousemove=null； //清除移动事件if (左rectwidth-slidewidth ) { oSlide.style.left=0； oRect.style.borderLeft='0 none '； }； }； }；/scriptstylelang=' less ' scoped * { margin : padding: 0； (Li )列表样式： none； }.rect { position: relative； width: 100%； 高： 40px； line-height: 40px； 文本对齐3360中心； 用户- select : none； border: 1px solid #dddddd； border-left : 0无； }.slide { position: absolute； top: -1px； left: 0px； width: 45px； 高： 40px； 盒尺寸： border-box； /*css3怪盒机型，不云计算边框为tz滴滴涕/后台颜色：微信； border: 1px solid #dddddd； cursor: pointer； transition: all 0.2s； }.slide-right { background : @ primary-color； color: #fff； (}/style