脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 使用 Mint UI 实现左滑删除效果

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

 更新时间：2018年04月27日 09:36:40   作者：小白菜的博客  
这篇文章主要介绍了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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 解决router.beforeEach()动态加载路由出现死循环问题

    解决router.beforeEach()动态加载路由出现死循环问题

    这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue中实现回车键登录功能

    vue中实现回车键登录功能

    这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中，这篇文章主要介绍了Vue中的侦听器watch,需要的朋友可以参考下
    2022-10-10
  • Element-UI中<el-cascader />回显失败问题的完美解决

    Element-UI中<el-cascader />回显失败问题的完美解决

    我们在使用el-cascader控件往数据库保存的都是最后一级的数据,那如果再次编辑此条数据时,直接给el-cascader传入最后一级的数据,它是不会自动勾选的,下面这篇文章主要给大家介绍了关于Element-UI中<el-cascader />回显失败问题的完美解决办法,需要的朋友可以参考下
    2023-01-01
  • vue定时器清除不掉,导致功能频繁执行问题

    vue定时器清除不掉,导致功能频繁执行问题

    这篇文章主要介绍了vue定时器清除不掉,导致功能频繁执行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vuex数据持久化的两种实现方案

    vuex数据持久化的两种实现方案

    在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下
    2021-07-07
  • vue动态绑定多个类名方法详解(:class动态绑定多个类名)

    vue动态绑定多个类名方法详解(:class动态绑定多个类名)

    vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下
    2022-11-11
  • VeeValidate在vue项目里表单校验应用案例

    VeeValidate在vue项目里表单校验应用案例

    这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • 对VUE中的对象添加属性

    对VUE中的对象添加属性

    今天小编就为大家分享一篇对VUE中的对象添加属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue开发树形结构组件(组件递归)

    vue开发树形结构组件(组件递归)

    这篇文章主要为大家详细介绍了vue开发树形结构组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论