Address Editing

Introduction

The address editing component is used for adding and editing shipping addresses. It supports the entry and validation of information such as name, phone number, area selection, and detailed address. The component has built-in form validation and supports custom validation rules.

Import

UMD Method

Where rc-20250814 is the current version number, please import according to the actual version number.

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

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

NPM Method

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

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

Code Example

<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

Form Type AddressEditFormType

AddressEditFormItem