vue 拖拽进度条滑动组件 横向竖向滑动插件

dom.js

//是否有指定class存在
export functionhasClass(el, className){
    let reg=newRegExp('(^|\\s)'+ className+'(\\s|$)')return reg.test(el.className)}//如果存在什么都不做，否则就设置添加
  export functionaddClass(el, className){if(hasClass(el, className)){return}
  
    let newClass= el.className.split(' ')
    newClass.push(className)
    el.className= newClass.join(' ')}
  
  export functiongetData(el, name, val){const prefix='data-'if(val){return el.setAttribute(prefix+ name, val)}return el.getAttribute(prefix+ name)}
  
  let elementStyle= document.createElement('div').style
  
  let vendor=(()=>{
    let transformNames={
      webkit: 'webkitTransform',Moz: 'MozTransform',O: 'OTransform',
      ms: 'msTransform',
      standard: 'transform'//以上前缀都不满足，就用这个}for(let key in transformNames){if(elementStyle[transformNames[key]]!== undefined){return key}}returnfalse})()
  
  export functionprefixStyle(style){if(vendor===false){returnfalse}if(vendor=== 'standard'){return style}return vendor+ style.charAt(0).toUpperCase()+ style.substr(1)}

竖向拖拽滑动进度条插件

<template><divclass="hello"><divclass="progress-bar" ref="progressBar"@click="progressClick"><divclass="bar-inner"><!-- 背景--><divclass="progress" ref="progress"></div><!-- 小圆点--><divclass="progress-btn-wrapper"
          ref="progressBtn"@touchstart.prevent="progressTouchStart"@touchmove.prevent="progressTouchMove"@touchend="progressTouchEnd"><divclass="progress-btn"></div></div></div></div></div></template><script>import{ prefixStyle} from"./dom";const progressBtnWidth=16;const transform=prefixStyle("transform");
exportdefault{
  name:"HelloWorld",data(){return{
      msg:""};},created(){this.touch={};//创建一个touch对象},
  methods:{progressTouchStart(e){//创建一个标志，意思它已经初始化完this.touch.initiated=true;//记录滚动条的位置if(this.touch.bottom>0){this.touch.startY= e.touches[0].pageY+this.touch.bottom;}else{this.touch.startY= e.touches[0].pageY;}},progressTouchMove(e){//如果初始化完则什么都不做if(!this.touch.initiated){return;}const deltaY=this.touch.startY- e.touches[0].pageY;//计算差值//max 的0  意思不能小于0 、、、、min，不能超过整个滚动条的宽度const offsetWidth=Math.min(this.$refs.progressBar.clientHeight,Math.max(0, deltaY));//保存当前滚动条的位置this.touch.bottom= offsetWidth;this._offset(offsetWidth);},progressTouchEnd(){this.touch.initiated=false;//滚动完后要给父组件派发一个事件this._triggerPercent();},//点击改变歌曲播放进度progressClick(e){const rect=this.$refs.progressBar.getBoundingClientRect();//是一个获取距离的方法const offsetWidth=Math.min(
        rect.height,Math.max(0, rect.bottom- e.pageY));this._offset(offsetWidth);// 这里当我们点击 progressBtn 的时候，e.offsetX 获取不对// this._offset(e.offsetX)this._triggerPercent();},_triggerPercent(){const barHeight=this.$refs.progressBar.clientHeight- progressBtnWidth;const percent=this.$refs.progress.clientHeight/ barHeight;this.$emit("percentChange", percent);},//偏移方法_offset(offsetWidth){this.$refs.progress.style.height= `${offsetWidth}px`;//获取进度条的位置，距离左右的距离this.$refs.progressBtn.style[
        transform]= `translate3d(0,${-offsetWidth}px,0)`;//小球的偏移}},
  watch:{//它是不断改变的 监听父组件传入的值percent(newPercent){//大于0 而且不是在拖动的状态下，拖动的时候不要改变if(newPercent>=0&&!this.touch.initiated){const barWidth=this.$refs.progressBar.clientHeight- progressBtnWidth;//进度条的总度 内容-按钮的宽度const offsetWidth= newPercent* barWidth;//应该偏移的宽度this._offset(offsetWidth);}}}};</script><!--Add"scoped" attributetolimit CSStothis component only--><style scoped>.progress-bar{
  width:10px;
  height:200px;
  margin:0 auto;}.bar-inner{
  position: relative;/* bottom: 13px; */
  width:10px;
  height:200px;
  background: green;}.progress{
  position: absolute;
  width:100%;
  bottom:0;
  background: #ffcd32;}.progress-btn-wrapper{
  position: absolute;/* left: -8px;
  top: -13px; */
  left:-10px;
  bottom:-13px;
  width:30px;
  height:30px;}.progress-btn{
  position: relative;
  top:7px;
  left:7px;
  box-sizing: border-box;
  width:16px;
  height:16px;
  border:3px solid #333;
  border-radius:50%;
  background: #ffcd32;}</style>

横向拖拽滑动进度条插件

<template><divclass="progress-bar" ref="progressBar"@click="progressClick"><divclass="bar-inner"><!-- 背景--><divclass="progress" ref="progress"></div><!-- 小圆点--><divclass="progress-btn-wrapper" ref="progressBtn"@touchstart.prevent="progressTouchStart"@touchmove.prevent="progressTouchMove"@touchend="progressTouchEnd"><divclass="progress-btn"></div></div></div></div></template><script type="text/ecmascript-6">import{prefixStyle} from 'common/js/dom'const progressBtnWidth=16const transform=prefixStyle('transform')

  exportdefault{
    props:{
      percent:{
        type:Number,default:0}},created(){this.touch={}//创建一个touch对象},
    methods:{progressTouchStart(e){//创建一个标志，意思它已经初始化完this.touch.initiated=true//手指的位置this.touch.startX= e.touches[0].pageX//当前滚动，滚动条的位置this.touch.left=this.$refs.progress.clientWidth},progressTouchMove(e){//如果初始化完则什么都不做if(!this.touch.initiated){return}const deltaX= e.touches[0].pageX-this.touch.startX//计算差值//max 的0  意思不能小于0 、、、、min，不能超过整个滚动条的宽度const offsetWidth=Math.min(this.$refs.progressBar.clientWidth- progressBtnWidth,Math.max(0,this.touch.left+ deltaX))this._offset(offsetWidth)},progressTouchEnd(){this.touch.initiated=false//滚动完后要给父组件派发一个事件this._triggerPercent()},//点击改变歌曲播放进度progressClick(e){const rect=this.$refs.progressBar.getBoundingClientRect()//是一个获取距离的方法const offsetWidth= e.pageX- rect.leftthis._offset(offsetWidth)// 这里当我们点击 progressBtn 的时候，e.offsetX 获取不对// this._offset(e.offsetX)this._triggerPercent()},_triggerPercent(){const barWidth=this.$refs.progressBar.clientWidth- progressBtnWidthconst percent=this.$refs.progress.clientWidth/ barWidththis.$emit('percentChange', percent)},//偏移方法_offset(offsetWidth){this.$refs.progress.style.width= `${offsetWidth}px`//获取进度条的位置，距离左右的距离this.$refs.progressBtn.style[transform]= `translate3d(${offsetWidth}px,0,0)`//小球的偏移}},
    watch:{//它是不断改变的percent(newPercent){//大于0 而且不是在拖动的状态下，拖动的时候不要改变if(newPercent>=0&&!this.touch.initiated){const barWidth=this.$refs.progressBar.clientWidth- progressBtnWidth//进度条的总宽度 内容-按钮的宽度const offsetWidth= newPercent* barWidth//应该偏移的宽度this._offset(offsetWidth)}}}}</script><style scoped lang="stylus" rel="stylesheet/stylus">@import"~common/stylus/variable".progress-bar
    height:30px.bar-inner
      position: relative
      top:13px
      height:4px
      background:rgba(0,0,0,0.3).progress
        position: absolute
        height:100%
        background: $color-theme.progress-btn-wrapper
        position: absolute
        left:-8px
        top:-13px
        width:30px
        height:30px.progress-btn
          position: relative
          top:7px
          left:7px
          box-sizing: border-box
          width:16px
          height:16px
          border:3px solid $color-text
          border-radius:50%
          background: $color-theme</style>