ホームページ > 記事 > ウェブフロントエンド > Vue領域選択コンポーネントの使い方
今回は、vue 領域選択コンポーネントの使い方と、vue 領域選択コンポーネントを使用する際の注意事項について説明します。以下は実際的なケースです。
概要
は、主に全国の地域データの操作に使用されます。これには、省、市、区の3レベルのリンク、地域データの追加と削除が含まれます。地域データを操作する場合、ツリー状の領域。コンポーネント以前にも選択は使用されていましたが、大量の地域データを操作すると描画が遅くなるため、別のデータ表示フォームとインタラクションフォームに変更し、このコンポーネントを思いつきました。
注: このコンポーネントは vue.js コンポーネントです
デモ
デモするにはここをクリックしてください
API
Props
パラメータ | type | 手順|
---|---|---|
配列 | 受信コンポーネントエリアデータ |
イベント名前 | パラメータ説明 | |
---|---|---|
area | コンポーネントの詳細な説明selectedregion |
Props
area
area このパラメータは必須であり、コンポーネントの初期化時の領域データを表します。空にすることもできます。 area は複数のオブジェクトを含むarray です。各オブジェクトのデータ構造は次のとおりです。
... area: [ {Name: '北京', ID: '01'}, {Name: '南京', ID: '0401'}, {Name: '西湖区', ID: '060105'} ], ...後で実際に使用すると、background が area の ID 値のみを返す場合があることがわかったので、ここでそのようにしました。最適化では、次のような ID の値のみを渡すことができます:
... area: [ {ID: '01'}, {ID: '0401'}, {ID: '060105'} ], ...
selected
selected は、コンポーネントによって内部的に発行されるイベントです。コンポーネントの外部でこのイベントをサブスクライブして、返される値を取得できます。この値は、コンポーネントによって現在選択されているすべての領域であり、戻り値は領域データを含む複数のオブジェクトで構成される配列であり、データ構造は area パラメーターと同じです簡単な例
<p> <addressmap :area="area" @selected="selected"></addressmap> </p>
インストール use
npm install adc-addressmap
//在项目入口文件 import Vue from 'vue' import Addressmap from 'adc-addressmap' Vue.component('Addressmap', Addressmap) 若作为局部组件 //在某个组件中 import Addressmap from 'adc-addressmap' export default { ... components: { Addressmap}, ... }この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がVue領域選択コンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。