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


Posted in Javascript onApril 27, 2018

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如下:

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

代码示例:

<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 

总结

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

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript类型转换示例
Apr 29 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
微信小程序中添加客服按钮contact-button功能
Apr 27 #Javascript
Node.js文件编码格式的转换的方法
Apr 27 #Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
基于Vue实现拖拽效果
Apr 27 #Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 #Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 #Javascript
使用Vue动态生成form表单的实例代码
Apr 26 #Javascript
You might like
解析php防止form重复提交的方法
2013/07/01 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python模块常用四种安装方式
2020/10/20 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
为什么使用接口?
2014/08/13 面试题
项目副经理岗位职责
2013/12/30 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
消费者理赔投诉书
2015/07/02 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL