mint-uiを活用して地方自治体で3段階の連携効果を実現-jsチュートリアル-php.cn

mint-uiを活用して地方自治体で3段階の連携効果を実現

亚连

リリース： 2018-06-06 15:51:48

オリジナル

1977 人が閲覧しました

それでは、mint-uiを使って地方自治体の3段階連携効果を実現するサンプルコードを紹介します。参考になると思います。

引用されたプラグイン: Ele.me の mint-ui コンポーネントのピッカー機能。特定の API については、公式 Web サイトの説明を参照してください: http://mint-ui.github.io/docs/#/zh-cn2 /picker

背景: このプロジェクトでは、州、都市、地域の選択カスケード効果を作成する必要があります。gayhub で調べて、各機能が完成しており、デザインがプロジェクトのスタイルに似ているため、mint-ui コンポーネントを使用することにしました。

具体的な実装:

公式 Web サイトの例を読むことで、おそらくこのコンポーネントの使用法を知ることができます:

vue でコンポーネントを書き込みます:

このコンポーネントに渡されたデータスロットと、その変更時にイベントがトリガーされたことがわかります: onValuesChange()。コンポーネントを使用します

内にslotsとonValuesChangeを登録することで実現できます。以下は公式サイトの例です:

export default {
 methods: {
 onValuesChange(picker, values) {
 if (values[0] > values[1]) {
 picker.setSlotValue(1, values[0]);
 }
 }
 },
 data() {
 return {
 slots: [
 {
  flex: 1,
  values: [&#39;2015-01&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;],
  className: &#39;slot1&#39;,
  textAlign: &#39;right&#39;
 }, {
  pider: true,
  content: &#39;-&#39;,
  className: &#39;slot2&#39;
 }, {
  flex: 1,
  values: [&#39;2015-01&#39;, &#39;2015-02&#39;, &#39;2015-03&#39;, &#39;2015-04&#39;, &#39;2015-05&#39;, &#39;2015-06&#39;],
  className: &#39;slot3&#39;,
  textAlign: &#39;left&#39;
 }
 ]
 };
 }
};

ログイン後にコピー

実際の運用では、ピッカーを使って州、市、地域を選択したいとき、最大の問題は、それができないことです。プラグインのデータ形式に準拠したデータが見つかったので、Baidu から省、市、地域のデータをスクレイピングして、それを処理する関数を作成しました。共有します:

onProvinceChange(picker, values) {
   
   this.province = picker.getValues()[0]
   var cityArr = [];
   for(var key in provinceCity[this.province]) {
   cityArr.push(key);
   }
   this.slots2[0].values = cityArr;
  },
  onCityChange(picker, values) {
   this.city = picker.getValues()[0]
   var countyArr = [];
   for(var key in provinceCity[this.province][this.city]) {
   countyArr.push(key);
   }
   this.slots3[0].values = countyArr;
  },
  onCountyChange(picker, values) {
   
   this.county = picker.getValues()[0]
  },

ログイン後にコピー

3 つのデータセットそして、3 つの方法は上記の通りです。同様に、都市を選択する場合は、対応する地域を動的に一致させます。 3 つのレベルの連携の効果を実現できます。

以上が私があなたのためにまとめたものです。

vue2.0.jsを使用してマルチレベルリンケージセレクターを実装する

JavaScriptで同日の時刻を比較する

ReactおよびVueプロジェクトでSVGを使用する方法

以上がmint-uiを活用して地方自治体で3段階の連携効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。