王者荣耀怎么开启全局指令,王者荣耀快捷指令在哪里设置

首页 > 游戏 > 作者:YD1662024-02-13 10:46:34

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

前面有专门的文字,讲过Vue指令,以及如何使用指令,今天就来讲讲如何添加全局指令,并且附上2个非常适用的例子。

王者荣耀怎么开启全局指令,王者荣耀快捷指令在哪里设置(1)

Vue全局指令:如何添加全局指令?(附2个常用自定义指令)

如何添加全局指令?

在上面文章中,提到过一种方法,在main.js(入口JS文件)中引入你已经写好的指令文件,可以省略文件后缀:

// main.js import focus from 'xxx/directive'

如果你有多个指令文件了?怎么引入?

Vue.use((Vue) => { ((requireContext) => { const arr = requireContext.keys().map(requireContext); (arr || []).forEach((directive) => { directive = directive.__esModule && directive.default ? directive.default : directive; Object.keys(directive).forEach((key) => { Vue.directive(key, directive[key]); }); }); })(require.context('../directives', false, /^\.\/.*\.js$/)); });

王者荣耀怎么开启全局指令,王者荣耀快捷指令在哪里设置(2)

Vue全局指令:如何添加全局指令?(附2个常用自定义指令)

这里用到了require.context函数,require.context是webpack中,用来创建自己的(模块)上下文。 require.context函数接收三个参数:

1、要搜索的文件夹目录

2、是否还应该搜索它的子目录

3、以及一个匹配文件的正则表达式

我们搜索directives目录下的所有js文件,遍历装载指令。

下面我们来看看2个实用的自定义指令。

王者荣耀怎么开启全局指令,王者荣耀快捷指令在哪里设置(3)

Vue全局指令:如何添加全局指令?(附2个常用自定义指令)

vue非本元素点击事件指令

这个指令的的作用是什么?

比如:一个按钮点击后弹出一个浮层,然后点击按钮外的所有事件,都关闭浮层。

export default { clickOut: { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el.contains(e.target)) { return false; } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法 binding.value(e); } } // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听 el.__vueClickOutside__ = clickHandler; document.addEventListener('click', clickHandler); }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; } } }

王者荣耀怎么开启全局指令,王者荣耀快捷指令在哪里设置(4)

首页 123下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.