Vue定义一个长按指令-一一网

常见指令

v-text：元素的 innerText 属性，只能用在双标签中，和{{ }}效果是一样的，使用较少。
v-html：元素的 innerHTML，其实就是给元素的innerHTML赋值。
v-show：元素的显示与隐藏，基于 css 样式的切换。如果确定要隐藏，会给元素的 style 加上display: none。
v-else-if：前一个相邻元素必须有 v-if 或 v-else-if。
v-else：前一个相邻元素必须有 v-if 或 v-else-if，如果 v-if 和 v-else-if 都有对应的表达式，则 v-else 可以直接写。
v-if：元素的插入和移除操作，相当于对元素的销毁和创建。如果表达式的值为 false，会留下一个  作为标记，若未来 v-if 的值是 true 了，就在这里插入元素（如果 if 有 else 就不要单独留坑了）。
v-for：用于循环渲染一组数据(数组或对象)。必须使用特定语法：v-for="item in arrs“。注：当 v-for 和 v-if 同处于一个节点时，v-for 的优先级比 v-if 更高。即 v-if 将运行在每个 v-for循环中
v-on：主要用来监听 dom 时间，然后执行一些操作。简写为【@】
v-model：用于 input/textarea 等表单控件上创建双向数据绑定。
v-bind：动态的绑定一个或多个属性，常用于绑定 class，style，href 等。
v-once：组件和元素只渲染一次，当数据发生变化，也不会重新渲染。

指令的钩子函数

bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
update：组件更新时调用。
componentUpdated：组件与子组件更新时调用。
unbind：指令与元素解绑时调用，只执行一次。

自定义指令

Vue全局自定义长按指令

    Vue.directive('longpress', function(el, binding) {
    	var timer = null
    	var start = function(e) {
    		// 如果是点击事件，不启动计时器，直接返回
    		if (e.type === 'click') {
    			return
    		}
    		if (timer == null) {
    			// 创建定时器 ( 2s之后执行长按功能函数 )
    			timer = setTimeout(function() {
    				//执行长按功能函数
    				// console.log(first, 'asdasdasddddd');
    				binding.value()
    			}, 800)
    		}
    	}
    	var cancel = function() {
    		if (timer !== null) {
    			clearTimeout(timer)
    			timer = null
    		}
    	}
    
    	// 添加事件监听器
    	el.addEventListener('mousedown', start)
    	el.addEventListener('touchstart', start)
    
    	// 取消计时器
    	el.addEventListener('click', cancel)
    	el.addEventListener('mouseout', cancel)
    	el.addEventListener('touchend', cancel)
    	el.addEventListener('touchcancel', cancel)
    })
    
复制代码