Vant Dialog 单选实现及数据回传 - 使用示例与代码

您可以使用以下代码实现：

1. 在需要弹出 dialog 的地方，调用 vant 的 Dialog 组件：

<template>
  <div>
    <van-button @click="showDialog">弹出 dialog</van-button>
  </div>
</template>

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

export default {
  methods: {
    showDialog() {
      Dialog({
        title: '请选择',
        options: [
          { name: '选项1', value: 1 },
          { name: '选项2', value: 2 },
          { name: '选项3', value: 3 },
        ],
        closeOnClickOverlay: true,
        onSelect: (option) => {
          this.handleSelect(option);
        },
      });
    },
    handleSelect(option) {
      // 处理选择的数据
      console.log(option);
    },
  },
};
</script>

2. 在 Dialog 组件中，设置 options 参数为一个数组，数组中每个元素为一个选项，包含 name 和 value 属性。设置 onSelect 回调函数来处理选择的数据。在回调函数中，可以将选择的数据传递给父组件。

参考文档：https://vant-contrib.gitee.io/vant/#/zh-CN/dialog#dan-xuan-xuan-ze-gong-neng