/*! For license information please see 3091.d0ac80ab.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["3091"],{89161:function(s,n,a){"use strict";a.r(n);var t=a("80681");let d=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

ContactCard \u8054\u7CFB\u4EBA\u5361\u7247

\n

\u4ECB\u7ECD

\n

\u4EE5\u5361\u7247\u7684\u5F62\u5F0F\u5C55\u793A\u8054\u7CFB\u4EBA\u4FE1\u606F\u3002

\n

\u5F15\u5165

\n

\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

\n
import { createApp } from 'vue';\nimport { ContactCard } from 'vant';\n\nconst app = createApp();\napp.use(ContactCard);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u6DFB\u52A0\u8054\u7CFB\u4EBA

\n
<van-contact-card type="add" @click="onAdd" />\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const onAdd = () => showToast('\u65B0\u589E');\n    return {\n      onAdd,\n    };\n  },\n};\n
\n

\u7F16\u8F91\u8054\u7CFB\u4EBA

\n
<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const tel = ref('13000000000');\n    const name = ref('\u5F20\u4E09');\n    const onEdit = () => showToast('edit');\n    return {\n      tel,\n      name,\n      onEdit,\n    };\n  },\n};\n
\n

\u4E0D\u53EF\u7F16\u8F91

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type\u5361\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A editstringadd
name\u8054\u7CFB\u4EBA\u59D3\u540Dstring-
tel\u8054\u7CFB\u4EBA\u624B\u673A\u53F7string-
add-text\u6DFB\u52A0\u65F6\u7684\u6587\u6848\u63D0\u793Astring\u6DFB\u52A0\u8054\u7CFB\u4EBA
editable\u662F\u5426\u53EF\u4EE5\u7F16\u8F91\u8054\u7CFB\u4EBAbooleantrue
\n

Events

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-contact-card-paddingvar(--van-padding-md)-
--van-contact-card-add-icon-size40px-
--van-contact-card-add-icon-colorvar(--van-primary-color)-
--van-contact-card-title-line-heightvar(--van-line-height-md)-
\n
'},null,8,d))}}}]);