vue自定义指令 v-longpress长按触发方法
新建一个vue2项目,在components里面新建一个longpress.vue文件
设置按钮 指令v-longpress:3000="longpress"
,3000是毫秒参数
src/components/longpress.vue
<template>
<div class="box">
<!-- 单位毫秒:3000 -->
<button v-longpress:3000="longpress">长按</button>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
longpress(e) {
console.log("长按指令生效--", e);
},
},
};
</script>
<style scoped></style>
长按js自定义指令:按下时长小于3000毫秒属于点击,大于等于3000毫秒属于长按
src/directive/modules/longpress.js
// 长按
const longpress = {
bind: function (el, binding, vNode) {
let s = binding.arg * 1 || 1000
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
let num = 0
// 定义变量
let pressTimer = null
// 创建计时器( 2秒后执行函数 )
let start = (e) => {
if (e.type === 'click' && e.button !== 0) return;
if (pressTimer === null) {
pressTimer = setTimeout(() => {
num += 1
handler()
}, s)
}
}
// 取消计时器
let cancel = (e) => {
if (pressTimer !== null) {
if (num === 0) {
// 还未执行定时器
binding.value(false)
} else {
// 执行过定时器
num = 0
}
clearTimeout(pressTimer)
pressTimer = null
}
}
// 运行函数
const handler = (e) => {
binding.value(true)
}
// 添加事件监听器
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)
// 取消计时器
el.addEventListener('click', cancel)
el.addEventListener('mouseout', cancel)
el.addEventListener('touchend', cancel)
el.addEventListener('touchcancel', cancel)
},
// 当传进来的值更新的时候触发
componentUpdated(el, {
value
}) {
el.$value = value
},
// 指令与元素解绑的时候,移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default longpress
引入vue指令文件有两种方式:
方式一:使用require.context
自动导入,获取modules文件下的js文件,循环文件自动获取文件名当做指令名 ,xxx.default
做为指令函数,每次循环使用 Vue.directive
注册指令
方式二:直接把每个文件引入 import longpress from './modules/longpress.js'
src/directive/index.js
import Vue from 'vue'
import copy from './modules/copy.js'
import debounce from './modules/debounce.js'
import longpress from './modules/longpress.js'
// 方式1
const files = require.context('./modules', false, /.+\.js$/)
// 按模块引入
// files.keys(): 打印出来为['./focus.js','/loadmore.js']
files.keys().forEach(fileName => {
const directiveConfig = files(fileName) // 获取指令函数
const directiveName = fileName // 获取指令名
.replace(/^\.\//, '') // 去除开头的'./'
.replace(/\.\w+$/, '') // 去除文件扩展名
Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})
// // 方式2
// Vue.directive('copy', copy)
// Vue.directive('debounce', debounce)
// Vue.directive('longpress', longpress)
在main.js
里面引入import '@/directive/index.js' 文件
src/main.js
import '@/directive/index.js'
import App from './App.vue'
import Vue from 'vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')