\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

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

\u4EE3\u7801\u6F14\u793A

\u6DFB\u52A0\u8054\u7CFB\u4EBA

<van-contact-card type="add" @click="onAdd" />

import { Toast } from 'vant';

export default {
  setup() {
    const onAdd = () => Toast('\u65B0\u589E');
    return {
      onAdd,
    };
  },
};

\u7F16\u8F91\u8054\u7CFB\u4EBA

<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />

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

export default {
  setup() {
    const tel = ref('13000000000');
    const name = ref('\u5F20\u4E09');
    const onEdit = () => Toast('edit');
    return {
      tel,
      name,
      onEdit,
    };
  },
};

\u4E0D\u53EF\u7F16\u8F91

<van-contact-card type="edit" name="\u5F20\u4E09" tel="13000000000" :editable="false" />

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
type	\u5361\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A `edit`	string	`add`
name	\u8054\u7CFB\u4EBA\u59D3\u540D	string	-
tel	\u8054\u7CFB\u4EBA\u624B\u673A\u53F7	string	-
add-text	\u6DFB\u52A0\u65F6\u7684\u6587\u6848\u63D0\u793A	string	`\u6DFB\u52A0\u8054\u7CFB\u4EBA`
editable	\u662F\u5426\u53EF\u4EE5\u7F16\u8F91\u8054\u7CFB\u4EBA	boolean	`true`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u65F6\u89E6\u53D1	event: MouseEvent

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { ContactCardType, ContactCardProps } from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0	\u9ED8\u8BA4\u503C	\u63CF\u8FF0
--van-contact-card-padding	var(--van-padding-md)	-
--van-contact-card-add-icon-size	40px	-
--van-contact-card-add-icon-color	var(--van-primary-color)	-
--van-contact-card-value-line-height	var(--van-line-height-md)	-

ContactCard \u8054\u7CFB\u4EBA\u5361\u7247

\u4ECB\u7ECD