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 相关文章推荐
JavaScript中为元素加上name属性的方法
May 09 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
js仿微博动态栏功能
Feb 22 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
微信小程序中添加客服按钮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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP中文乱码解决方案
2015/03/05 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python实现数据写入excel表格
2018/03/25 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
毕业论文评语大全
2014/04/29 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
公司股东出资证明书
2014/11/01 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL