vant的弹出层跟随手指变化高度

在Vant中实现弹出层跟随手指变化高度，可以通过监听触摸事件并动态修改弹出层的高度来实现。以下是一个简单的实现步骤：

1. **创建弹出层组件**：首先，创建一个弹出层组件，并在其中添加一个用于显示内容的容器。

2. **监听触摸事件**：在弹出层组件中监听触摸事件（如`touchstart`、`touchmove`和`touchend`），并根据手指的移动来计算新的高度。

3. **动态修改高度**：根据触摸事件的坐标，动态修改弹出层容器的高度。

以下是一个简单的示例代码：

<template>
  <div class="popup-container" ref="popup">
    <div
      class="popup-content"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <!-- 弹出层内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      currentHeight: 200, // 初始高度
      minHeight: 100, // 最小高度
      maxHeight: 500, // 最大高度
    };
  },
  methods: {
    onTouchStart(event) {
      this.startY = event.touches[0].clientY;
    },
    onTouchMove(event) {
      const touchY = event.touches[0].clientY;
      const deltaY = touchY - this.startY;
      const newHeight = this.currentHeight + deltaY;

      if (newHeight > this.minHeight && newHeight < this.maxHeight) {
        this.currentHeight = newHeight;
        this.$refs.popup.style.height = `${this.currentHeight}px`;
        this.startY = touchY;
      }
    },
    onTouchEnd() {
      // 可选：在触摸结束时添加一些逻辑
    },
  },
};
</script>

<style scoped>
.popup-container {
  width: 100%;
  height: 200px; /* 初始高度 */
  overflow: hidden;
  transition: height 0.3s;
}
.popup-content {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>

在上述代码中，我们创建了一个简单的弹出层组件，并通过监听触摸事件来动态修改弹出层的高度。