vue van-dialog 如何設定高度可滾動

在Vue.js中，使用Van Dialog库（由vant团队提供的一系列轻量级UI组件）时，如果你想让内容高度可滚动，你可以通过设置dialog的内容容器的样式来实现。van-dialog本身允许你自定义其样式，特别是其content区域。以下是基本步骤：

首先，在引入van-dialog组件后，你需要找到默认的content元素，并为其添加CSS样式：

<template>
  <van-dialog v-model="showDialog" class="scrollable-dialog">
    <div slot="custom" ref="dialogContent"> <!-- 自定义内容 -->
      <p>...你的长文本...</p>
      <!-- 或者其他的HTML元素和内容 -->
    </div>
  </van-dialog>
</template>

<script>
import { VanDialog } from 'vant';

export default {
  components: {
    VanDialog,
  },
  data() {
    return {
      showDialog: false,
    };
  },
  computed: {
    dialogContentRef() {
      return this.$refs.dialogContent;
    }
  },
  mounted() {
    this.dialogContentRef.style.overflowY = 'auto'; // 添加滚动条
  },
};
</script>

<style scoped>
.scrollable-dialog .van-dialog__content {
  /* 如果需要，可以在这里设置最大高度 */
  max-height: 400px;
  overflow-y: auto; /* 这里启用垂直滚动 */
}
</style>

在这个例子中，我们给dialog的content区域添加了`overflow-y: auto`属性，这意味着当内容超过容器的高度时，会出现滚动条。