欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue移动端实现左滑编辑与删除的全过程

程序员文章站 2022-06-18 07:50:20
前言根据项目需要使用vue-touch 实现了一个vue移动端的左滑编辑和删除功能,废话不多说,先看效果图,然后上代码吧!方法如下:第一步:安装vue-touch第二步:main.js 中引入第三步:...

前言

根据项目需要使用 vue-touch 实现了一个vue移动端的左滑编辑和删除功能,废话不多说,先看效果图,然后上代码吧!

vue移动端实现左滑编辑与删除的全过程

方法如下:

第一步:安装   vue-touch 

第二步:main.js 中引入

第三步:使用(用v-touch包住你要左滑删除的内容)

第四步:定义变量,以及方法,下面代码可直接拷贝,将不需要的删除换成自己的,需要的留着就行

style 

我只贴出了上面代码的css样式,根据需求自行删减吧,有需要的留着,不需要的删除,需要改变的自行修改

总结

有需要的拿走根据自己的需求稍做修改即可,写的很详细,到此这篇关于vue移动端实现左滑编辑与删除的全过程的文章就介绍到这了,更多相关vue左滑编辑与删除内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: vue 左滑 删除