@tanzhenxing/zx-contact-edit v1.0.3

zx-contact-edit 联系人编辑

组件介绍

zx-contact-edit 联系人编辑组件用于编辑并保存联系人信息，支持添加和编辑两种模式。该组件支持H5、小程序和App多端平台，采用Vue3 setup语法糖实现。

平台兼容性

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

基础用法

添加联系人

<template>
  <zx-contact-edit 
    @save="onSave" 
  />
</template>

<script setup>
function onSave(contactInfo) {
  console.log('保存联系人:', contactInfo)
  // { name: '张三', tel: '13800138000', isDefault: false }
}
</script>

编辑联系人

<template>
  <zx-contact-edit 
    :is-edit="true"
    :contact-info="editingContact"
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script setup>
import { ref } from 'vue'

const editingContact = ref({
  name: '李四',
  tel: '13900139000',
  isDefault: true
})

function onSave(contactInfo) {
  console.log('保存联系人:', contactInfo)
}

function onDelete(contactInfo) {
  console.log('删除联系人:', contactInfo)
}
</script>

显示默认联系人开关

<template>
  <zx-contact-edit 
    :show-set-default="true"
    set-default-label="设为默认联系人"
    @save="onSave"
    @change-default="onChangeDefault"
  />
</template>

<script setup>
function onSave(contactInfo) {
  console.log('保存联系人:', contactInfo)
}

function onChangeDefault(isDefault) {
  console.log('默认联系人状态:', isDefault)
}
</script>

自定义验证

<template>
  <zx-contact-edit 
    :tel-validator="customTelValidator"
    @save="onSave"
  />
</template>

<script setup>
// 自定义手机号验证函数
function customTelValidator(tel) {
  // 支持座机号码
  const mobileReg = /^1[3-9]\d{9}$/
  const phoneReg = /^0\d{2,3}-?\d{7,8}$/
  return mobileReg.test(tel) || phoneReg.test(tel)
}

function onSave(contactInfo) {
  console.log('保存联系人:', contactInfo)
}
</script>

加载状态

<template>
  <zx-contact-edit 
    :is-edit="true"
    :is-saving="saving"
    :is-deleting="deleting"
    :contact-info="contact"
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script setup>
import { ref } from 'vue'

const saving = ref(false)
const deleting = ref(false)
const contact = ref({
  name: '王五',
  tel: '13700137000'
})

async function onSave(contactInfo) {
  saving.value = true
  try {
    // 模拟保存操作
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('保存成功:', contactInfo)
  } finally {
    saving.value = false
  }
}

async function onDelete(contactInfo) {
  deleting.value = true
  try {
    // 模拟删除操作
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('删除成功:', contactInfo)
  } finally {
    deleting.value = false
  }
}
</script>

API

Props

Events

ContactInfo 数据结构

样式变量

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

注意事项

1. 表单验证：组件内置了基本的表单验证，包括必填验证和手机号格式验证
2. 手机号验证：默认验证中国大陆手机号格式，可通过 tel-validator 自定义验证规则
3. 多端兼容：使用原生 input 和 switch 组件，确保多端兼容性
4. 无障碍支持：支持键盘导航和屏幕阅读器
5. 数据绑定：组件内部维护表单数据，通过事件向外传递

更新日志

v1.0.0

• 初始版本
• 支持联系人信息编辑
• 支持添加和编辑模式
• 支持表单验证
• 支持加载状态
• 支持多端平台