Die Vue+Mint-Benutzeroberfläche ermöglicht das gleitende Löschen auf dem Mobiltelefon

Dieses Mal präsentiere ich Ihnen die Vue+Mint-Benutzeroberfläche zum gleitenden Löschen auf dem Mobiltelefon Welche Vorsichtsmaßnahmen gibt es für die Verwendung der Vue+Mint-Benutzeroberfläche zum gleitenden Löschen auf dem Mobiltelefon? Im Folgenden sehen wir uns praktische Fälle an.

In Bezug auf die Benutzeroberfläche von Mint gibt es Probleme, z. B. dass die Dokumentation nicht genau und detailliert genug ist, die Komponenten etwas rau sind und die Funktionen nicht perfekt genug sind. Außerdem hat es den Vorteil, dass es stark komponentenorientiert und klein ist Größe.

InstallierenMint-Benutzeroberfläche:

# Vue 1.x 
npm install mint-ui@1 -S 
# Vue 2.0 
npm install mint-ui -S

Komponenten einführen:

// 引入全部组件 
import Mint from 'mint-ui'; 
import 'mint-ui/lib/style.css' 
Vue.use(Mint); 
// 按需引入部分组件 
import { CellSwipe } from 'mint-ui'; 
Vue.component(CellSwipe.name, CellSwipe);

API aus dem Dokument extrahieren, der Slot lautet wie folgt:

Codebeispiel:

<ul class="list"> 
 <li class="item" v-for="section in sectionList"> 
  <mt-cell-swipe 
   :right="[ 
    { 
     content: &#39;删除&#39;, 
     style: { background: &#39;#ff7900&#39;, color: &#39;#fff&#39;}, 
     handler: () => deleteSection(section.PartId) 
    } 
   ]"> 
   <p class="section">{{section.PartName}}</p> 
   <p class="teacher">{{section.TeacherName}}</p> 
  </mt-cell-swipe> 
 </li> 
</ul>

:right kann mehr als eine Schaltfläche definieren, oder Sie können den Standardstil von CellSwipe selbst ändern

Effektanzeige:

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

Empfohlene Lektüre:

So generieren Sie Zufallsdaten mit Mockjs

Post-Request in Vue verwenden (mit Code)

Das obige ist der detaillierte Inhalt vonDie Vue+Mint-Benutzeroberfläche ermöglicht das gleitende Löschen auf dem Mobiltelefon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!