Comment utiliser Mint-UI dans Vue

Cette fois, je vais vous expliquer comment utiliser mint-ui dans vue. Quelles sont les précautions lors de l'utilisation de mint-ui dans vue. Voici des cas pratiques, jetons un coup d'œil.

Cet article présente l'exemple d'utilisation de mint-ui dans vue. J'aimerais le partager avec vous :

Mettez d'abord la menthe. -ui Document chinois

J'ai utilisé mint-ui récemment et j'ai constaté que les explications de certains plug-ins ne sont pas très détaillées et que les codes utilisés dans certains exemples sont introuvables. Le partage sur github contient tous les fichiers markdown, et le contenu est le document en ligne

Il se trouve que je l'utilise moi-même. Les informations que je peux trouver en ligne ne sont pas très détaillées, donc je les écris moi-même. Continuez à mettre à jour... emmmmm, ça devrait aller, je suis tellement paresseux. J'espère que cela pourra aider les autres.

Présentation des fonctionnalités de mint-ui

Introduction aux fonctionnalités

1. Mint UI contient de riches composants CSS et JS, qui peuvent Répondez aux besoins quotidiens de développement mobile. Grâce à lui, vous pouvez rapidement créer une page avec un style unifié et améliorer l'efficacité du développement.

2. Véritable chargement des composants à la demande. Vous pouvez charger uniquement les composants déclarés et leurs fichiers de style, sans vous soucier de la taille trop importante du fichier.

3. En tenant compte du seuil de performances du terminal mobile, Mint UI utilise CSS3 pour gérer diverses animations afin d'éviter un redessinage et un réarrangement inutiles du navigateur, afin que les utilisateurs puissent bénéficier d'une expérience fluide. expérience.

4. S'appuyant sur la solution de composantisation efficace de Vue.js, Mint UI est légère. Même si tous sont importés, la taille du fichier compressé n'est que d'environ 30 Ko (JS + CSS) gzip.

Cette bibliothèque de composants convient au développement de pages mobiles basées sur Vue.

1. Utilisation du portable

Laissez-moi d'abord vous montrer une photo↓

Je fais switch, je souhaite créer du texte et basculer des deux côtés de la liste. L'effet n'a pas pu se produire et j'ai découvert que beaucoup de gens comme moi essayaient désespérément de trouver la documentation du commutateur et de trouver des informations relatives au commutateur. Alors en fait, vous devriez utiliser le cellulaire.

<mt-cell title="开关状态">
  <mt-switch v-model="openValue" @change="changeStatus"></mt-switch>
</mt-cell>

Utilisez la disposition des cellules et combinez-la avec le commutateur. produit les résultats suivants.

2. Le défilement infini est utilisé en combinaison avec Navbar.

La barre de navigation est comme ça↓

Le défilement infini est comme ça↓

Combiner les deux consiste à imbriquer le parchemin infini à l'intérieur de <mt-tab-container-item id="1"></mt-tab-container-item>, puis l'effet sortira.

C’est tout simplement violet.

<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>

La page de base apparaîtra.

Un petit problème c'est qu'il s'agit d'une page et que les barres de défilement sont partagées. En d'autres termes, après avoir extrait plusieurs pages de données dans l'onglet un, puis passé à l'onglet deux, la position de la barre de défilement ne changera pas et le contenu de votre onglet deux sera extrait pour plusieurs pages de données. Si un onglet contient moins de données, cela affectera le chargement des données des autres onglets.

Après avoir longuement cherché ce problème, j'ai finalement trouvé une solution simple. Dans Infinite-Scroll, ajoutez un v-if=selected == id et combinez Infinite-scroll avec l'identifiant de l'onglet et sélectionné. Lorsque la sélection sélectionnée correspond à l'identifiant, le Infinite-Scroll correspondant sera effectué.

Le code d'Infinite-Scroll est le suivant :

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

Modifiez les conditions v-if selon vos besoins.

La méthode liée à v-infinite-scroll sera exécutée pour la première fois après le montage de vue et avant, et n'a pas besoin d'être appelée séparément.

3.Picker, liaison d'adresses à trois niveaux

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

首先获取地址

getRegion(){
  var root=this;
  <!-- 通过/region 接口获取三级地址，然后存入regionArr -->
  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'
      }
    ]
  });
},

然后设置三级地址

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]);
}

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

推荐阅读：

怎样使用JS判断当前页面是否有滚动条

常用的JS排序算法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!