vue插件集合18：vue实现长按删除方法

ThatITs

已于 2022-02-24 13:53:44 修改

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js基础 vue vue插件集合文章标签：删除 vue

于 2019-03-11 11:55:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39603448/article/details/88391199

vue 同时被 3 个专栏收录

34 篇文章

订阅专栏

vue插件集合

19 篇文章

订阅专栏

js基础

11 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的列表项触摸事件处理案例，通过在template中利用v-for遍历数据数组，并结合@touchstart和@touchend事件，实现了列表项的长按确认删除功能。文章详细展示了如何在methods中定义touchin和cleartime方法来控制定时器，以判断用户的长按行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：template中

<div v-for="(item,index) in arr" :key="item.id" @touchstart.prevent="touchinUk(index)"  @touchend.prevent="cleartime(index)">
		<div>
			<p>{{item.address}}</p>
			<p>备注：{{item.remarks}}</p>
		</div>
		<div>
			<i class="iconfont icon-gengduo"></i>
		</div>
</div>

2：data

arr: [{
		address: "0X21458151815165146156610561056-1",
		remarks: "imtoken"
	}, {
		address: "0X21458151815165146156610561056-2",
		remarks: "imtoken"
	},
	{
		address: "0X21458151815165146156610561056-3",
		remarks: "imtoken"
	},
],

3：methods

touchin(index) {
	console.log(index)
	clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
	this.Loop = setTimeout(function() {
		this.$dialog.confirm({
			message: '是否删除地址'
		}).then(() => {
			console.log("删除")
			this.arr.splice(index, 1);
		}).catch(() => {
			// on cancel
			console.log("不删")
		});


	}.bind(this), 1000);
},
cleartime(index) {
	// 这个方法主要是用来将每次手指移出之后将计时器清零
	clearInterval(this.Loop);
},