Using mint-ui in vue-JS Tutorial-php.cn

This time I will bring you the use of mint-ui in vue, what are the precautions for using mint-ui in vue. The following is a practical case, let's take a look.

The use of mint-ui in vue is for your reference. The specific content is as follows

First put the mint-ui Chinese document

Recently in Using mint-ui, I found that the explanations of some plug-ins were not very detailed, and the codes used in some examples could not be found. The sharing on github contains all markdown files, and the content is the online document

I happen to be using it myself. The information I can find online is not very detailed, so I write it myself. Keep
updating...emmmmm, it should be okay, I'm so lazy. Hope it helps others.

Introduce the features of mint-ui

Feature introduction

1. How to use cellFirst throw a picture ↓

When doing

switch

, I want to make text and switch on both sides of the list. The effect couldn't come out, and I found that there were many people like me who were desperately trying to find the switch documentation and find switch-related information. Then actually, you should use cell.

<a href="https://www.php.cn/wiki/132.html" target="_blank"><mt-cell title="开关状态">
 <mt-switch v-model="openValue" @change="changeStatus"></mt-switch>
</mt-cell></a>

Copy after login

Use the cell layout and combine it with switch. produces the following results.

2.Use Infinite scroll with Navbar##Navbar is like this↓

Infinite scroll is like this ↓

Combining the two, the Infinite scroll is nested in

, and then the effect will appear.

It’s simply purple.

<mt-navbar v-model="selected" >
 <mt-tab-item id="1">选项一</mt-tab-item>
 <mt-tab-item id="2">选项二</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
 <mt-tab-container-item id="1">
 <p v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10"
  class="content"
 >
 </p>
 </mt-tab-container-item>
 <mt-tab-container-item id="2">
 <p v-infinite-scroll="loadMoreReceive"
  infinite-scroll-disabled="loadingReceive"
  infinite-scroll-distance="10"
  class="content"
 >
 </p>
 </mt-tab-container-item>
</mt-tab-container>

Copy after login

The basic page will appear.

One small problem is that this is a page and the scroll bars are shared. In other words, after you pull out several pages of data in tab one, and then go to tab two, the position of the scroll bar will not change, and the content of your tab two will be pulled out for many pages of data. If a tab has less data, it will affect the data loading of other tabs.

After searching for this problem for a long time, I finally found a simple solution. In Infinite-Scroll, add a

v-if=selected == id

, combine Infinite-scroll with the id and selected of the tab, and only when the selected selected corresponds to the id, the corresponding Infinite-Scroll.

The code of Infinite-Scroll is as follows:

<p v-infinite-scroll="loadMore"
 infinite-scroll-disabled="loading"
 infinite-scroll-distance="10"
 class="content"
 v-if="selected == 1"
>

Copy after login

Modify the v-if conditions as needed.

The method bound to v-infinite-scroll will be executed for the first time after vue is mounted and before

before

. No additional calls are required.

3.Picker, three-level address linkage

这里有个很简洁的三级联动，之前要用的时候没找到。自己写的一个，好麻烦。先放图

首先获取地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
getRegion(){
var root=this;

http.get("/region").then(function (data) {
root.regionArr=data.data.data;

for(var i=0;i<root.regionArr.length;i++){
  root.region_province[i]=root.regionArr[i].value;
}

for(var i=0;i<root.regionArr[0].children.length;i++){
  root.region_city[i]=root.regionArr[0].children[i].value;
}

for(var i=0;i<root.regionArr[0].children[0].children.length;i++){
  root.region_zone[i]=root.regionArr[0].children[0].children[i].value;
}
root.region=[
  {
  flex: 1,
  values: root.region_province,
  textAlign: 'left',
  className:'picker_Slot'
  },
  {
  pider: true,
  content: '-',
  className: 'slot2'
  },
  {
  flex: 1,
  values: root.region_city,
  textAlign: 'center',
  className:'picker_Slot'
  },
  {
  pider: true,
  content: '-',
  className: 'slot2'
  },
  {
  flex: 1,
  values: root.region_zone,
  textAlign: 'right',
  className:'picker_Slot'
  }
]
});
},
Copy after login

然后设置三级地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
onValuesChange(picker, values) {
var root=this;
var str_1=[];
var str_2=[];
for(var i in root.regionArr){
// 获取省，并重置市级名称
if(root.regionArr[i].value == values[0]){
  for(var j in root.regionArr[i].children){
  str_1.push(root.regionArr[i].children[j].value);
  // 获取市级，并重置区级的名称
  if(root.regionArr[i].children[j].value == values[1]){
   // 当市级下不存在区名市，置空。
   if(root.regionArr[i].children[j].children != null){
   for(var k in root.regionArr[i].children[j].children){
    str_2.push(root.regionArr[i].children[j].children[k].value);
   }
   }else{
   str_2.push(" ");
   }
  }
  }
  picker.setSlotValues(1, str_1);
  picker.setSlotValues(2, str_2);
}
}
// 赋值，初始时置为上一页返回的值
root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]);
root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]);
root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]);
}
Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular HMR功能实现方法（附代码）

mint-ui实现三级联动案例分享

The above is the detailed content of Using mint-ui in vue. For more information, please follow other related articles on the PHP Chinese website!