vant组件dialog顶部和底部固定元素

在 Vant 组件库中，Dialog 对话框是一个浮动层，它默认是在屏幕中央显示的。如果你想要在 Dialog 的顶部和底部添加固定元素，可以通过设置 Dialog 的 `custom-style` 属性来实现。

首先，你可以使用 Dialog 的 `beforeOpen` 事件来获取 Dialog 弹时的 DOM 节点，并给它添加自定义样式。具体步骤如下：

1. 在 Dialog 弹出时，通过 `beforeOpen` 事件获取 Dialog 的 DOM 节点。
2. 给 Dialog 的 DOM 节点添加自定义样式，使其固定在顶部或底部。

下面是一个示例代码，演示如何在 Dialog 的顶部和底部添加固定元素：

<template>
  <div>
    <van-button @click="showDialog">打开对话框</van-button>
    <van-dialog
      v-model="dialogVisible"
      @beforeOpen="handleDialogBeforeOpen"
    >
      <template #title>
        <div class="dialog-title">自定义标题</div>
      </template>
      <template #content>
        <div class="dialog-content">自定义内容</div>
      </template>
      <div class="dialog-fixed-top">顶部固定元素</div>
      <div class="dialog-fixed-bottom">底部固定元素</div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleDialogBeforeOpen() {
      const dialog = document.querySelector('.van-dialog');
      dialog.classList.add('custom-dialog-style');
    }
  }
};
</script>

<style scoped>
.custom-dialog-style {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.dialog-fixed-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

.dialog-fixed-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

.dialog-title {
  text-align: center;
  font-weight: bold;
}

.dialog-content {
  text-align: center;
  margin-top: 20px;
}
</style>

在上面的代码中，我们通过 `@beforeOpen` 事件获取了 Dialog 的 DOM 节点，并给它添加了 `custom-dialog-style` 类名，该类名用于设置 Dialog 的样式为固定定位。然后，我们通过添加 `dialog-fixed-top` 和 `dialog-fixed-bottom` 类名来设置顶部和底部固定元素的样式。

请根据你的实际需求来修改顶部和底部固定元素的样式和内容。