前端 利用自定義組件 div 和 封裝的touch事件做的刻度 -rule -戴向天

大家好！我叫戴向天

QQ羣：602504799

QQ:809002582
layout-div 組件詳情 ==》https://blog.csdn.net/weixin_41088946/article/details/91448369

touch事件封裝==》https://blog.csdn.net/weixin_41088946/article/details/90764437

<template>


  <!--尺子刻度-->


  <div class="posi-r dh-150 mar-a w-600 over-h" :style="{border:`3px solid ${color}`}">
    <div class="posi-a w100 flex-x-center">
      <dd class="down-2-3" :style="{borderTopColor:color}"></dd>
    </div>
    <ul class="flex mar-l-5" ref="rule">
      <layout-div v-for="(i,k) in max" :pad="[0,14,0,0]" unit="px" :key="k" class="flex-g-0 posi-r flex-x-center">
        <layout-div :w="1" :mar="[0,0,20]" unit="px" :class="i%10 == 0?'dh-90':i%5 == 0?'dh-60':'dh-40'"
                       :style="{ backgroundColor:color,}"></layout-div>
        <span class="posi-a b0 fon-lg" :style="{color:color}" v-if="i%10 == 0">{{i}}</span>
      </layout-div>
    </ul>
  </div>


</template>


<script>

  export default {
    props: {
      min: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 100
      },
      value: {
        type: Number,
        default: 50
      },
      color: {
        type: String,
        default: '#FF8C4D'
      }
    },
    data() {
      return {
        index: 50
      }
    },
    methods: {
      bind() {
        if (this.$refs.rule) {
          const dom = this.$refs.rule;
          let data = {
            X: 0,
            distanceX: 0,
            maxW: this.max * 15
          }

          const that = this;

          this.$refs.rule.style.paddingLeft = this.$refs.rule.clientWidth / 2 - 1 + 'px';

          dom.style.transform = `translateX(${-(this.value - 1) * 15}px)`


          this.touch({
            dom,
            start({x}) {
              data.X = parseFloat(dom.style.transform ? dom.style.transform.split("(")[1].split("px)")[0] : 0);
            },
            move({dx}) {

              data.distanceX = dx + data.X

              if (data.distanceX >= 0) {
                data.distanceX = 0
              }else if(Math.abs(data.distanceX) >= data.maxW){
                data.distanceX = -data.maxW
              }

              that.$emit('input', ~~(data.distanceX / 15) - 1)

              dom.style.transform = `translateX(${data.distanceX}px)`
            },
            end(data) {

            }
          })

        } else {
          window.requestAnimationFrame(this.bind)
        }
      }
    },
    created() {
      window.requestAnimationFrame(this.bind)
    }
  }


</script>

class - style 具體內容如下

css 參考的 UI設計尺寸爲 750*1334

.posi-r {
  position: relative;
  z-index: 1;
}
.dh-150 {
  height: 150px;
}
.mar-a {
  margin: 0 auto;
}
.w-600 {
  width: 600px;
}
.over-h {
  overflow: hidden;
}
.posi-a {
  position: absolute;
  z-index: 1;
}
.w100 {
  width: 100%;
}
.flex-x-center {
  display: flex;
  justify-content: center;
}
.down-2-3 {
  border: 0.2rem solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
/*公用flex佈局樣式*/
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.mar-l-5 {
  margin-left: 5px;
}
.flex-g-0 {
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 0;
}
.dh-60 {
  height: 60px;
}
.dh-40 {
  height: 40px;
}
.dh-90 {
  height: 90px;
}
.b0 {
  bottom: 0;
}
.fon-lg {
  font-size:30px;
}
.pad-tb {
  padding-top: 20px;
  padding-bottom: 20px;
}
.fon-wb {
  font-weight: bold;
}
.fon-xl {
  font-size: 32px;
}
.t-c {
  text-align: center;
}
.mar-b {
  margin-bottom: 30px;
}
.col-t {
  color: var(--mainColor);
}
.fon-xxl {
  font-size:36px;
}

使用方法


效果圖