地址編輯

介紹

地址編輯元件用於收貨地址的新增和編輯功能，支援姓名、手機號碼、地區選擇、詳細地址等資訊的輸入和驗證。元件內建表單驗證功能，支援自訂驗證規則。

引入

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