vue自定义指令的用法

上周有一个长按某一块文本弹出一个弹窗的需求,关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求,因为报告中很多页面都要使用到这个长按的姿势,所以自定义指令是最佳解决方法的首选。刚好借此机会学习自定义指令。
官网提供的全局自定义和组件自定义的例子,都很简单明了了告诉我们怎么使用:官网自定义例子链接

下面主要讲解我全局自定义指令的整个流程,整体思路与官网的一样,但是一般实际项目开发中要规范化自己的开发风格,这里主要是学习各种框架会使用一套方法来实现:
(1)longTap.js:这个文件主要用来实现主要的业务逻辑,即长按(touchstart,touchmove,touchend)事件的处理

//核心代码
export default {
//使用钩子函数inserted(被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中));此外还有=>(1)bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2)update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
(3)componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。(4)unbind:只调用一次,指令与元素解绑时调用。上面这些钩子函数可以根据自己所需场景进行选择。

  inserted (el, bind, vNode) {
    el.addEventListener('touchstart', event => {
    //按下去的逻辑代码
    }, false)
    
    el.addEventListener('touchmove', event => {
    //手指按下去移动的逻辑代码
    }, false)
    
    el.addEventListener('touchend', event => {
    //手指离开页面时的逻辑代码
    }, false)
  }
}

(2)add.js:这个文件主要用来实现添加longtap的指令

import LongTap from 'longTap'   //引入上面的longTap.js
Logntap.install = function (Vue, option) {
  Vue.directive('longtap', Longtap)
}
export default LongTap

(3)long-tap.js:这个文件一般放在plugins文件夹下面,到时要引入nuxt.config.js中

import Vue from 'vue'
import LongTap from 'add'

Vue.use(LongTap)

(4)在test.vue文件中使用指令v-longtap

<div v-longtap></div>

上面就是整个自定义指令的使用流程。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页