AddressEdit 住所編集 - Vant 4
AddressEdit 住所編集
📍 紹介
住所編集コンポーネントはECアプリケーションに欠かせないツールです！住所の新規作成、更新、削除といった完全な住所管理機能を提供します。配送先住所、請求先住所、その他の住所情報など、どんな住所情報でも簡単に管理でき、ユーザーに便利な住所管理体験を提供します。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。
js
import { createApp } from 'vue'; import { AddressEdit } from 'vant'; const app = createApp(); app.use(AddressEdit);🎯 コードデモ
基本的な使い方
簡単な数行のコードで、機能が完全な住所編集フォームを実装できます！省市地区の選択、詳細住所の入力、連絡先情報などをサポートしています。
html
js
import { ref } from 'vue'; import { showToast } from 'vant'; export default { setup() { const searchResult = ref([]); const onSave = () => showToast('save'); const onDelete = () => showToast('delete'); const onChangeDetail = (val) => { if (val) { searchResult.value = [ { name: '黄龍万博センター', address: '杭州市西湖区', }, ]; } else { searchResult.value = []; } }; return { onSave, onDelete, areaList, searchResult, onChangeDetail, }; }, };API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| area-list | 地区リスト | object | - |
| area-columns-placeholder | 地区選択列のプレースホルダーテキスト | string[] | [] |
| area-placeholder | 地区入力ボックスのプレースホルダーテキスト | string | 省 / 市 / 区を選択 |
| address-info | 住所情報の初期値 | AddressEditInfo | {} |
| search-result | 詳細住所検索結果 | AddressEditSearchItem[] | [] |
| show-delete | 削除ボタンを表示するかどうか | boolean | false |
| show-set-default | デフォルト住所欄を表示するかどうか | boolean | false |
| show-search-result | 検索結果を表示するかどうか | boolean | false |
| show-area | 地区を表示するかどうか | boolean | true |
| show-detail | 詳細住所を表示するかどうか | boolean | true |
| disable-area | 地区選択を無効にするかどうか | boolean | false |
| save-button-text | 保存ボタンのテキスト | string | 保存 |
| delete-button-text | 削除ボタンのテキスト | string | 削除 |
| detail-rows | 詳細住所入力ボックスの行数 | number | string | 1 |
| detail-maxlength | 詳細住所の最大長さ | number | string | 200 |
| is-saving | 保存ボタンのロードアニメーションを表示するかどうか | boolean | false |
| is-deleting | 削除ボタンのロードアニメーションを表示するかどうか | boolean | false |
| tel-validator | 電話番号形式の検証関数 | (val: string) => boolean | - |
| tel-maxlength | 電話番号の最大長さ | number | string | - |
| validator | カスタム検証関数 | (key: string, val: string) => string | - |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| save | 保存ボタンをクリックしたときにトリガーされます | info: AddressEditInfo |
| focus | 入力ボックスがフォーカスされたときにトリガーされます | key: string |
change v4.7.0 | name と tel 入力ボックスの値が変更されたときのみトリガーされます | {key: string, value: string} |
| delete | 住所の削除を確認したときにトリガーされます | info: AddressEditInfo |
| select-search | 検索結果を選択したときにトリガーされます | value: string |
| click-area | 配送先地区をクリックしたときにトリガーされます | - |
| change-area | 配送先地区を変更したときにトリガーされます | selectedOptions: PickerOption[] |
| change-detail | 詳細住所を変更したときにトリガーされます | value: string |
| change-default | デフォルト住所の使用を切り替えたときにトリガーされます | checked: boolean |
Slots
| 名前 | 説明 |
|---|---|
| default | 郵便番号の下にコンテンツを挿入します |
メソッド
ref を通じて AddressEdit インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細についてはコンポーネントインスタンスメソッドを参照してください。
| メソッド名 | 説明 | パラメータ | 戻り値 |
|---|---|---|---|
| setAddressDetail | 詳細住所を設定します | addressDetail: string | - |
| setAreaCode | 地区コードを設定します | code: string | - |
型定義
コンポーネントは以下の型定義をエクスポートします：
ts
import type { AddressEditInfo, AddressEditProps, AddressEditInstance, AddressEditSearchItem, } from 'vant';AddressEditInstance はコンポーネントインスタンスの型で、以下のように使用します：
ts
import { ref } from 'vue'; import type { AddressEditInstance } from 'vant'; const addressEditRef = ref<AddressEditInstance>(); addressEditRef.value?.setAddressDetail('');AddressEditInfo データ形式
注意：AddressEditInfo は初期値としてのみ渡され、フォームの最終内容は save イベントで取得できます。
| key | 説明 | 型 |
|---|---|---|
| name | 名前 | string |
| tel | 電話番号 | string |
| province | 省 | string |
| city | 市 | string |
| county | 県 | string |
| addressDetail | 詳細住所 | string |
| areaCode | 地区コード、省市地区選択から取得（必須） | string |
| isDefault | デフォルト住所かどうか | boolean |
AddressEditSearchItem データ形式
| key | 説明 | 型 |
|---|---|---|
| name | 地名 | string |
| address | 詳細住所 | string |
省市県リストデータ形式
Area 省市地区選択コンポーネントを参照してください。
テーマカスタマイズ
スタイル変数
コンポーネントはカスタマイズに使用できる以下の CSS 変数を提供します。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-address-edit-padding | var(--van-padding-sm) | - |
| --van-address-edit-buttons-padding | var(--van-padding-xl) var(--van-padding-base) | - |
| --van-address-edit-button-margin-bottom | var(--van-padding-sm) | - |
| --van-address-edit-button-font-size | var(--van-font-size-lg) | - |
🎉 まとめ
AddressEdit 住所編集コンポーネントはECアプリケーションの強力な助手です！省市地区の選択から詳細住所の入力、連絡先情報からデフォルト住所の設定まで、完全な住所管理ソリューションを提供します。新しい住所の作成でも既存の住所の編集でも、ユーザーにスムーズで便利な操作体験を提供します。
📚 関連コンテンツ
さらに詳しく知りたいですか？以下のコンテンツが役立つかもしれません：
- 🚀 クイックスタート - ゼロから始める Vant の使い方
- 🎨 テーマカスタマイズ - あなただけの視覚スタイルを作成
- 📱 モバイル対応 - 様々なデバイスでアプリを完璧に表示
- 📍 Area 省市地区選択 - 地区選択コンポーネントの使い方をマスターする
- 📋 AddressList 住所リスト - 住所リストコンポーネントのセット使用方法を理解する
- 📝 Form フォーム - フォームコンポーネントの高度な使い方を学ぶ
- 🎯 Field 入力ボックス - 入力ボックスコンポーネントの豊富な機能を探索する
- 📋 ベストプラクティス - 開発におけるベストプラクティスを学ぶ
- 🔍 よくある質問 - 開発中の疑問をすばやく解決