Comment implémenter la fonction de balayage vers la gauche pour supprimer dans Mint UI-js tutoriel-php.cn

Comment implémenter la fonction de balayage vers la gauche pour supprimer dans Mint UI

php中世界最好的语言

Libérer： 2018-05-15 10:51:32

original

2242 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter la fonction de balayage vers la gauche pour supprimer dans Mint UI. Quelles sont les précautions pour implémenter la fonction de balayage vers la gauche pour supprimer dans Mint UI. Voici un cas pratique, jetons un coup d'œil ensemble.

Concernant Mint UI, il y a des problèmes tels que la documentation n'est pas assez précise et détaillée, les composants sont légèrement approximatifs et les fonctions ne sont pas assez parfaites. Elle présente également l'avantage d'être hautement composée de composants et de petite taille. taille.

InstallerMint UI :

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

Copier après la connexion

Introduire les composants :

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

Copier après la connexion

Extraire l'API du document, le Slot est le suivant :

Exemple de code :

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

Copier après la connexion

: right peut définir plusieurs boutons, ou vous pouvez modifier vous-même le style par défaut de CellSwipe

Affichage de l'effet :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Explication détaillée de la fonction fixe flottante supérieure lors du glissement avec vue+jquery+lodash

Vue Utilisation du mécanisme nextTick Explication détaillée

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!