<template>
  <van-contact-edit
    v-model="showContactEdit"
    :contact-info="contactInfo"
    @save="onSave"
    @delete="onDelete"
  />
</template>

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

export default {
  components: {
    [ContactEdit.name]: ContactEdit,
  },
  data() {
    return {
      showContactEdit: true, // 控制联系人编辑组件的显示与隐藏
      contactInfo: {
        name: 'John Doe',
        tel: '13800138000',
        addText: '公司地址',
        address: '广东省 深圳市 南山区 南山大道 1 号',
      },
    };
  },
  methods: {
    onSave(data) {
      // 处理保存联系人信息的逻辑
      console.log('保存的联系人信息:', data);
    },
    onDelete() {
      // 处理删除联系人信息的逻辑
      console.log('点击了删除按钮');
    },
  },
};
</script>