vue项目中实现一个可以滑动的时间标尺

效果:可以左右滑动的

 html部分:

<div class="body">
    <div>当前选中月份:{{chiziValue}}</div>
    <div id="parent" class="kdZ" >
                <div class="hkBox" ref="pondModel">
                    <div id="children" @mousedown="move" ref="sonNode"></div>
                </div>
                <div class="center">
                    <div>{{leftselectValue}}</div>
                    <div>{{leftselectValue+1}}</div>
                </div>
                <div class="bottom">
                    <div :class="[chiziIndex==item? 'active':'']" v-for="(item) in 12" :key="item">{{item}}月</div>
                    <div :class="[chiziIndex==-1? 'active':'']">1月</div>
                </div>
            </div>
  </div>

css部分:

.body{
    overflow: hidden;
    width: 100%;
    height: 900px;
    background: #00132D;
    border: 1px solid rgba(50,197,255,1);
    .kdZ {
              width: 980px;
              height: 130px;
              margin: 0 auto;
              margin-top: 26.5px;
              background:url('../assets/chiz.png') no-repeat;
              background-size: 100% 100%;
              .hkBox{
                  position: relative;
                  height: 27px;
                  width: 936px;
                  // border: 1px solid red;
                  // margin: 0 auto;
                  margin-top: -2px;
                  margin-left: 24px;
                  #children {
                  position: absolute;
                  width: 36px;
                  height: 20px;
                  background:url('../assets/yidong.png') no-repeat;
                  background-size: 100% 100%; 
                  cursor: move;
  
              }
              }
              .center{
                  display: flex;
                  width: 100%;
                  position: relative;
                  div{
                      font-family: PingFangSC-Medium;
                      font-size: 22px;
                      color: #ffff;
                      text-align: center;
                      font-weight: 500;
                  }
                  div:nth-child(1){
                      position: absolute;
                      left: 19px;;
                      top: -10.5px;
                  }
                  div:nth-child(2){
                      position: absolute;
                      right: 61px;;
                      top: -10.5px;
                  }
              }
              .bottom{
                  display: flex;
                  margin-top: 55px;
                  margin-left: 30px;
                  div{
                      font-family: PingFangSC-Regular;
                      font-size: 18px;
                      color: #32C5FF;
                      letter-spacing: 0;
                      text-align: center;
                      font-weight: 400;
                      margin-right:42px;
                      white-space: nowrap;
                  }
                  .active{
                      font-family: PingFangSC-Medium;
                      font-size: 20px;
                      color: #32C5FF;
                      font-weight: 600;
                  }
                  div:nth-child(11), div:nth-child(12),div:nth-child(13){
                      margin-left: -10px;
                  }
              }
              
  
          }
  }

js部分:

 data() {
        return {
        leftselectValue: 2021, //左侧下拉菜单选中的
        rightselectValue:2021,//右侧表格下拉菜单选中的
        chiziIndex:1,//尺子日期的索引
        chiziValue:'2021年1月',///尺子日期,默认
        }
    },
    methods: {
        move(event){
                let that=this
                console.log(event)
                let odiv = event.target
                let disX =event.clientX - odiv.offsetLeft
                let disY =event.clientY - odiv.offsetTop
                document.onmousemove=(e)=>{
                    //计算元素位置(需要判断临界值)
                    let left = e.clientX - disX;
                    // let top = e.clientY - disY;
                    let {
                        //this.$refs.pondMode.offsetHeight
                        offsetHeight: pondModelHeight,
                        offsetWidth: pondModelWidth,
                    } = this.$refs.pondModel;
                    let {
                        offsetHeight: sonNodeHeight,
                        offsetWidth: sonNodeWidth,
                    } = odiv;
                    // 左上角(left)
                    if (left <0) {
                        left = 0;
                    }
                    if (left >=that.getFontSize(851)) {
                        left = that.getFontSize(851);
                    }
                    if (top < 0) {
                        top = 0;
                    }
                    // 左下角
                    if (top > pondModelHeight - sonNodeHeight) {
                        // top = pondModelHeight - sonNodeHeight-sonNodeHeight/2;
                        top = pondModelHeight - sonNodeHeight;

                        // 正常的是 pondModelHeight - sonNodeHeight 但是我的dom 会超出半个所以我这加了半个距离 没找到原因
                    }
                    if (left > pondModelWidth - sonNodeWidth) {
                        console.log(123);
                        // left = pondModelWidth - sonNodeWidth-sonNodeWidth/2;
                        left = pondModelWidth - sonNodeWidth

                        // 正常的是 pondModelWidth - sonNodeWidth 但是我的dom 会超出半个所以我这加了半个距离 没找到原因
                    }
                    odiv.style.left = left +'px'
                    odiv.style.top  = top  +'px'
                    console.log(left);
                    odiv.style.zIndex =999

                    // 判断当前指示到了几月份
                    if (left<=0 ) {
                      this.chiziIndex=1
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                      
                    }
                    if (left>0 && left<that.getFontSize(75)) {
                      this.chiziIndex=2
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                      
                    }

                    if (left>that.getFontSize(75) && left<that.getFontSize(145)) {
                      this.chiziIndex=3
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(145) && left<that.getFontSize(215)) {
                      this.chiziIndex=4
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(215) && left<that.getFontSize(285)) {
                      this.chiziIndex=5
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(285) && left<that.getFontSize(355)) {
                      this.chiziIndex=6
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(355) && left<that.getFontSize(425)) {
                      this.chiziIndex=7
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(425) && left<that.getFontSize(505)) {
                      this.chiziIndex=8
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(505) && left<that.getFontSize(576)) {
                      this.chiziIndex=9
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(576) && left<that.getFontSize(645)) {
                      this.chiziIndex=10
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(645) && left<that.getFontSize(715)) {
                      this.chiziIndex=11
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(715) && left<that.getFontSize(785)) {
                      this.chiziIndex=12
                      this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                        
                    }
                    if (left>that.getFontSize(785)) {
                      this.chiziIndex=-1
                      this.chiziValue=(this.leftselectValue+1)+'年'+(-this.chiziIndex)+"月"
                        
                    }
                }
                document.onmouseup=(e)=>{
                    document.onmousemove = null
                    document.onmouseup = null
                    odiv.style.zIndex =1
                    odiv = null
                }
        },
    },

注意:main.js中需要引入适配的方法

Vue.prototype.getFontSize = (px) => {
  let width = document.body.clientWidth
  return px * width / 1920
}