Vant4 的 AddressList 组件用于展示地址列表,方便用户选择已有的地址。以下是一个简单的示例,展示如何在 Vue.js 中使用 Vant4 的 AddressList 组件:

1. 安装 Vant4

确保你已经安装了 Vant4,可以使用 npm 或 yarn 安装:
npm install vant@next --save
# 或
yarn add vant@next

2. 在你的 Vue 组件中引入 AddressList
<template>
  <div>
    <!-- 其他页面内容 -->

    <!-- AddressList 组件 -->
    <van-address-list
      :list="addressList"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { VanAddressList } from 'vant';

export default {
  components: {
    VanAddressList
  },
  data() {
    return {
      addressList: [
        {
          id: '1',
          name: 'John Doe',
          tel: '1234567890',
          address: '123 Main St, City, Country',
          isDefault: true
        },
        {
          id: '2',
          name: 'Jane Smith',
          tel: '0987654321',
          address: '456 Side St, Town, Country',
          isDefault: false
        }
        // 可以继续添加其他地址
      ]
    };
  },
  methods: {
    onSelect(address) {
      // 选择地址的逻辑
      console.log('选择地址:', address);
    }
  }
};
</script>

在上述示例中,van-address-list 组件用于创建地址列表页面。list 属性绑定了地址列表的数据,通过监听 @select 事件,你可以在用户选择地址时执行相应的逻辑。

请根据你的实际需求进行样式和行为的定制。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5858/Vant