Vant4 ContactEdit 聯(lián)系人編輯

介紹

編輯并保存聯(lián)系人信息。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { ContactEdit } from 'vant';

const app = createApp();
app.use(ContactEdit);

代碼演示

基礎(chǔ)用法

<van-contact-edit
  is-edit
  show-set-default
  :contact-info="editingContact"
  set-default-label="設(shè)為默認聯(lián)系人"
  @save="onSave"
  @delete="onDelete"
/>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const editingContact = ref({
      tel: '',
      name: '',
    });
    const onSave = (contactInfo) => showToast('保存');
    const onDelete = (contactInfo) => showToast('刪除');
    return {
      onSave,
      onDelete,
      editingContact,
    };
  },
};

API

Props

Events

Contact 數(shù)據(jù)結(jié)構(gòu)

類型定義

組件導(dǎo)出以下類型定義：

import type { ContactEditInfo, ContactEditProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。