在 Vant3 中，ContactEdit 组件用于编辑联系人的信息，通常用于用户填写或编辑联系人信息的场景。以下是一个简单的使用示例：
<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>

在这个示例中：

  •  v-model="showContactEdit" 用于控制联系人编辑组件的显示与隐藏。

  •  :contact-info="contactInfo" 属性用于传递联系人的初始信息。

  •  @save 事件会在保存联系人信息时触发，你可以在 onSave 方法中处理保存的联系人信息。

  •  @delete 事件会在点击删除按钮时触发，你可以在 onDelete 方法中处理删除联系人信息的逻辑。


你可以根据实际需求添加其他属性或者定制样式。


转载请注明出处：http://www.zyzy.cn/article/detail/5774/Vant