vue移动端的可拉升div

做了个需求，要求一个底部弹窗可以拉升高度，可拖动，简单记录一下。

主要思路是记录touchMoveY的位置计算动态绑定style

设一个页面，套了一个div为弹窗，代码如下

<div class="home">
  <div 
    class="dialog" 
    v-on:touchstart="bodyTouchStart" 
    v-on:touchmove="bodyTouchMove" 
    :style="`${startMove ? `height: ${heightStyle};` : `height: ${heightNum}rem;` }`"
  >
    弹出窗
  </div>
</div>

样式

.home {
  width: 100%;
  height: 100vh;
  .dialog {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

js

export default {
  data() {
    return {
      startMove: false,
      heightStyle: '', 
      yPoint: 0, // 拖动时Y的位置
      heightNum: 4.2, // 初始高度
    }
  },
  method: {
    bodyTouchStart(event) {
      this.startMove = true
    },
    bodyTouchMove(event) {
      this.yPoint = (event.targetTouches[0].pageY/100).toFixed(2);
      console.log('this.yPoin',this.yPoint)
      if(this.yPoint<=2 || this.yPoint>=8) {
        return
      }
      this.heightStyle = `calc(100vh - ${parseFloat(this.yPoint)*2}rem)`
    },
  }
}