Address List

Introduction

The address list component is used to display and manage shipping addresses, supporting operations such as address selection, editing, and deletion. The component supports paginated loading and provides address card display and action buttons.

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-list.umd.js"></script>

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

NPM Method

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

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

Code Example

<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