精华内容
下载资源
问答
  • vue自定义指令使用场景
    2022-01-27 17:39:47

    使用场景

    代码复用和抽象的主要形式是组件。
    当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
    但是,对于大幅度的 DOM 变动,还是应该使用组件
    

    1. 输入框自动聚焦

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

    2. 下拉菜单

    Vue.directive('clickoutside', {
      bind(el, binding) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
           return false 
          }
          
          if (binding.expression) {
            binding.value(e)
          }
        }
        
        el.__vueMenuHandler__ = documentHandler
        document.addEventListener('click', el.__vueMenuHandler__)
      },
      unbind(el) {
        document.removeEventListener('click', el.__vueMenuHandler__)
        delete el.__vueMenuHandler__
      }
    })
    
    new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        handleHide() {
          this.show = false
        }
      }
    })
    <div class="main" v-menu="handleHide">
      <button @click="show = !show">点击显示下拉菜单</button>
      <div class="dropdown" v-show="show">
        <div class="item"><a href="#">选项 1</a></div>
        <div class="item"><a href="#">选项 2</a></div>
        <div class="item"><a href="#">选项 3</a></div>
      </div>
    </div>
    

    3. 相对时间转换

    <span v-relativeTime="time"></span>
    new Vue({
      el: '#app',
      data: {
        time: 1565753400000
      }
    })
    
    Vue.directive('relativeTime', {
      bind(el, binding) {
        // Time.getFormatTime() 方法,自行补充
        el.innerHTML = Time.getFormatTime(binding.value)
        el.__timeout__ = setInterval(() => {
          el.innerHTML = Time.getFormatTime(binding.value)
        }, 6000)
      },
      unbind(el) {
        clearInterval(el.innerHTML)
        delete el.__timeout__
      }
    })
    
    更多相关内容
  • 使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...

    使用自定义指令背景

    • 代码复用和抽象的主要形式是组件。
    • 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
    • 但是,对于大幅度的 DOM 变动,还是应该使用组件

    常用案例

    1、 输入框自动聚焦

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

    2 下拉菜单

    点击下拉菜单本身不会隐藏菜单
    点击下拉菜单以外的区域隐藏菜单

    Vue.directive('clickoutside', {
    bind(el, binding) {
    function documentHandler(e) {
    if (el.contains(e.target)) {
    return false 
    }
    
    if (binding.expression) {
    binding.value(e)
    }
    }
    
    el.__vueMenuHandler__ = documentHandler
    document.addEventListener('click', el.__vueMenuHandler__)
    },
    unbind(el) {
    document.removeEventListener('click', el.__vueMenuHandler__)
    delete el.__vueMenuHandler__
    }
    })
    
    new Vue({
    el: '#app',
    data: {
    show: false
    },
    methods: {
    handleHide() {
    this.show = false
    }
    }
    })
    <div class="main" v-menu="handleHide">
    <button @click="show = !show">点击显示下拉菜单</button>
    <div class="dropdown" v-show="show">
    <div class="item"><a href="#">选项 1</a></div>
    <div class="item"><a href="#">选项 2</a></div>
    <div class="item"><a href="#">选项 3</a></div>
    </div>
    </div>
    12345678910111213141516171819202122232425262728293031323334353637383940
    

    3. 相对时间转换

    类似微博、朋友圈发布动态后的相对时间,比如刚刚、两分钟前等等

    <span v-relativeTime="time"></span>
    new Vue({
    el: '#app',
    data: {
    time: 1565753400000
    }
    })
    
    Vue.directive('relativeTime', {
    bind(el, binding) {
    // Time.getFormatTime() 方法,自行补充
    el.innerHTML = Time.getFormatTime(binding.value)
    el.__timeout__ = setInterval(() => {
    el.innerHTML = Time.getFormatTime(binding.value)
    }, 6000)
    },
    unbind(el) {
    clearInterval(el.innerHTML)
    delete el.__timeout__
    }
    })
    123456789101112131415161718192021
    
    展开全文
  • 一、Vue自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令自定义指令分为全局自定义指令和局部的自定义指令 全局...

    前言

    一、Vue的自定义指令分为?

    vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令。

    自定义指令分为全局自定义指令和局部的自定义指令

    全局自定义指令

    是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象,这个对象上有钩子函数})

    下边举例说明:

     Vue.directive('focus', {
    		// el:指令所绑定的元素,可以用来直接操作 DOM。
    		//binding:一个对象,包含以下 property:
          inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
            el.focus();
          }
        });
    

    局部自定义指令

    局部注册通过在组件options选项中设置directive属性
    是定义在组件内部的,只能在当前组件中使用

    下边举例说明:

    directives: {
            // 指令名称
            dir1: {
                inserted(el) {
                    // 指令中第一个参数是当前使用指令的DOM
                    console.log(el);
                    console.log(arguments);
                    // 对DOM进行操作
                    el.style.width = '200px';
                    el.style.height = '200px';
                    el.style.background = '#000';
                }
            },
            color: { // 为元素设置指定的字体颜色
              bind(el, binding) {
                el.style.color = binding.value;
              }
            }
    	}
    

    自定义指令的钩子函数

    自定义指令也像组件那样存在钩子函数:

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

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

    三、自定义指令的应用场景

    使用自定义组件组件可以满足我们日常一些场景,这里给出几个自定义组件的案例:

    1.防抖

    2.图片懒加载

    3.一键 Copy的功能

    二、 vue自定义指令的应用场景

    使用自定义指令背景
    代码复用和抽象的主要形式是组件。
    当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
    但是,对于大幅度的 DOM 变动,还是应该使用组件
    常用案例

    1、 输入框自动聚焦

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

    2 下拉菜单
    点击下拉菜单本身不会隐藏菜单
    点击下拉菜单以外的区域隐藏菜单

    Vue.directive('clickoutside', {
      bind(el, binding) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
           return false 
          }
          
          if (binding.expression) {
            binding.value(e)
          }
        }
        
        el.__vueMenuHandler__ = documentHandler
        document.addEventListener('click', el.__vueMenuHandler__)
      },
      unbind(el) {
        document.removeEventListener('click', el.__vueMenuHandler__)
        delete el.__vueMenuHandler__
      }
    })
    
    new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        handleHide() {
          this.show = false
        }
      }
    })
    <div class="main" v-menu="handleHide">
      <button @click="show = !show">点击显示下拉菜单</button>
      <div class="dropdown" v-show="show">
        <div class="item"><a href="#">选项 1</a></div>
        <div class="item"><a href="#">选项 2</a></div>
        <div class="item"><a href="#">选项 3</a></div>
      </div>
    </div>
    
    1. 相对时间转换
      类似微博、朋友圈发布动态后的相对时间,比如刚刚、两分钟前等等
    <span v-relativeTime="time"></span>
    new Vue({
      el: '#app',
      data: {
        time: 1565753400000
      }
    })
    
    Vue.directive('relativeTime', {
      bind(el, binding) {
        // Time.getFormatTime() 方法,自行补充
        el.innerHTML = Time.getFormatTime(binding.value)
        el.__timeout__ = setInterval(() => {
          el.innerHTML = Time.getFormatTime(binding.value)
        }, 6000)
      },
      unbind(el) {
        clearInterval(el.innerHTML)
        delete el.__timeout__
      }
    })
    
    展开全文
  • Vue 自定义指令应用场景 这段是从官网 copy 过来的,相信应该都一看就明白的 bind: 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inserted: 被绑定元素插入父节点时调用 (仅保证父...

    Vue 自定义指令应用场景

    这段是从官网 copy 过来的,相信应该都一看就明白的

    • bind: 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    • inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
    • update: 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有
    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用
    • unbind: 只调用一次,指令与元素解绑时调用

    1.权限校验 v-permission

    权限校验一般分为页面级别和按钮级别,其两种思路基本一致

    详细可以参考:手摸手,带你用 vue 撸后台 系列二(登录权限篇),如下简单说一下

    页面级别:

    1. 最快想到的可能就是使用 beforeEach,首先把所有路由都注册,用户登录后拿到后端返回的权限信息,如果没有此权限统一个提示信息
      不过大部分需求都不希望你这么做,没有权限就不显示
    2. 首先把所有路由都注册,不过上来给所有路由做一个标识(前后端约定一下),根据这个标识显示/隐藏
    3. 路由完全由后端负责,按照后端返回的信息生成最终用户可访问的路由表,最后通过 router.addRoutes 动态挂载

    按钮级别:

    1. 逻辑比较简单,使用 v-if 根据权限显示/隐藏
    2. 逻辑稍微复杂一点,使用自定义指令显示/隐藏

    思路:

    1. 自定义一个权限数组(这里我放到 vuex 中)
    2. 判断用户的权限是否在这个数组内,如果在就显示,不在就移除
    import store from '@/store'
    function checkPermission(el, binding) {
      const { value } = binding
      const roles = store.getters && store.getters.roles
    
      if (value && Array.isArray(value)) {
        if (value.length > 0) {
          const hasPermission = roles.some(role => value.includes(role))
        }
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      } else {
        throw new Error(`please use such as v-permission="['admin', 'editor']"`)
      }
    }
    
    Vue.directive('permission', {
      inserted(el, binding) {
        checkPermission(el, binding)
      },
      update(el, binding) {
        checkPermission(el, binding)
      },
    })
    

    2.复制指令

    思路:

    1. 动态创建 textarea 标签,并设置 readOnly 属性,并将其移出可视区域
    2. 将要复制的值赋给 textarea 标签的 value 属性,并插入到 body
    3. 选中值 textarea 并复制
    4. 将 body 中插入的 textarea 移除
    5. 在第一次调用时绑定事件,在解绑时移除事件
    import { Message } from 'element-ui'
    
    Vue.directive('copy', {
      bind(el, { value }) {
        el.$value = value
        el.$handle = function () {
          let textValue = el.$value
          if (!text) {
            Message({
              message: '复制内容不能为空',
              type: 'warning',
            })
            return
          }
          // 步骤1
          const textarea = document.createElement('textarea')
          textarea.readOnly = 'readonly'
          textarea.style.cssText = 'opacity:0;position:fixed;left:-9999px'
          // 步骤2
          textarea.value = textValue
          document.body.appendChild(textarea)
          // 步骤3
          textarea.select()
          const copyText = document.execCommand('copy')
          if (copyText) {
            Message({
              message: '复制成功',
              type: 'success',
            })
          }
          // 步骤4
          document.body.removeChild(textarea)
        }
        el.addEventListener('click', el.$handle)
      },
      // 当传入进来的值更新的时候触发
      componentUpdated(el, { value }) {
        el.$value = value
      },
      unbind(el) {
        el.removeEventListener('click', el.$handle)
      },
    })
    

    3.防抖节流

    钩子函数参数

    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

    思路:

    • 通过 addEventListener监听事件
    • 调用方式:<button v-debounce:300.immediate="fn">click</button>
    function debounce(func, wait, immediate) {
        var timer = null,
            result;
        return function proxy() {
            var self = this,
                params = [].slice.call(arguments),
                callNow = !timer && immediate;
            if (timer) clearTimeout(timer);
            timer = setTimeout(function () {
                clearTimeout(timer);
                timer = null;
                if (!immediate) result = func.apply(self, params);
            }, wait);
            if (callNow) result = func.apply(self, params);
            return result;
        }
    }
    
    function throttle(func, wait) {
        var timer = null,
            previous = 0,
            result;
        return function proxy() {
            var self = this,
                params = [].slice.call(arguments);
            var now = +new Date,
                remaining = wait - (now - previous);
            if (remaining <= 0) {
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                previous = now;
                result = func.apply(self, params);
                return result;
            }
            if (!timer) {
                timer = setTimeout(function () {
                    clearTimeout(timer);
                    timer = null;
                    previous = +new Date;
                    result = func.apply(self, params);
                }, remaining);
            }
            return result;
        };
    }
    
    const config = {
      bind(el, binding) {
        let { value } = binding.value,
          immediate = false,
          wait = 500,
          type = 'click',
          params = [],
          func,
          handle = binding.name === 'debounce' ? debounce : throttle
        if (value === null) return
        if (typeof val !== 'object' && typeof value !== 'function') return
        if (binding.arg) wait = +binding.arg
        if (binding.modifiers && binding.modifiers.immediate) immediate = true
        if (typeof value === 'function') func = value
        if (typeof value === 'object') {
          func = value.func || function() {}
          type = value.type || 'click'
          params = value.params || []
        }
        el.$type = type
        el.$handle = handle(
          function proxy(...arg) {
            return func.call(this, ...params.concat(arg))
          },
          wait,
          immediate
        )
        el.addEventListener(el.$type, el.$handle)
      },
      unbind(el) {
        el.removeEventListener(el.$type, el.$handle)
      },
    }
    
    Vue.directive('debounce', config)
    Vue.directive('throttle', config)
    
    展开全文
  • 关于自定义指令,事实上在做前端开发第一年时根本就没有任何的了解,第一次接触到这个概念还是在一次面试当中,我讲了一堆如何遍历标签的属性的原生方法,结果面试官直接回答:这不是vue自定义指令吗。。。233 嗯 ...
  • vue自定义指令使用

    2022-02-14 07:39:43
    一、Vue自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令自定义指令分为全局自定义指令和局部的自定义指令 全局...
  • 主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...
  • 一、Vue中如何自定义指令 除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 如何自定义指令 1.创建局部指令 ...
  • 利用自定义指令实现权限校验 // directive.js // 控制元素显示不显示 Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; }); /...
  • 在开始之前,我们需要明确一点,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令。 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分...
  • Vue自定义指令

    千次阅读 2022-02-13 18:53:09
    除了核心功能默认内置的指令 (v-model和 v-show),Vue 也允许注册自定义指令,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。 二、 如何自定义指令 自定义指令分为全局自定义指令和局部自定义指令 ⭕1...
  • Vue自定义指令使用

    千次阅读 2021-11-10 23:28:31
    学习 vue 的时候肯定会接触指令,那么什么是指令呢? 在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性<div v-xxx /div> 比如在 angular 中 以...
  • 除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到...
  • 创建拖拽的自定义指令,然后在main.js里面注册到全局即可。 import Vue from 'vue'; const drag = Vue.directive('drag', { // 指令绑定到元素上回立刻执行bind函数,只执行一次 bind: function (el) { }, //...
  • Vue自定义指令原来这么简单

    千次阅读 多人点赞 2022-02-15 09:48:35
    看完这篇轻松掌握Vue自定义指令,助你面试solo面试官,项目中帮你处理更多难解情况,学习Vue指令原来这么简单
  • Vue自定义指令使用 文章转自
  • Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令,新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义...
  • vue自定义指令 Directive

    2022-02-14 20:09:28
    一、Vue自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令自定义指令分为全局自定义指令和局部的自定义指令 全局...
  • v-pre (没有值) 跳过 v-pre 所在节点的编译过程 可利用它跳过没有使用指令语法,没有使用插值语法的节点,会加快编译 <h2 v-pre>Vue其实很简单h2> 自定义指令 指令名是多个单词,用 - 间隔,如product-order ,不可驼峰...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,346
精华内容 3,738
热门标签
关键字:

vue自定义指令使用场景

友情链接: ppc_asm.rar