So implementieren Sie die Funktion „Nach links wischen zum Löschen“ in der Mint-Benutzeroberfläche

Dieses Mal zeige ich Ihnen, wie Sie die Funktion „Linkes Wischen zum Löschen“ in der Mint-Benutzeroberfläche implementieren Ein praktischer Fall, schauen wir uns das gemeinsam 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.

Installieren

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

Detaillierte Erklärung der Top-Floating-Fixed-Funktion beim Gleiten mit Vue+jquery+lodash

Vue weiterVerwendung des Tick-Mechanismus Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Nach links wischen zum Löschen“ in der Mint-Benutzeroberfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!