vue实现左滑删除的功能

最新推荐文章于 2024-07-02 16:15:40 发布

翟敏1201

最新推荐文章于 2024-07-02 16:15:40 发布

阅读量2.3k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chaitong2204/article/details/82252599

版权

本文介绍如何使用Mint UI在Vue项目中实现类似QQ的左滑删除功能，包括组件引入、列表循环及删除操作的方法调用。

摘要由CSDN通过智能技术生成

利用Mint UI 实现类似于qq的左滑删除的功能

1.首先在组件内引入模块，我是局部引入

import { CellSwipe } from 'mint-ui'
Vue.component(CellSwipe.name, CellSwipe

2.以下是循环列表里的内容

<ul v-if="carousor">
          <li v-for="item in allcarous">
            <mt-cell-swipe
              :right="[
              {
                content: 'Delete',
                style: { background: 'red', color: '#fff' },
                handler: () => deleteSection(item.id)
              }
            ]">
              <div style="position: absolute;left: 0px;">
                <p class="all_title"><span class="point">●</span>{
  {item.calenderName}}</p>