Area 都道府県市区町村選択 - Vant 4
Area 都道府県市区町村選択
🗺️ 紹介
都道府県市区町村選択コンポーネントは、優雅な三段階連動選択体験を提供します！これによりユーザーは迅速かつ正確に地理位置を選択することができます。通常はポップアップコンポーネントと組み合わせて使用し、住所選択にスムーズな操作性を提供します。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { Area } from'vant'; const app = createApp(); app.use(Area);🎯 コード例
基本的な使い方
都道府県市区町村コンポーネントを初期化する際には、area-list 属性を通じて都道府県市区町村データを渡す必要があります。簡単な設定で、完全な地域選択機能を実現できます！
areaList 形式
areaList はオブジェクト構造で、province_list、city_list、county_list の3つのキーを含みます。
各項目は地域コードをキー、都道府県市区町村名を値とします。地域コードは6桁の数字で、最初の2桁は省、中間の2桁は市、最後の2桁は区/県を表し、6桁になるように0で埋めます。例えば北京の地域コードは 11 で、6桁にすると 110000 になります。
サンプルデータは以下の通りです：
const areaList = { province_list: { 110000: '北京市', 120000: '天津市', }, city_list: { 110100: '北京市', 120100: '天津市', }, county_list: { 110101: '东城区', 110102: '西城区', // .... }, };中国の都道府県市区町村データ
Vant は中国の都道府県市区町村データを提供しています。@vant/area-data npm パッケージをインストールして導入することができます：
# npm を使用 npm i @vant/area-data # yarn を使用 yarn add @vant/area-data # pnpm を使用 pnpm add @vant/area-data # Bun を使用 bun add @vant/area-dataimport { areaList } from'@vant/area-data'; exportdefault { setup() { return { areaList }; }, };Tips: 中国の行政区画は毎年変更されることがあります。都道府県市区町村データが最新のものでないことに気づいた場合は、Pull Request を送信して更新を手助けしてください。最新のデータは「国家統計局 - 全国区画コード」 や「民政部 - 行政区画コード」で確認できます。公式データに基づいて検証してください。
選択項目の制御
v-model を使用して、現在選択されている地域コードをバインドします。
import { ref } from'vue'; exportdefault { setup() { const value = ref('330302'); return { value }; }, };表示列の設定
columns-num 属性を使用して、都道府県市区町村の表示列数を設定できます。デフォルトでは都道府県市区町村が表示されますが、2 に設定すると都道府県と市のみが表示されます。
列のプレースホルダーテキストの設定
columns-placeholder 属性を使用して、各列のプレースホルダーテキストを設定できます。
API
Props
| パラメータ | 説明 | タイプ | デフォルト値 |
|---|---|---|---|
| v-model | 現在選択されている項目の地域コード | string | - |
| title | 上部バーのタイトル | string | - |
| confirm-button-text | 確認ボタンのテキスト | string | 確認 |
| cancel-button-text | キャンセルボタンのテキスト | string | キャンセル |
| area-list | 都道府県市区町村データ、形式は以下を参照 | object | - |
| columns-placeholder | 列のプレースホルダーテキスト | string[] | [] |
| loading | ロード状態を表示するかどうか | boolean | false |
| readonly | 読み取り専用モードかどうか、読み取り専用モードではオプションを切り替えられない | boolean | false |
| option-height | オプションの高さ、px、vw、vh、rem 単位をサポート、デフォルトは px | number | string | 44 |
| columns-num | 表示列数、3-都道府県市区町村、2-都道府県と市、1-都道府県 | number | string | 3 |
| visible-option-num | 表示可能なオプションの数 | number | string | 6 |
| swipe-duration | 素早くスワイプしたときの慣性スクロールの時間、単位 ms | number | string | 1000 |
Events
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| confirm | 完了ボタンをクリックしたときに発生 | { selectedValues, selectedOptions, selectedIndexes } |
| cancel | キャンセルボタンをクリックしたときに発生 | { selectedValues, selectedOptions, selectedIndexes } |
| change | オプションが変更されたときに発生 | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |
Slots
| 名前 | 説明 | パラメータ |
|---|---|---|
| toolbar | 上部バー全体の内容をカスタマイズ | - |
| title | タイトル内容をカスタマイズ | - |
| confirm | 確認ボタンの内容をカスタマイズ | - |
| cancel | キャンセルボタンの内容をカスタマイズ | - |
| columns-top | オプションの上部内容をカスタマイズ | - |
| columns-bottom | オプションの下部内容をカスタマイズ | - |
メソッド
ref を使用して Area インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細についてはコンポーネントのインスタンスメソッドを参照してください。
| メソッド名 | 説明 | パラメータ | 戻り値 |
|---|---|---|---|
| confirm | 慣性スクロールを停止し、confirm イベントを発生させる | - | - |
| getSelectedOptions | 現在選択されているオプションを取得する | - | PickerOption[] |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { AreaProps, AreaList, AreaInstance } from'vant';AreaInstance はコンポーネントインスタンスの型で、以下のように使用します：
import { ref } from'vue'; importtype { AreaInstance } from'vant'; const areaRef = ref<AreaInstance>(); areaRef.value?.confirm();よくある質問
デスクトップでコンポーネントを操作できない？
デスクトップ対応を参照してください。
📝 まとめ
Area 都道府県市区町村選択コンポーネントは、住所選択に完璧なソリューションを提供します！🗺️ 三段階連動の優雅なインタラクションにより、ユーザーは必要な地理位置を迅速かつ正確に選択することができます。ECアプリの配送先住所選択から、地域情報が必要なその他のシナリオまで、Area コンポーネントはスムーズなユーザー体験を提供します。
🎯 主な特徴：
- 🔄 三段階連動：都道府県市区町村のスマート連動、より便利な選択
- 📊 完全なデータ：完全な中国の都道府県市区町村データパッケージを提供
- ⚙️ 柔軟な設定：表示列数やプレースホルダーテキストのカスタマイズをサポート
- 🎨 スタイルカスタマイズ：豊富なスタイル変数、さまざまなデザインニーズに対応
- 📱 モバイル最適化：モバイル用に設計されたスワイプ選択体験
ポップアップコンポーネントと組み合わせることで、Area はあなたのアプリケーションにプロフェッショナルな住所選択機能をもたらします！