使用 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>
<p>该代码使用 Vant 的 Dialog 和 Radio 组件实现弹出对话框和选择婚姻状况的功能。在 data 中定义了三个变量：marriageStatus 表示当前婚姻状况，dialogVisible 表示对话框是否可见，selectedStatus 表示用户选择的婚姻状况。showEditDialog 方法用来显示对话框，handleSave 方法用于保存用户选择的婚姻状况并关闭对话框，handleCancel 方法用于关闭对话框。模板中使用 v-model 指令将选中的值绑定到 selectedStatus 变量上，使用 @click 指令处理保存和取消按钮的点击事件。</p>