精华内容
下载资源
问答
  • vue封装自定义指令
    2021-11-28 22:01:01

    一、自定义指令的封装

    1. 指令的创建

    // 注册一个全局自定义指令 v-focus
    import Vue from 'vue'
    // 必须有 install 方法, 才可以注入到 Vue.use 中
    export default {
      install () {
        Vue.directive('focus', {
          // 当绑定元素插入到 DOM 中
          inserted (el) {
            // 聚焦元素
            el.focus()
          }
        })
      }
    }
    

    2. 指令的注册

    import diretivesObj from '@/utils/directives'
    Vue.use(diretivesObj)
    

    3. 指令的使用

    <input v-focus>
    

    二、钩子函数

    指令定义函数提供了几个钩子函数(可选):

    • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

    • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

    • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

    • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

    • unbind: 只调用一次, 指令与元素解绑时调用。

    三、钩子函数参数

    • el: 指令所绑定的元素,可以用来直接操作 DOM 。
    • binding: 一个对象,包含以下属性:
      • name: 指令名,不包括 v- 前缀。
      • value: 指令的绑定值, 例如: v-my-directive=“1 + 1”, value 的值是 2。
      • oldValue: 指令绑定的前一个值,仅在 update 和componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” , expression 的值是 “1 + 1”。
      • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
      • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
    • vnode: Vue 编译生成的虚拟节点。
    • oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
    更多相关内容
  • 本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue封装自定义指令focus 功能: 自动获取输入框焦点 方式: 采用Vue插件开发方式 方式1: 传入对象(带install方法) - 给Vue添加全局的东西(Vue插入插件) 方式2: 传入函数体 代码实现: 第一步:在utils文件夹下新建...

    Vue封装自定义指令focus

    功能: 自动获取输入框焦点

    方式: 采用Vue插件开发方式

    方式1: 传入对象(带install方法) - 给Vue添加全局的东西(Vue插入插件)

    方式2: 传入函数体

    代码实现:

    第一步:在utils文件夹下新建directives.js文件

    import Vue from 'vue'
    const obj = {
      install () {
        // Vue.prototype.$属性 = 值
        // 全局自定义指令
        Vue.directive('focus', {
          // v-focus标签被插入到真实DOM上,此方法才会执行
          inserted (el) { // el:指令所在的原生标签
            if (el.nadeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
              el.focus()
            } else {
              // 如果不是原生的标签在获取一下内部input
              const inp = el.querySelector('input')
              const area = el.querySelector('textarea')
              if (inp.nodeName === 'INPUT' || area.nadeName === 'TEXTAREA') {
                if (inp.nodeName === 'INPUT') {
                  inp.focus()
                } else {
                  area.focus()
                }
              } else {
                console.error('指令请在输入框上使用')
              }
            }
          }
        })
      }
    }
    export default obj
    
    

    使用: main.js文件引入全局注册

    import directive from '@/utils/directives'
    Vue.use(directive)
    
    展开全文
  • 主要为大家详细介绍了vue使用自定义指令实现拖拽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show等),Vue允许我们注册自定义指令用于元素上 当我们需要对普通 DOM 元素进行底层操作时,就可以用到用到自定义指令。 如何注册 我们可以全局注册自定义...

    Vue自定义指令

    除了核心功能默认内置的指令 (v-modelv-show等),Vue允许我们注册自定义指令用于元素上

    当我们需要对普通 DOM 元素进行底层操作时,就可以用到用到自定义指令。

    如何注册

    我们可以全局注册自定义指令, 也可以局部注册

    全局注册:

    全局注册自定义指令是将我们的自定义指令挂载到vue实例上的,在项目中都可以使用

    全局指令注册方法为:Vue.directive(dName, options) 传入两个参数

    分别是 指令名配置对象

    创建完之后,我们就可以使用 v-指令名 的方式加在元素上,以使自定义指令生效

    import Vue from 'vue'
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    
    new Vue( options )
    

    局部注册:

    用法与 全局 注册是一样的, 只是写法稍有不同

    进行局部注册时, 我们的组件中可以接收一个directives选项

    其中,键为指令名 值为配置对象

    export default{
      data(){
        return { ... }
      },
      directives:{
        	focus:{
            inserted: function (el) {
              //element-ui中 el-input外层是div, 里面包裹的才是input, 因此用在 el-input上的话,要让el-input里的子元素聚焦
              //增加判断可以使我们的v-focus通用性更强
              el.tagName == 'INPUT' ? el.focus() : el.children[0].focus
            }
          }
      }
    }
    

    使用自定义指令

    在模板的任意元素上都可以使用我们的自定义指令

    <input v-focus></input>
    

    钩子函数:

    配置对象中包含一下几个钩子函数(均为可选值):

    钩子函数描述
    bind只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    inserted(常用)被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
    update所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    unbind只调用一次,指令与元素解绑时调用。

    钩子函数参数:

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

    • el:指令所绑定的元素,可以用来直接操作 DOM。

    • binding
      

      :一个对象,包含以下 property:

      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
      • 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:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

    Vue 官方提示: 除了`el`之外,其他参数都应该是只读的,不建议修改
    

    项目中用到的自定义指令:

    一、

    ​ 点击按钮过快可能多次请求接口,用自定义指令做全局的函数防抖

    ​ 在main.js中 全局注册一个自定义指令:

    Vue.directive('debounce' , {
      inserted(el , binding , vnode){
        let timer = null
        el.addEventListener('click' , () => {
          if(timer){
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            binding.value()
          }, 1200)
        })
      }
    })
    

    使用时:

    <el-button type="primary" v-debounce="onSubmit">提交</el-button>
    

    注意:

    ​ 这里有一个小问题, v-debounce=“onSubmit” 我们绑定的是组件中methods里的onSubmit方法, 那么bidding.value 得到的就是onSubmit函数,是可以直接执行的

    ​ 而如果函数会有参数的话, 我们会这样写:

    v-debounce=“onSubmit(par)”

    ​ 此时bidding.value onSubmit函数的执行结果,而return内容的函数, 返回值就是undefined.我们之后再binding.value()的话,就会报错的。

    ​ 因此,如果传参的话,需要在onSubmit函数中 return 一个匿名函数, 在返回的匿名函数中 执行onSubmit中的代码

    展开全文
  • Vue自定义指令封装

    千次阅读 2022-01-24 11:42:59
    Vue是一个非常自由的框架,它允许我们自己定义指令,如我现在定义一个简单的限制输入框的指令则只需进行以下操作: 1、封装指令函数 int.js 2、很多人在写完指令...3、此时即可使用自定义指令 v-Int ...

    Vue是一个非常自由的框架,它允许我们自己定义指令,如我现在定义一个简单的限制输入框的指令则只需进行以下操作:

    1、封装指令函数 int.js

    2、很多人在写完指令函数之后直接使用会造成指令未生效,需要先在main.js中引入 int.js文件

    3、此时即可使用自定义指令 v-Int

     

    展开全文
  • VUE自定义指令详解

    2022-07-22 16:54:29
    vue.directive是我们除了内置的指令(如v-model和v-show)之外的自定义指令自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的............
  • Vue2 自定义指令

    2022-08-04 18:46:52
    Vue2 自定义指令
  • vue3.0自定义指令

    2022-05-13 03:29:25
    但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做。 const app = vue.createApp({ ...
  • 创建拖拽的自定义指令,然后在main.js里面注册到全局即可。 import Vue from 'vue'; const drag = Vue.directive('drag', { // 指令绑定到元素上回立刻执行bind函数,只执行一次 bind: function (el) { }, //...
  • Vue自定义指令的妙用

    2022-01-04 17:52:33
    Vue自定义指令
  • vue2 、vue3 自定义指令

    2022-01-07 11:25:12
    除了内置的指令 v-model 、v-if等,Vue也允许注册自定义指令vue2.0中,代码复用的主要形式是组件,然而有的情况下,仍然需要对普通的元素进行底层操作。 注册自定义指令 v-focus 全局注册 Vue.directive('...
  • vue2 vs vue3自定义指令

    2022-06-20 14:28:19
    vue2 vs vue3自定义指令
  • Vue3 自定义指令详解

    2022-04-14 11:14:41
    vue开发中经常会用到v-for、v-model等vue给我们定义好的指令,其实vue也给我们提供了可以自定义自己的指令的方法。 基本使用方式 主要是利用 directive 这个api来实现的,先看下它的用法,在全局中我们可以这么用 第...
  • 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 1. 输入框自动聚焦 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的...
  • Vue自定义指令有全局注册和局部注册两种方式。...然后在入口文件中进行Vue.use()调用。批量注册指令,新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。...
  • vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义指令。 方法一、 组件内代码如下: directives: { title: { inserted(el) { const { clientWidth, ...
  • Vue自定义指令封装

    千次阅读 2020-12-29 21:46:32
    Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册 自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • Vue自定义指令

    2022-07-18 21:26:43
    中进行指令的配置定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。 定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现 但是focus函数需要等...
  • 指令封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定 vue中常用的v-指令有那些呢? v-text 元素的InnerText属性,必须是双标签 v-html 元素的innerHTML v...
  • 主要介绍了vue 封装自定义组件tabal列表编辑单元格组件实例代码,需要的朋友可以参考下
  • 封装preventReClick.js文件 export default { install (Vue) { Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if(!el.disabled) { el.disabled = true; ...
  • 防抖节流函数封装自定义指令
  • 目前项目中需要做到按钮级别的控制,所以想到了自定义指令来实现,在自定义指令中来控制组件的显示于隐藏。 1.第一步创建自定义指令 js 文件: permission.js 2.在main.js中直接引入import '@.../../permission' 文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,791
精华内容 4,316
关键字:

vue封装自定义指令