1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 ContactEdit：
<template>
<div>
<!-- 其他页面内容 -->
<!-- ContactEdit 组件 -->
<van-contact-edit
v-model="contactData"
show-set-default
show-delete
@save="onSave"
@delete="onDelete"
/>
</div>
</template>
<script>
import { VanContactEdit } from 'vant';
export default {
components: {
VanContactEdit
},
data() {
return {
contactData: {
id: '1',
name: 'John Doe',
tel: '1234567890',
isDefault: true,
address: '123 Main St, City, Country'
}
};
},
methods: {
onSave() {
// 保存联系人的逻辑
console.log('保存联系人：', this.contactData);
},
onDelete() {
// 删除联系人的逻辑
console.log('删除联系人：', this.contactData);
}
}
};
</script>
在上述示例中，van-contact-edit 组件用于创建联系人编辑页面。v-model 绑定了联系人编辑的数据，show-set-default 和 show-delete 分别表示是否显示设置默认联系人和删除联系人的选项。
通过监听 @save 和 @delete 事件，你可以在用户保存和删除联系人时执行相应的逻辑。在实际项目中，你可能需要将 contactData 存储到后端或进行其他操作。
请根据你的实际需求进行样式和行为的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/5862/Vant