ホームページ ウェブフロントエンド jsチュートリアル vue 領域選択コンポーネントを使用する手順の詳細な説明

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

May 14, 2018 am 10:09 AM
使用 ステップ コンポーネント

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

概要

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

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

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

デモ

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

API

Props

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

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

Props

area

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

array

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

1

2

3

4

5

6

7

<a href="https://www.php.cn/wiki/58.html" target="_blank">...

area: [

 {Name: '北京', ID: '01'},

 {Name: '南京', ID: '0401'},

 {Name: '西湖区', ID: '060105'}

],

...</a>

後で実際に使用すると、background が area の ID 値のみを返す場合があることがわかったので、ここでそのようにしました。最適化では、次のような ID の値のみを渡すことができます:

1

2

3

4

5

6

7

...

area: [

 {ID: '01'},

 {ID: '0401'},

 {ID: '060105'}

],

...

ログイン後にコピー

selected

selected は、コンポーネントによって内部的に発行されるイベントです。コンポーネントの外部でこのイベントをサブスクライブして、返される値を取得できます。この値は、コンポーネントによって現在選択されているすべての領域であり、戻り値は領域データを含む複数のオブジェクトで構成される配列であり、データ構造は area パラメーターと同じです

簡単な例

1

2

3

<strong>&lt;p&gt;

  &lt;addressmap :area=&quot;area&quot; @selected=&quot;selected&quot;&gt;&lt;/addressmap&gt;

&lt;/p&gt;</strong>

ログイン後にコピー

インストール use

npm install adc-addressmapグローバルコンポーネントとして使用する場合

1

2

3

4

5

6

7

8

9

10

11

12

//在项目入口文件

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

GoogleマップをiPhoneのデフォルト地図にする方法 GoogleマップをiPhoneのデフォルト地図にする方法 Apr 17, 2024 pm 07:34 PM

GoogleマップをiPhoneのデフォルト地図にする方法

この Apple ID は iTunes Store でまだ使用されていません: 修正 この Apple ID は iTunes Store でまだ使用されていません: 修正 Jun 10, 2024 pm 05:42 PM

この Apple ID は iTunes Store でまだ使用されていません: 修正

WeChat最新版へのアップグレード手順(WeChat最新版へのアップグレード方法を簡単にマスター) WeChat最新版へのアップグレード手順(WeChat最新版へのアップグレード方法を簡単にマスター) Jun 01, 2024 pm 10:24 PM

WeChat最新版へのアップグレード手順(WeChat最新版へのアップグレード方法を簡単にマスター)

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? Mar 18, 2024 pm 02:58 PM

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は?

iPhone の Safari ズームの問題: これで解決します iPhone の Safari ズームの問題: これで解決します Apr 20, 2024 am 08:08 AM

iPhone の Safari ズームの問題: これで解決します

ShazamアプリがiPhoneで動作しない:修正 ShazamアプリがiPhoneで動作しない:修正 Jun 08, 2024 pm 12:36 PM

ShazamアプリがiPhoneで動作しない:修正

iPhoneのスクリーンショットが機能しない: 修正方法 iPhoneのスクリーンショットが機能しない: 修正方法 May 03, 2024 pm 09:16 PM

iPhoneのスクリーンショットが機能しない: 修正方法

foob​​ar2000のダウンロード方法は? -foobar2000の使い方 foob​​ar2000のダウンロード方法は? -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foob​​ar2000のダウンロード方法は? -foobar2000の使い方

See all articles