Vue 使用 Mint UI 实现左滑删除效果CellSwipe
作者：小白菜的博客 发布时间：2024-05-10 14:16:45
标签：vue,Mint,UI,左滑删除
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网站的支持！
来源：https://blog.csdn.net/qq_32963841/article/details/80103227
0
投稿猜你喜欢
需求描述最近在写一个图像标注小工具，其中需要用到一个缩略图列表，来查看文件夹内的图片文件。这里整理一个基于QListWidget实现的版本，- 函数形式：index_select( dim, index)参数：dim：表示从第几维挑选数据，类型为int值；index：表示从第一个参数
- 目录Maxwell简介Maxwell的配置与使用1.下载Maxwell安装包2.配置mysql，打开mysql binlog日志3.启动Ma
- 前言提示：这里可以添加本文要记录的大概内容：公司里B2B是通过WinSCP里SFTP与客户进行数据传输,WinSCP是一个Windows环境
- 初衷NumPy、Pandas、Matplotlib、SciPy 等可以说是最最最常用的 Python 库了。我们在使用 Python 库的时
- ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件，目前官方已经到2.x的版本了，但不支持IE9以下的浏览器，而
- 记录一下今天被坑了一下午的BUG就从半个月前说起吧当时...........................................
- 类代码：# -*- coding:gbk -*-import ConfigParser, osclass INIFILE: de
- 使用python生成随机验证码的方法有很多种，今天小编给大家分享两种方法，大家可以灵活运用这两种方法，设计出适合自己的验证码方法。方法一：利
- MaxDB和MySQL是独立的数据库管理服务器。系统间的协同性是可能的，通过相应的方式，系统能够彼此交换数据。要想在MaxDB和MySQL之
- 用户体验（User Experience，简称UE）是用户在使用产品过程中建立起来的一种纯主观感受。在基于Web的产品设计中，UE是一个相对
- 包括安装时提示有挂起的操作、收缩数据库、压缩数据库、转移数据库给新用户以已存在用户权限、检查备份集、修复数据库等 （一）挂起操作 在安装Sq
- 1、获取对象类型，基本类型可以用type()来判断。>>> type(123)<class 'int'
- 下面代码的功能是为了管理任务的，大家项目中有需要用到的，尽管拿去吧。 这个东西用于可以管理任务比如：今天我要做什么，做了没有，做了就打钩。&
- 前言Python 思想：“一切都是对象！”，最近发现python3和python2中print的用法有很多不同，python3中需要使用括号
- 目标在本节中，将学习根据立体图像创建深度图基础在上一节中，看到了对极约束和其他相关术语等基本概念。如果有两个场景相同的图像，则可以通过直观的
- 在我们编程过程中，经常会用到与时间相关的各种务需求，下面来介绍 golang 中有关时间的一些基本用法,我们从 time 的几种 type
- 问题jupyter notebook读入csv数据时出现错误“SyntaxError: (unicode error) ‘unicodees
- 先看要实现的饼图效果图方法一：使用seriesseries: [ { &
- 如下所示：pd.to_datetime(data[data['last_O_XLMC']==data['O_XLMC
