Vue中 实现自定义指令(directive)及应用场景

一、Vue2

1. 指令钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind
    只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted
    被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update
    所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。
  • componentUpdated
    指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind
    只调用一次,指令与元素解绑时调用。
javascript 复制代码
Vue.directive('gqs',{
    bind() {
      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
      console.log('bind triggerd')
    },
    inserted() {
      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
      console.log('inserted triggerd')
    },
    updated() {
      // 所在组件的`VNode`更新时调用.
      console.log('updated triggerd')
    },
    componentUpdated() {
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
      // 只调用一次,指令与元素解绑时调用.
      console.log('unbind triggerd')
    }
  })

1.2 钩子函数参数

指令钩子函数会被传入以下参数:

  • el 指令所绑定的元素,可以用来直接操作 DOM
  • binding 一个对象,包含以下属性:
    name:指令名,不包括 v- 前缀。
    value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
    modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
    vnode:Vue 编译生成的虚拟节点。
    oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

1.3 指令简写

当绑定指令的元素的状态发生改变时(这里主要是指元素绑定的vue数据发生改变时),仍然会触发指令中的 update 函数.

那么我们可以利用指令的简写形式,来做一些有意思的事情.
核心思想就是:
当一个HTML元素设置了指令,那么在这个元素的状态发生改变时(由vue数据变化带来的带来的监控),我们可以利用update()钩子函数监控到这个元素的变化,然后根据需要做一些其他的事情.

案例:使用官方指定的指令简写模式:

javascript 复制代码
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

当元素的状态发生改变时,就会触发 update

1.4 小结几点

  • 使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
  • Vue.directive('focus') 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
  • 在使用指令的HTML元素上,我们需要加上 v-
html 复制代码
<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点"/> 
  • Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.

el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input

el 就等价于 document.getElementById('el.id')...

可以利用 $(el) 无缝连接 jQuery

2. vue-cli中定义全局指令

2.1 main.js

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
Vue.directive('my-color',(el) => {
  el.style.color = 'red'
  el.style.backgroundColor = 'yellow'
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
2.2 相应组件
html 复制代码
<template>
  <input type="text" v-my-color>
</template>
2.3 实现效果

3. vue-cli中定义局部指令

3.1 相应组件
javascript 复制代码
<template>
	<input type="text" v-model="text" placeholder="仅可填入正整数数字"	
		v-my-text="{key:'text',maxval:'1000'}">
</template>
<script>
export default {
  data(){
    return {
      text:'',
    }
  },
directives:{
    myText:{
      bind(el,binding,vnode) {
        el.handler = function() {
          el.value = el.value.replace(/\D+/g, '')
          //根据设置的规则,进行判断处理
          if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){
            el.value = parseInt(binding.value.maxval);
          }
          //根据指令调取位置设置的规则Key,进行全局上文赋值
          vnode['context'][binding.value.key] = el.value;
        }
        el.addEventListener('input', el.handler)
      },
    },
  }
}
</script>
3.2 简写模式
javascript 复制代码
<template>
	<input type="text" v-model="text" placeholder="仅可填入正整数数字"	
		v-my-text="{key:'text',maxval:'1000'}">
</template>
<script>
export default {
  data(){
    return {
      text:'',
    }
  },
  directives:{
    myText:(el,binding,vnode) => {
      el.handler = function() {
      el.value = el.value.replace(/\D+/g, '')
      //根据设置的规则,进行判断处理
      if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){
        el.value = parseInt(binding.value.maxval);
      }
      //根据指令调取位置设置的规则Key,进行全局上文赋值
      vnode['context'][binding.value.key] = el.value;
      }
      el.addEventListener('input', el.handler)
    },
  }, 
}
</script>

4. 应用场景

4.1 表单校验

背景:开发中遇到的表单输入,常常会限制特殊字符的输入 以满足安全性测试的要求。

javascript 复制代码
// emoji.js
import Vue from 'vue';

