AddressList 住所リスト - Vant 4
AddressList 住所リスト
📋 紹介
住所リストコンポーネントによって住所管理が簡単かつ効率的になります！ユーザーの全ての住所情報をエレガントに表示し、選択、編集、削除などの操作をサポートし、ECアプリケーションに完全な住所管理ソリューションを提供します。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。
js
import { createApp } from 'vue'; import { AddressList } from 'vant'; const app = createApp(); app.use(AddressList);🎯 コードデモ
基本的な使い方
ユーザーの住所リストを表示し、デフォルト住所の選択、住所情報の編集などの機能をサポートします。明確なレイアウトによってユーザーは一見して理解できます！
html
js
import { ref } from 'vue'; import { showToast } from 'vant'; export default { setup() { const chosenAddressId = ref('1'); const list = [ { id: '1', name: '張三', tel: '13000000000', address: '浙江省杭州市西湖区文三路 138 号東方通信大厦 7 階 501 室', isDefault: true, }, { id: '2', name: '李四', tel: '1310000000', address: '浙江省杭州市拱墅区莫干山路 50 号', }, ]; const disabledList = [ { id: '3', name: '王五', tel: '1320000000', address: '浙江省杭州市浜江区江南大道 15 号', }, ]; const onAdd = () => showToast('住所を追加'); const onEdit = (item, index) => showToast('住所を編集:' + index); return { list, onAdd, onEdit, disabledList, chosenAddressId, }; }, };API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| v-model | 現在選択されている住所の id、複数選択をサポート（型は []） | number | string | number[] | string[] | - |
| list | 住所リスト | AddressListAddress[] | [] |
| disabled-list | 配送不可住所リスト | AddressListAddress[] | [] |
| disabled-text | 配送不可のヒントテキスト | string | - |
| switchable | 住所の切り替えを許可するかどうか | boolean | true |
| show-add-button | 下部ボタンを表示するかどうか | boolean | true |
| add-button-text | 下部ボタンのテキスト | string | 住所を追加 |
| default-tag-text | デフォルト住所タグのテキスト | string | - |
right-icon v4.5.0 | 右側のアイコン名または画像リンク。Icon コンポーネントの name 属性 と同じ | string | edit |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| add | 追加ボタンをクリックしたときにトリガーされます | - |
| edit | 編集ボタンをクリックしたときにトリガーされます | item: AddressListAddress, index: number |
| select | 選択されている住所を切り替えたときにトリガーされます | item: AddressListAddress, index: number |
| edit-disabled | 配送不可の住所を編集したときにトリガーされます | item: AddressListAddress, index: number |
| select-disabled | 配送不可の住所を選択したときにトリガーされます | item: AddressListAddress, index: number |
| click-item | 任意の住所をクリックしたときにトリガーされます | item: AddressListAddress, index: number, { event } |
AddressListAddress データ構造
| キー名 | 説明 | 型 |
|---|---|---|
| id | 各住所の一意の識別子 | number | string |
| name | 名前 | string |
| tel | 電話番号 | number | string |
| address | 詳細住所 | string |
| isDefault | デフォルト住所かどうか | boolean |
Slots
| 名前 | 説明 | パラメータ |
|---|---|---|
| default | リストの下にコンテンツを挿入します | - |
| top | 上部にコンテンツを挿入します | - |
| item-bottom | リストアイテムの下部にコンテンツを挿入します | item: AddressListAddress |
| tag | リストアイテムのタグコンテンツをカスタマイズします | item: AddressListAddress |
型定義
コンポーネントは以下の型定義をエクスポートします：
ts
import type { AddressListProps, AddressListAddress } from 'vant';テーマカスタマイズ
スタイル変数
コンポーネントはカスタマイズに使用できる以下の CSS 変数を提供します。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-address-list-padding | var(--van-padding-sm) var(--van-padding-sm) 80px | - |
| --van-address-list-disabled-text-color | var(--van-text-color-2) | - |
| --van-address-list-disabled-text-padding | var(--van-padding-base) * 5 0 var(--van-padding-md) | - |
| --van-address-list-disabled-text-font-size | var(--van-font-size-md) | - |
| --van-address-list-disabled-text-line-height | var(--van-line-height-md) | - |
| --van-address-list-add-button-z-index | 999 | - |
| --van-address-list-item-padding | var(--van-padding-sm) | - |
| --van-address-list-item-text-color | var(--van-text-color) | - |
| --van-address-list-item-disabled-text-color | var(--van-text-color-3) | - |
| --van-address-list-item-font-size | 13px | - |
| --van-address-list-item-line-height | var(--van-line-height-sm) | - |
| --van-address-list-radio-color | var(--van-primary-color) | - |
| --van-address-list-edit-icon-size | 20px | - |
📝 まとめ
AddressList 住所リストコンポーネントはECアプリケーションに欠かせない重要なコンポーネントです！ユーザーの住所情報をエレガントに表示するだけでなく、完全な住所管理機能も提供します。シンプルな API デザインと豊富なカスタマイズオプションによって、業務要件に合った住所管理インターフェイスを簡単に構築することができます。
🎯 主な特徴：
- 📋 明確な住所情報の表示
- ✅ 柔軟な住所選択メカニズム
- ✏️ 簡便な編集と管理機能
- 🚫 スマートな配送不可住所の処理
- 🎨 豊富なテーマカスタマイズオプション
シンプルな住所選択から複雑な住所管理シナリオまで、AddressList はあなたに完璧なソリューションを提供します！