Verwenden Sie mint-ui, um dreistufige Verknüpfungseffekte in Provinzen und Gemeinden zu erzielen

Jetzt werde ich einen Beispielcode mit Ihnen teilen, der Mint-UI verwendet, um den dreistufigen Verknüpfungseffekt von Provinzen und Gemeinden zu erzielen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Referenz-Plug-in: die Auswahlfunktion in der Mint-UI-Komponente von Ele.me. Informationen zur spezifischen API finden Sie in der offiziellen Website-Beschreibung: http://mint-ui.github.io/docs/#. /zh-cn2/picker

Hintergrund: Das Projekt muss einen Kaskadeneffekt für die Provinz-Stadt-Region-Auswahl erzeugen. Ich habe auf gayhub nachgeschlagen und mich für die Verwendung von Mint-UI-Komponenten entschieden, da jede Funktion vollständig ist Das Design ähnelt unserem. Der Projektstil ist ähnlich.

Spezifische Implementierung:

Durch das Lesen der Beispiele auf der offiziellen Website können Sie wahrscheinlich die Verwendung dieser Komponente kennen:

Schreiben Sie die Komponente in Vue: 8d5e6240360940b4ba56819370fba1f2b0a88308a1fcec81e78d04c5268ef556

Das können wir sehen Diese Komponente Die übergebenen Datenslots und das Ereignis, das bei Änderung ausgelöst wird: onValuesChange(). Sie können dies also erreichen, indem Sie Slots und onValuesChange in der übergeordneten Komponente registrieren, die diese Komponente verwendet

Das Folgende ist die offizielle Website. Beispiel:

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

Im tatsächlichen Betrieb, als ich den Picker zum Auswählen von Provinzen, Städten und Regionen verwenden wollte, stellte ich fest, dass das größte Problem darin bestand, dass ich keine konformen Daten erhalten konnte an das Datenformat des Plug-Ins angepasst, also habe ich Provinz-, Stadt- und Regionsdaten aus Baidu extrahiert und eine Funktion geschrieben, um sie zu verarbeiten. Hier teile ich mit Ihnen:

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]
  },

Drei Datensätze und die drei Methoden sind wie oben. Passen Sie bei der Auswahl einer Provinz dynamisch die entsprechende Region an. Auf diese Weise wird der Effekt dynamisch angepasst Verknüpfung kann erreicht werden

Das Obige ist, dass ich es für alle zusammengestellt habe und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwendung von vue2.0.js zur Implementierung eines mehrstufigen Verknüpfungsselektors

Vergleich der Zeit desselben Tag durch JavaScript-Größe

So verwenden Sie SVG

in React- und Vue-Projekten

Das obige ist der detaillierte Inhalt vonVerwenden Sie mint-ui, um dreistufige Verknüpfungseffekte in Provinzen und Gemeinden zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!