vue 利用css实现元素扩大鼠标选中区域及音乐拖动进度条实现（初版）

效果图如下：

 html部分

<view
        class="audiost"
        :style='"width: 300px;height: "+heig+"px;background: #078AFD; position: fixed;top: 300px;left: 300px;"'
        @tap="clickD($event)"
        @mousedown="down"
        @mousemove="mouse"
        @mouseup="mouseupC"
        @mouseleave="mouseLeaveF"
        @mouseover="mouseOverF">
        <view :style="'position: absolute;top: 0;left: 0;background: #EA892C;height: '+heig+'px;width:'+ wid +'px;'"></view>
      </view>

js部分：

data() {
      return {
        wid: 100,
        heig: 4,
        isdown: false,
      }
    },

 methods: { // 方法 集合

      clickD(e) {
        console.log(e);
        // console.log(e.currentTarget.firstElementChild);
        this.wid = e.layerX;
        // e.currentTarget.firstElementChild.style.width = e.layerX;
        // console.log(e.currentTarget.firstElementChild[0].style.width)
      },

      down(e) {
        this.isdown = true;
      },

      mouse(e) {
        if (this.isdown) {
          console.log(e);
          console.log(e.layerX);
          this.wid = e.layerX;
        }
      },
      mouseupC(e) {
        this.isdown = false;
      },

      mouseLeaveF(e) {
        this.isdown = false;
      },

      mouseOverF(e) {
        console.log(this);
        console.log(e.path);
      }
}

css：

<style>
  .audiost {
    border-radius: 4px;
    transition:all 0.1s linear; /**/
    position: relative;
  }
  .audiost:before{ /*利用伪元素 定位的拉扯实现扩大鼠标接近元素范围*/
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    bottom: -10px;
    left: 0;
  }
  .audiost:hover {
    transform-origin:center center;
    /*放大倍数为1.1倍;*/
    transform:scale(1,2)
  }
</style>