vue 領域選択コンポーネントを使用する手順の詳細な説明

php中世界最好的语言
リリース: 2018-05-14 10:09:45
オリジナル
2294 人が閲覧しました

今回は、vue 領域選択コンポーネントを使用する手順について詳しく説明します。vue 領域選択コンポーネントを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

概要

は、主に全国の地域データの操作に使用されます。これには、省、市、区の3レベルのリンク、地域データの追加と

削除が含まれます。地域データを操作する場合、ツリー状の領域。コンポーネント以前にも選択は使用されていましたが、大量の地域データを操作すると描画が遅くなるため、別のデータ表示フォームとインタラクションフォームに変更し、このコンポーネントを思いつきました。

注: このコンポーネントは vue.js コンポーネントです

デモ

デモするにはここをクリックしてください

API

Props

パラメータtype エリアイベント
手順
配列 受信コンポーネントエリアデータ

イベントselected
名前パラメータ 説明
area コンポーネントの詳細な説明selectedregion

Props

area

area このパラメータは必須であり、コンポーネントの初期化時の領域データを表します。空にすることもできます。 area は複数のオブジェクトを含む

array

です。各オブジェクトのデータ構造は次のとおりです。

後で実際に使用すると、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 サイトの他の関連記事に注目してください。

推奨読書:

jQuery.i18n に基づいた Web フロントエンド国際化の実装


jQuery.i18n.properties js 国際化標準の実装方法

以上がvue 領域選択コンポーネントを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート