Vue 使用 Mint UI 实现左滑删除效果CellSwipe


            Mint UI 是饿了么开源的，基于 Vue.js 的移动端组件库。

关于Mint UI，有文档不够准确详尽，组件略显粗糙，功能不够完善等问题；也有高度组件化，体积小等优点。

安装Mint UI：





# Vue 1.x 

npm install mint-ui@1 -S 

# Vue 2.0 

npm install mint-ui -S 



引入组件：





// 引入全部组件 

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，Slot如下：



代码示例：





<ul class="list"> 

 <li class="item" v-for="section in sectionList"> 

  <mt-cell-swipe 

   :right="[ 

    { 

     content: '删除', 

     style: { background: '#ff7900', color: '#fff'}, 

     handler: () => deleteSection(section.PartId) 

    } 

   ]"> 

   <p class="section">{{section.PartName}}</p> 

   <p class="teacher">{{section.TeacherName}}</p> 

  </mt-cell-swipe> 

 </li> 

</ul> 



:right可以定义不止一个按钮，也可以自行修改CellSwipe的默认样式

效果展示：



 

总结

以上所述是小编给大家介绍的Vue 使用 Mint UI 实现左滑删除效果CellSwipe，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！