vue2 对全局自定义指令一次性进行注册的方法

在src下新建文件夹directive/index.js

index.js文件中用来写入注册方法

/*
 * @Author: 周云芳
 * @Date: 2022-06-28 15:21:41
 * @LastEditors: 周云芳
 * @LastEditTime: 2022-06-28 16:44:16
 * @Description: 用于自动注册全局自定义指令
 * 使用规则:
 * 根据导出的name在页面使用如directives对象中的name为el-drag-dialog,页面使用:v-el-drag-dialog
 */
const requireDirective = require.context('./', true, /\.js$/)
// 自定义指令
let directives = {}
requireDirective.keys().map((file) => {
  // console.log('file', file)
  const name = removerLastIndex(file)
  if (name) {
    directives = {
      ...directives,
      [name]: requireDirective(file).default
    }
  }

  return false
})
function removerLastIndex (str) {
  const start = str.substring(2, str.length) // 去除路径中的./ start=el-drag-dialog/index.js
  // str = login/index
  // 获取最后一个/的索引
  const index = start.lastIndexOf('/')
  // 获取最后一个/后面的值
  const val = start.substring(index + 1, start.length)
  // 判断是不是index结尾
  if (val === 'index.js') {
    return start.substring(index, -1)
  }
  return str
}

console.log('directives', directives)
export default {
  install (Vue) {
    Object.keys(directives).forEach((key) => {
      console.log('directives[key]', key, directives[key])
      Vue.directive(key, directives[key])
    })
  }
}

示例自定义指令页面:

src\directive\el-drag-dialog\index.js

/*
 * @Author: 周云芳
 * @Date: 2022-06-28 15:11:03
 * @LastEditors: 周云芳
 * @LastEditTime: 2022-06-28 16:31:15
 * @Description: 自定义指令示例
 */
export default {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      console.log('指令点点')
    })
  }
}

main.js引入

import Directive from '@/directive'
Vue.use(Directive)

页面用使用:

<!--
 * @Author: 周云芳
 * @Date: 2022-06-28 09:18:44
 * @LastEditors: 周云芳
 * @LastEditTime: 2022-06-28 16:29:28
 * @Description: 文件描述
-->
<template>
  <div>
    测试
    <auto-test v-el-drag-dialog></auto-test>
  </div>
</template>

<script>
export default {
  name: 'test',
  props: [''],
  data () {
    return {}
  },

}
</script>
<style lang="" scoped></style>

效果:

到此这篇关于vue2 对全局自定义指令一次性进行注册的文章就介绍到这了,更多相关vue全局自定义指令注册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2中使用sass并配置全局的sass样式变量的方法

    Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好.       Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style la

  • 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定.我们可以设置指令在某一个事件发生时的具体行为. 例子如下: 页面一进后, 在控制台中设置一个新值:通过控制台设置的新name 再设置一个新值:通过控制台设置的新name 最后点击解绑,解除绑定(解除绑定之后,id="app"的Dom和vm的实例之间解除mvvm的绑定关系): 代

  • vue2.0全局组件之pdf详解

    vue2.0全局组件之pdf详解

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen

  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  • vue2 全局变量的设置方法

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59',

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • vue2 对全局自定义指令一次性进行注册的方法

    vue2 对全局自定义指令一次性进行注册的方法

    在src下新建文件夹directive/index.js index.js文件中用来写入注册方法 /* * @Author: 周云芳 * @Date: 2022-06-28 15:21:41 * @LastEditors: 周云芳 * @LastEditTime: 2022-06-28 16:44:16 * @Description: 用于自动注册全局自定义指令 * 使用规则: * 根据导出的name在页面使用如directives对象中的name为el-drag-dialog,页面使用:v-e

  • vue2实现directive自定义指令的封装与全局注册流程

    目录 前言 一.directive自定义指令介绍 二.全局注册使用流程 1.准备好我们需要的自定义指令 2.开始在main中导入该文件完成注册功能 3.完成了注册功能开始使用 总结 前言 我们在使用vue框架的时候,指令基本能够覆盖我们平常的工作.可难免我们根据业务需求走总有的指令无法一步到达我们想要的结果.这个时候我们就可以自己动手手动封装来制作一个指令用于完成我们的设计. 一.directive自定义指令介绍 1.概念: 除了 Vue 内置的一系列指令 (比如v-model或者v-show等

  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    目录 背景 实现思路 实现效果 背景 最近一直在做的项目是Vue2搭建的项目,UI框架用的antdV,项目中用到了很多Modal对话框,然后突然有一天产品说:"这个对话框为什么不能移动啊,挡住我看信息了",那没办法,有需求就得做,这就是新生代打工人. 首先我去antdV官网看Modal的配置属性和方法,看看有没有这方面的属性或者方法可以直接解决,无奈没有找到.第二步开始问百度,相关的博客也有一些,但是总的来说五花八门,不是特别好搞懂,然后发现有个使用全局自定义指定的方式好像有点意思,然

  • vue全局自定义指令和局部自定义指令的使用

    vue全局自定义指令和局部自定义指令的使用

    目录 局部自定义指令(只针对组件内的元素) 定义全局自定义指令 自定义指令的钩子函数 自定义指令钩子函数的参数 例子 除了默认设置的核心指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 局部自定义指令(只针对组件内的元素) 父组件app.vue <template> <div id="app"> <test-api></test-api> </div> </template> <sc

  • vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

    vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

    前言 大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive.下面话不多说了,来一起看看详细的介绍: directive 这个单词是我们写自定义指令的关键字哦 自定义指令为我们提供了几个钩子函数,这时候你一定好奇什么是钩子函数,说简单点,就是集中表现状态 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑

  • 实现一个Vue自定义指令懒加载的方法示例

    实现一个Vue自定义指令懒加载的方法示例

    在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载 当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载

  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • vue自定义指令的创建和使用方法实例分析

    vue自定义指令的创建和使用方法实例分析

    本文实例讲述了vue自定义指令的创建和使用方法.分享给大家供大家参考,具体如下: 一.自定义指令的创建和使用 Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令. 1.自定义指令 ① 创建 new Vue({ directives:{ change:{ bind:function(){

  • vue全局自定义指令-元素拖拽的实现代码

    小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function (el) { el.onmousedown=function(ev){ var disX=ev.clientX-el.offsetLeft; var disY=ev.clientY-el.offsetTop; document.onmousemove=function(ev){ var l=ev.cl

  • Vue自定义指令封装节流函数的方法示例

    节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

随机推荐