Verwenden Sie mint-ui, um eine dreistufige Verknüpfung auf dem Mobiltelefon zu erstellen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von mint-ui zur Herstellung einer dreistufigen Verknüpfung auf dem Mobiltelefon vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Tatsächlicher Effekt

Dreistufige Verknüpfung mint-ui picker.png

2. Zuerst müssen Sie Daten herunterladen, die chinesische Provinzen, Städte, Bezirke und Landkreise

wie folgt enthalten:
(Diese Adresse enthält Verknüpfungsdaten der zweiten Ebene und Verknüpfungsdaten der dritten Ebene , und Verknüpfungsdaten der vierten Ebene usw., finden Sie, was Sie brauchen)
(bessere Daten in China, es wird empfohlen, diese zu verwenden)

3 >

werden hauptsächlich verwendet. Die Picker-Komponente von Mint-UI. Informationen zur Verwendung von Mint-UI finden Sie auf der offiziellen Website

Ⅰ, der HTML-Komponente

<p>
 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
 <p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</p>

Ⅱ , Komponentenmethode

<script>
 import { Picker } from 'mint-ui';
 import myaddress from '../../../static/address3.json' //引入省市区数据
 export default {
 name: '',
 components: {
  'mt-picker': Picker
 },
 props: {},
 data () {
  return {
  myAddressSlots: [
   {
   flex: 1,
   defaultIndex: 1, 
   values: Object.keys(myaddress), //省份数组
   className: 'slot1',
   textAlign: 'center'
   }, {
   pider: true,
   content: '-',
   className: 'slot2'
   }, {
   flex: 1,
   values: [],
   className: 'slot3',
   textAlign: 'center'
   },
   {
   pider: true,
   content: '-',
   className: 'slot4'
   },
   {
   flex: 1,
   values: [],
   className: 'slot5',
   textAlign: 'center'
   }
  ],
  myAddressProvince:'省',
  myAddressCity:'市',
  myAddresscounty:'区/县',
  }
 },
 created() {
 },
 methods: {
  onMyAddressChange(picker, values) {
  if(myaddress[values[0]]){ //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
   picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
   picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
   this.myAddressProvince = values[0];
   this.myAddressCity = values[1];
   this.myAddresscounty = values[2];
  }
  },
 },
 mounted(){
  this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
  this.myAddressSlots[0].defaultIndex = 0 
  // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
  //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
  });
 }
 }
</script>

siehe Artikel vue mint- ui realisiert eine 4-Ebenen-Verknüpfung von Provinzen, Gemeinden und Straßen (vierstufige Verknüpfung des Mint-UI-Pickers)

Ich glaube, das haben Sie Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre

vue-cli führt domänenübergreifende Anfragen aus

Detaillierte Erläuterung praktischer Fälle von Webpack+Loader

Das obige ist der detaillierte Inhalt vonVerwenden Sie mint-ui, um eine dreistufige Verknüpfung auf dem Mobiltelefon zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!