地址编辑

下载 PDF

下载 Word

介绍

地址编辑组件用于收货地址的新增和编辑功能，支持姓名、手机号、地区选择、详细地址等信息的录入和验证。组件内置表单验证功能，支持自定义验证规则。

引入

UMD 方式

其中 rc-20250814 为当前版本号，请根据实际版本号进行引入。

<script src="https://websdk.videocc.net/product-ui/rc-20250814/address-edit.umd.js"></script>

<script>
const AddressEdit = window.PolyvProductUIAddressEdit;
</script>

NPM 方式

// 安装依赖
pnpm add @polyv/product-ui

// 引入组件
import { AddressEdit } from '@polyv/product-ui';

代码示例

<template>
  <div>
    <AddressEdit
      :form-list="formList"
      :disabled-submit="loading"
      :submit-action="handleSubmit"
    />
  </div>
</template>

<script setup>
import { AddressEdit } from '@polyv/product-ui';
import { AddressEditFormType } from '@polyv/product-ui';

// 表单配置
const formList = [
  {
    formType: AddressEditFormType.Input,
    title: '姓名',
    placeholder: '请输入姓名',
    isRequired: true,
    value: '',
  },
  {
    formType: AddressEditFormType.Phone,
    title: '手机号',
    placeholder: '请输入手机号',
    isRequired: true,
    value: '',
  },
  {
    formType: AddressEditFormType.Area,
    title: '',
    placeholder: '请选择地区',
    isRequired: true,
    value: '',
  },
  {
    formType: AddressEditFormType.Address,
    title: '',
    placeholder: '请输入详细地址',
    isRequired: true,
    value: '',
  },
];

const loading = ref(false);

// 提交处理
const handleSubmit = async (formData) => {
  loading.value = true;
  try {
    // 处理提交逻辑
    console.log('表单数据:', formData);
  } finally {
    loading.value = false;
  }
};
</script>

API

Props

表单类型 AddressEditFormType

AddressEditFormItem