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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
详解js类型判断
May 22 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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 获取页面中指定内容的实现类
2014/01/23 PHP
培养自己的php编码规范
2015/09/28 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
uni app仿微信顶部导航条功能
2019/09/17 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python版简单工厂模式
2017/10/16 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
大学英语专业求职信
2014/06/21 职场文书
《司马光》教学反思
2016/02/22 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Python pyecharts绘制条形图详解
2022/04/02 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS