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

亦凉 2022-05-29 03:47 175阅读 0赞

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);

从 [文档][Link 1]中摘录API，Slot如下：

![SouthEast][]  
代码示例：

<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的默认样式  
效果展示：

![SouthEast 1][]

[Link 1]: https://mint-ui.github.io/docs/#/en2/cell-swipe
[SouthEast]: /images/20220529/7efe06ef512f46688311159ab99ac7e0.png
[SouthEast 1]: /images/20220529/830d8429b3e84b948138732bce24e6da.png

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现左滑删除功能

*实现的效果** ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

向右看齐/ 2024年04月17日 15:42/ 0 赞/ 102 阅读

相关 vue中mint-ui使用

mint-ui 如何按需引入 cnpm i mint-ui -S 注意：npm下载出现问题（终端中出现Error红色提示，就得重新下载），用cnpm替换npm

骑猪看日落/ 2022年11月27日 03:17/ 0 赞/ 193 阅读

相关 UITableView左滑删除实现

UI层面需要做的事情为tableView设置好delegate后，需要实现以下delegate方法。允许左滑row - (BOOL)tableView

素颜马尾好姑娘i/ 2022年11月21日 15:12/ 0 赞/ 312 阅读

相关微信小程序左滑删除效果的实现

<view class="box"> <view class="item { {status ? '' :'active'}}"> <view c

心已赠人/ 2022年11月14日 14:52/ 0 赞/ 268 阅读

相关微信小程序左滑删除效果的实现

转载自：http://www.jianshu.com/p/07c4ddf8a3d3 今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，

清疚/ 2022年07月10日 04:29/ 0 赞/ 273 阅读

相关 vue mint-ui 使用手册

npm 安装推荐使用 npm 的方式安装，它能更好地和 [webpack][] 打包工具配合使用。 npm i mint-ui -S CDN 目前可以

骑猪看日落/ 2022年06月08日 14:51/ 0 赞/ 286 阅读

相关 Vue 使用 Mint UI 实现左滑删除效果（CellSwipe）

Mint UI 是饿了么开源的，基于 Vue.js 的移动端组件库。关于Mint UI，有文档不够准确详尽，组件略显粗糙，功能不够完善等问题；也有高度组件化，体积小等优点。

亦凉/ 2022年05月29日 03:47/ 0 赞/ 176 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

柔光的暖阳◎/ 2022年04月24日 06:36/ 0 赞/ 366 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

你的名字/ 2022年04月02日 04:24/ 0 赞/ 400 阅读

相关 vue-mint-ui简单使用

首先项目用到了mint-ui 安装 cnpm i mint-ui -S 然后按照官网的操作，将mint-ui导入main.js ![watermark_type_Zm

你的名字/ 2021年09月19日 11:02/ 0 赞/ 361 阅读