@tanzhenxing/zx-contact-card v1.0.2

zx-contact-card 联系人卡片

组件介绍

zx-contact-card 联系人卡片组件以卡片的形式展示联系人信息，支持添加和编辑两种模式。该组件支持H5、小程序和App多端平台，采用Vue3 setup语法糖实现。

平台兼容性

• H5：✓
• 微信小程序：✓
• 支付宝小程序：✓
• 百度小程序：✓
• 头条小程序：✓
• QQ小程序：✓
• App（Vue）：✓

基础用法

添加联系人

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

<script setup>
function onAdd() {
  console.log('添加联系人')
}
</script>

编辑联系人

<template>
  <zx-contact-card 
    type="edit" 
    name="张三" 
    tel="13000000000" 
    @click="onEdit" 
  />
</template>

<script setup>
function onEdit() {
  console.log('编辑联系人')
}
</script>

不可编辑

<template>
  <zx-contact-card 
    type="edit" 
    name="张三" 
    tel="13000000000" 
    :editable="false" 
  />
</template>

自定义文案

<template>
  <zx-contact-card 
    type="add" 
    add-text="选择联系人" 
    @click="onAdd" 
  />
</template>

自定义样式

<template>
  <zx-contact-card 
    type="add" 
    icon-size="50rpx"
    add-icon-color="#ff6b6b"
    @click="onAdd" 
  />
</template>

API

Props

Events

主题定制

样式变量

组件提供了下列 SCSS 变量，可用于自定义样式：

注意事项

1. 组件依赖 zx-icon 组件，请确保已正确引入
2. 在小程序中使用时，建议设置合适的 hover-class 样式
3. 组件支持多端平台，无需额外配置
4. 建议在使用前先了解 uniapp 的基本用法

更新日志

v1.0.0

• 初始版本
• 支持添加和编辑两种模式
• 支持自定义样式和文案
• 支持多端平台