场景:移动端,列表实现长按删除功能。
要求:长按tbs列表中的item删除该元素 项目技术栈,vue2+vant-ui
尝试 使用vant-ui气泡菜单。但是,其只支持点击时触发
以下使用vue自定义指令实现
1. 在src目录下创建自定义指令文件夹 directives
2 创建js文件并写入以下代码
import Vue from 'vue';
// 自定义指令长按触发回调函数
Vue.directive('longpress', {
bind: function (el, binding, vNode) {
if (typeof binding.value.callback !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器( 2秒后执行函数 )
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler(binding.value.params)
}, 1000)
}
}
// 取消计时器
let cancel = (e) => {
if (pressTimer !== null) {
clearTimeout(pressTimer)
pressTimer = null
}
}
// 运行函数
const handler = (e,params) => {
binding.value.callback(e, params); // 传递item参数
};
// 添加事件监听器
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)//在移动端要考虑 touchstart,touchend 事件
// 取消计时器
el.addEventListener('click', cancel)
el.addEventListener('mouseout', cancel)
el.addEventListener('touchend', cancel)//在移动端要考虑 touchstart,touchend 事件
el.addEventListener('touchcancel', cancel)//在移动端要考虑 touchstart,touchend 事件
},
// 当传进来的值更新的时候触发
componentUpdated(el, {value}) {
el.$value = value
},
// 指令与元素解绑的时候,移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
})
考虑到,长按事件触发位置是在列表中,自定义指令需要接收一个回调函数和一个对象。并将这个对象当做该回调函数的参数
3,引入自定义指令
在main.js文件中引入该文件。
import "@/directives" //自定义指令
Vue.config.productionTip = false
Vue.component('TextTitle',TextTitle)
Vue.use(Vant)
new Vue({
router: Router,
render: h => h(App),
}).$mount('#app')
4,在页面中使用该自定义指令
<template>
<van-tabs class="tabs" v-model="setActiveTab" @click="tabClick">
<van-tab
class="tab"
v-for="(item, index) in list"
:key="index + '-DY'"
title-active-color="#5574FF"
>
<template #title>
<div v-longpress="{callback:longpress,params:{item,index}}">{{ showDy(item) }}</div>
</template>
</van-tab>
</van-tabs>
</template>
在标签中使用自定义指令 v-longpress
<div v-longpress="{callback:longpress,params:{item,index}}">{{ showDy(item) }}</div>
该指令接收一个对象,对象中的callback 是长按执行的回调参数。params是该回调函数执行时的参数。注:callback,params。字段不可变更。如若变更请改变自定义指令代码。params只能是对象。以本章为例:longpress函数需要在methods中
//该函数在methods中声明
longpress(item){
let dyCode=this.list[item.index];
let name = this.showDy(dyCode);
Dialog.alert({
closeOnClickOverlay:true,
showCancelButton:true,
title: '提示',
message:`是否确认删除,"${name}"`,
}).then(() => {
if(dyCode.DY==0){
Notify({message: '无单元不能删除', type: 'warning'})
}else{
this.list= this.list.filter((element)=>element.DY!=dyCode.DY);
this.active = this.list.length - 1;
}
}).catch(() => {
//取消功能
})
},