// 禁止输入特殊字符
Vue.directive('emoji', {
  bind: function (el, binding, vnode) {
    // 正则规则可根据需求自定义
    const regRule = /[`~^!@#$€£₤%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~!......@#¥¥%*()\-+={}|《》?:""【】'']/im;
    let $inp = findEle(el, 'input') || findEle(el, 'textarea');
    el.$inp = $inp;
    $inp.handle = function (event) {
      let val = $inp.value;
      $inp.value = val.replace(regRule, '');
      trigger($inp, 'input');
    }
    $inp.addEventListener('keyup', $inp.handle);
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle);
  }
});
 
const findEle = (parent, type) => {
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
};
 
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents');
  e.initEvent(type, true, true);
  el.dispatchEvent(e);
};

在 main.js 中引入该自定义组件

javascript 复制代码
import '@/directives/emoji.js';

在组件中使用

在需要校验的输入框(多行文本框)加上 v-emoji 即可

javascript 复制代码
<el-input 
  v-emoji
  v-model="content" 
  placeholder="请输入">
</el-input>
4.2 一键 Copy的功能
  1. 首先建一个 js 文件(v-copy.js)。定义一个对象。( 指令实际就是一个对象 )
javascript 复制代码
import { Message } from 'ant-design-vue';

const vCopy = { // 名字爱取啥取啥
  /*
    bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值,也就是我们要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
    el.handler = () => {
      if (!el.$value) {
      // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意
        Message.warning('无复制内容');
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('复制成功');
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件,就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候,移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};

export default vCopy;
  1. 到这里,一键 Copy 的功能就实现了,最后再说一嘴怎么将自定义指令注册到全局:再新建一个 js ( directives.js )文件来注册所有的全局指令。
javascript 复制代码
import copy from './v-copy';
// 自定义指令
const directives = {
  copy,
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

3.最后,在 main.js 中这样引入

javascript 复制代码
import Vue from 'vue';
import Directives from './directives';

Vue.use(Directives);
4.3 按钮级别权限控制

权限控制分为页面级别和按钮级别,这两种思路基本是一致的。
页面级别: 用户登录后,获取用户role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后,在前端用v-if手动判断来区分不同权限对应的按钮的。。
按钮级别: 用户登录后,获取用户role,在前端用 v-if 或者封装一个自定义指令,手动判断来区分不同权限对应的按钮的。
思路:
登录: 当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户角色,用户权限,用户名等等信息)。
**权限验证:**通过token获取用户对应的role,自定义指令,获取路由meta属性里btnPermissions(注:meta.btnPermissions是存放按钮权限的数组,在路由表里配置),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。

javascript 复制代码
import Vue from 'vue'
    
/**权限指令**/
const has = Vue.directive('has', {
    bind: function (el, binding, vnode) {
        // 获取页面按钮权限
        let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
        if (!Vue.prototype.$_has(btnPermissionsArr)) {
            el.parentNode.removeChild(el);
        }
    }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
    let isExist = false;
    // 获取用户按钮权限
/**
    "buttons": [
            "cuser.detail",
            "cuser.update",
            "cuser.delete",
            "btn.User.add",
            "btn.User.remove",
            "btn.User.update",
            "btn.User.assgin",
            "btn.Role.assgin",
            "btn.Role.add",
            "btn.Role.update",
            "btn.Role.remove",
        ],
 */
    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
        return false;
    }
    if (value.includes(btnPermissionsStr)) {
        isExist = true;
    }
    return isExist;
};
export {has}
  1. 在main.js文件引入文件:
javascript 复制代码
import has from './public/js/btnPermissions.js';

2.页面中按钮只需加v-has即可:

javascript 复制代码
<el-button @click='editClick' type="primary" v-has>编辑</el-button>

二、Vue3指令钩子函数

  • created 元素初始化
  • beforeMount 指令绑定到元素后调用 只调用一次
  • mounted 元素插入父级dom调用
  • beforeUpdate 元素被更新前调用
  • updated 元素被更新后调用
  • beforeUnmount 元素移除前调用
  • unmounted 元素被移除后调用

vue2中的指令钩子函数有:

bind、inserted、update、componentUpdated、unbind

1.局部使用

接收两个参数

el:表示当前组件实例

dir:表示传入的参数以及函数

DirectiveBinding:与返回参数一致,使用来约束类型

javascript 复制代码
export interface DirectiveBinding<V = any> {
    instance: ComponentPublicInstance | null;
    value: V;
    oldValue: V | null;
    arg?: string;
    modifiers: DirectiveModifiers;
    dir: ObjectDirective<any, V>;
}

使用如下:

javascript 复制代码
<script setup lang="ts">
import {Directive, DirectiveBinding} from "vue";
import A from "./A.vue";
type Dir = {
  background:string
}
const vMove:Directive = {
  created(){
    console.log('------created-------')
  },
  beforeMount(){
    console.log('------beforeMount-------')
  },
  mounted(el:HTMLElement,dir:DirectiveBinding<Dir>){
    console.log('------mounted-------')
    el.style.background = dir.value.background
  },
  beforeUpdate(){
    console.log('------beforeUpdate-------')
  },
  updated(){
    console.log('------updated-------')
  },
  beforeUnmount(){
    console.log('------beforeUnmount-------')
  },
  unmounted(){
    console.log('------unmounted-------')
  }
}
</script>

<template>
<A v-move:aaa.smz="{background:'red'}"/>
</template>
案例:拖拽

这里使用拖拽需要改变拖拽的position,因为不改变,则修改元素位置不起作用

static

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

javascript 复制代码
<script setup lang="ts">
/**
 * Element.firstElementChild:只读属性,返回对象第一个子元素,没有则返回Null
 * Element.clientX:只读属性,元素距离视口左边的距离(中心点)
 * Element.offsetLeft:只读属性,元素左上角距离视口左边的距离
 * Element.offsetWidth:元素宽度
 * Element.offsetHeight:元素高度
 * window.innerWidth:可视窗宽度
 * window.innerHeight:可视窗高度
 */
import {Directive, DirectiveBinding} from "vue";

const vDrea:Directive<any,void> = (el:HTMLElement,binding:DirectiveBinding)=>{
  let gap = 10
  let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement
  const mouseDown = (e:MouseEvent)=>{
    console.log(window.innerHeight)
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop
    const move = (e:MouseEvent)=>{
      let x = e.clientX - X
      let y = e.clientY - Y
      //超出边界判断
      if (x<=gap){
        x = 0
      }
      if (y<=gap){
        y = 0
      }
      if (x>= window.innerWidth -el.offsetWidth -gap){
        x = window.innerWidth -el.offsetWidth
      }
      if (y>= window.innerHeight - el.offsetHeight-gap){
        y = window.innerHeight - el.offsetHeight
      }

      el.style.left = x + 'px'
      el.style.top = y + 'px'
    }
    // 鼠标移动
    document.addEventListener('mousemove',move)
    //松开鼠标
    document.addEventListener('mouseup',()=>{
      //清除移动事件
      document.removeEventListener('mousemove',move)
    })
  }
  //鼠标按下
  moveElement.addEventListener('mousedown',mouseDown)
}
</script>

<template>
  <div v-drea class="box">
    <div class="header"></div>
    <div>内容</div>
  </div>
</template>

<style lang="less" scoped>
.box{
  position: fixed;
  width: 300px;
  height: 250px;
  border: solid 1px black;
  .header{
    height: 30px;
    background-color: black;
  }
}
</style>

2.全局使用

定义好全局指令文件,其中需要导出指令钩子函数

javascript 复制代码
/**
 * el:监听的dom元素
 * binding: 回调事件
 */
export default {
    mounted(el,binding) {
        //将dom与回调的关系塞入map
        map.set(el,binding.value)
        //监听el元素的变化
        ob.observe(el)
    },
    unmounted(el) {
        //取消监听
        ob.unobserve(el)
    }
}

在main.ts文件中添加以下代码

挂载指令,省略'v-'前缀

javascript 复制代码
import sizeDireect from '../src/directs/resize指令封装/sizeDireect'
app.directive('size-ob', sizeDireect)

使用:

在需要监听的标签上使用命令 v-size-ob="handle",其中handle为回调函数,其中返回的参数为尺寸信息

javascript 复制代码
 <div class="dir"  v-size-ob="handle">
案例:监听是否出现在视口

vite提供了批量导入的方法 import.meta.glob
eager:true表示静态导入

javascript 复制代码
let imageList: Record<string,{default: string}> = import.meta.glob('../../../assets/images/*.*',{eager:true})
let arr = Object.values(imageList).map(v=>v.default)
javascript 复制代码
/**
 * IntersectionObserver:监听元素与视口交叉的API
 * 返回一个监听集合,集合每一项有intersectionRatio表示在视口存在的比例
 */
export default {
    // @ts-ignore
     async mounted(el,binding){
         const def = await import('../../assets/vue.svg')
        el.src = def.default
         let ob = new IntersectionObserver((entries) => {
            if (entries[0].intersectionRatio >0){
                el.src = binding.valueOf()
                ob.unobserve(el)
            }
         })
        ob.observe(el)

    },
    unmounted(el){
    }
}
案例:监听宽高指令
javascript 复制代码
/**
 * @ResizeObserver 监听元素变化的API
 * @entries 元素变化的数组集合
 * @entry 每个被监听的元素 其中包含的属性有:
 *    borderBoxSize:边框盒尺寸
 *    contentBoxSize:内容盒尺寸
 *    contentRect:内容区域矩形信息 => DOMRectReadOnly {x: 0, y: 0, width: 3800, height: 3800, top: 0, ...}
 *    devicePixelContentBoxSize:DPR尺寸
 *    target:哪一个元素发生变化
 */
const ob = new ResizeObserver((entries)=>{
    for (const entry of entries) {
        // 获取dom元素的回调
        const handler = map.get(entry.target)
        //存在回调函数
        if (handler){
            // 将监听的值给回调函数
            handler({
                width: entry.borderBoxSize[0].inlineSize,
                height: entry.borderBoxSize[0].blockSize
            })
        }
    }
})
/**
 * map:存储dom与回调函数的映射关系
 * 使用WeakMap,防止内存溢出
 */
const map = new WeakMap();
/**
 * el:监听的dom元素
 * binding: 回调事件
 */
export default {
    mounted(el,binding) {
        //将dom与回调的关系塞入map
        map.set(el,binding.value)
        //监听el元素的变化
        ob.observe(el)
    },
    unmounted(el) {
        //取消监听
        ob.unobserve(el)
    }
}

主要讲了vue3中自定义指令的使用,以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用

相关推荐
come1123415 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志37 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js