地址列表

介紹

地址列表元件用於展示和管理收貨地址，支援地址選擇、編輯、刪除等操作。元件支援分頁載入，提供地址卡片展示和操作按鈕。

引入

UMD 方式

其中 rc-20250814 為目前版本號，請依據實際版本號進行引入。

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

<script>
const AddressList = window.PolyvProductUIAddressList;
</script>

NPM 方式

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

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

程式碼範例

<template>
  <div>
    <AddressList
      :address-target="addressSDK"
      :address-id="selectedAddressId"
      @add-address="onAddAddress"
      @choose-address="onChooseAddress"
      @edit-address="onEditAddress"
      @clear-address="onClearAddress"
    />
  </div>
</template>

<script setup>
import { AddressList } from '@polyv/product-ui';
import { Address } from '@polyv/product-sdk';

// 初始化地址 SDK
const addressSDK = new Address(interactionCore, config);
const selectedAddressId = ref();

// 事件处理
const onAddAddress = () => {
  console.log('添加地址');
};

const onChooseAddress = (address) => {
  console.log('选择地址:', address);
  selectedAddressId.value = address?.id;
};

const onEditAddress = (address) => {
  console.log('编辑地址:', address);
};

const onClearAddress = () => {
  console.log('清空地址');
  selectedAddressId.value = undefined;
};
</script>

API

AddressList Props

AddressList Events