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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
Express的路由详解
Dec 10 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
微信小程序中添加客服按钮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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
JS input 数字验证代码
2009/07/30 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python redis存入字典序列化存储教程
2020/07/16 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
乡文化站暑期培训方案
2014/08/28 职场文书
营运督导岗位职责
2015/04/10 职场文书
工作调动申请报告
2015/05/18 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
5行Python代码实现一键批量扣图
2021/06/29 Python