用vant实现弹出dialog进行未婚已婚的修改

以下是使用vant实现弹出dialog进行未婚已婚的修改的代码示例：

<template>
  <div class="marriage-status">
    <div class="status-title">婚姻状况</div>
    <div class="status-value">{{marriageStatus}}</div>
    <van-dialog v-model="dialogVisible" title="修改婚姻状况">
      <van-radio-group v-model="selectedStatus">
        <van-radio name="未婚" label="未婚" />
        <van-radio name="已婚" label="已婚" />
      </van-radio-group>
      <template #footer>
        <van-button type="primary" @click="handleSave">保存</van-button>
        <van-button @click="handleCancel">取消</van-button>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      marriageStatus: '未婚',
      dialogVisible: false,
      selectedStatus: ''
    }
  },
  methods: {
    showEditDialog() {
      this.dialogVisible = true
    },
    handleSave() {
      if (this.selectedStatus) {
        this.marriageStatus = this.selectedStatus
        this.dialogVisible = false
      }
    },
    handleCancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.marriage-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.status-title {
  font-size: 16px;
  font-weight: bold;
}
.status-value {
  margin-top: 10px;
  font-size: 24px;
  color: #f00;
}
</style>

在上述代码中，我们使用了vant的dialog和radio组件来实现弹出对话框和选择未婚或已婚的操作。在data中，我们定义了三个变量：marriageStatus表示当前婚姻状况，dialogVisible表示对话框是否可见，selectedStatus表示用户选择的婚姻状况。在showEditDialog方法中，我们将dialogVisible设置为true，从而显示对话框。在handleSave方法中，我们判断用户是否选择了婚姻状况，如果选择了，则将marriageStatus设置为选择的值，并将dialogVisible设置为false，从而隐藏对话框。在handleCancel方法中，我们将dialogVisible设置为false，从而隐藏对话框。最后，在模板中，我们使用van-dialog和van-radio组件来显示对话框和单选框，使用v-model指令将选中的值绑定到selectedStatus变量上，使用@click指令和handleSave和handleCancel方法来处理保存和取消按钮的点击事件