[Vue] 自定义命令

已于 2024-03-13 09:20:06 修改
阅读量1.7k 收藏 13
点赞数 57
分类专栏： vue 文章标签： vue.js javascript 前端
于 2024-03-13 09:19:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29069649/article/details/136669944
版权

Vue 自定义命令

官方的vue命令包括：v-html v-if v-else v-show v-for等等为了提高效率，减少重复项编写，vue支持自定义命令，可以封装一些DOM操作，扩展额外的功能

语法

注册

  • 全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

  • 局部注册

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

使用

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。

如：<input type="text" v-focus/> 注册指令时不用加v-前缀，但使用时一定要加v-前缀

扩展

钩子函数:

Vue 2.X 与 Vue 3.X 相比，钩子函数是存在变化的

Vue 2.X钩子函数：

  • bind：自定义指令绑定到DOM后调用。只调用一次，指令第一次绑定到元素的调用。在这里可以进行一次性的初始化设置。注意：只是加入进了DOM，但是渲染没有完成。

  • inserted：自定义指令所在DOM，插入到父DOM后调用，渲染已经完成（父节点存在即可调用，不必存在于document中）。

  • update：元素更新，但子元素尚未更新，将调用此钩子（自定义指令所在组件更新时执行，但是不保证更新完成）,和自定义指令所在组件有关。

  • componentUpdated：组件和子级更新后执行（自定义指令所在组件更新完成，且子组件也完成更新）

  • unbind：解绑（销毁）（自定义指令所在DOM销毁时执行），只调用一次。

Vue 3.X钩子函数：

  • created：自定义指令所在组件，创建后调用

  • beforeMount：相当于Vue 2.X中的bind，当元素被插入到DOM前调用

  • mounted：相当于Vue 2.X中的inserted，当绑定元素的父组件被挂载后调用

  • beforeUpdate：绑定元素的父组件更新前调用

  • updated：相当于Vue 2.X中的componentUpdated，在绑定元素的父组件及他自己的所有子节点都更新后调用

  • beforeUnmount：绑定元素的父组件卸载前调用

  • unmounted：绑定元素的父组件卸载后调用

钩子函数参数

指令的钩子会传递以下几种参数：

  • el：指令绑定到的元素。这可以直接操作DOM。

  • binding：一个对象，包含以下属性。

    • value：传递给指令的值。例如在v-my-directive="1+1"中，值是2.

    • oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用.

  • arg：传递给指令的参数（如果有的话）。例如在v-my-directive:foo中，参数是"foo".

  • modifiers：一个包含修饰符的对象（如果有的话）。例如在v-my-directive:foo:bar中，修饰符对象是{ foo: true, bar: true }.

  • instance：使用该指令的组件实例.

  • dir：指令的定义对象.

  • vnode：代表绑定元素的底层VNode。虚拟DOM节点，一个真实DOM元素的蓝图，对应el.

  • prevNode：上一个虚拟节点。之前的渲染中代表指令所绑定元素的VNode。仅在beforUpdate和updated钩子中使用.

常用指令
1.复制粘贴指令 v-copy

实现：一键复制文本内容，用于粘贴思路：1.动态创建textarea标签，并设置reaOnly属性及移除可视区域2.将要复制的值赋给textarea标签的value属性，并插入到body3.选中值textarea并复制4.将body中插入的textarea移除5.在第一次调用时绑定事件，在解绑时移除事件

const copy = {
    bind(el, { value }) {
        el._value = value
        el.handler = () => {
            if (!el._value) {
                // 复制的值为空时，给出的提示操作。
                console.log('无可复制的内容')
                return
            }
​
            // 创建 textarea 标签
            const textarea = document.createElement('textarea')
            // 设置readOnly(规定字段为只读)属性，防止 iOS下自动唤起键盘，并移除可视区域
            textarea.readOnly = 'readOnly'
            textarea.style.position = 'absolute'
            textarea.style.left = '-9999px'
            // 将需要复制的值，赋给 textarea 标签的 value  值
            textarea.value = el._value 
            // 将 textarea 插入到 body 中
            document.body.appendChild(textarea)
​
            // 选中值并复制
            textarea.select()
            const result = document.execCommand('Copy')
            if (result) {
                console.log('复制成功')
            }
            document.body.removeChild(textarea)
        }
        // 绑定点击事件
        el.addEventListener('click', el.handler)
    },
    // 当传进来的值更新的时候触发
    componentUpdated(el, { value }) {
        el._value = value
    },
    // 指令与元素解绑的时候触发，移除事件绑定
    unbind(el) {
        el.removeEventListener('click', el.handler)
    }
}
​
export default copy

使用：给DOM节点加上v-copy及复制文本即可

<template>
    <button v-copy="text">复制</button>
</template>
​
<script>
    export default {
        data () {
            return {
                text: '这是一条复制文本'
            }
        }
    }
</script>
2.长按指令 v-longpress

实现：长按超过两秒，执行回调函数思路：1.创建一个计时器，两秒后执行函数2.当用户按下按钮时触发mousedown事件（移动端touchstart事件)，启动计时器；3.用户松开按钮时调用mouseout事件（移动端touchend事件）4.如果mouseup事件在两秒内触发，此事件当作普通点击事件5.如果计时器没有在两秒内清除，定为长按事件，触发相关回调函数

const longpress = {
    bind: (el, binding, vNode) {
        // 没有绑定函数抛出错误
        if (typeof binding.value !== 'function') {
            throw 'longpress callback not a function'
        }
​
        // 计时器变量
        el._timer = null
        // 运行函数
        el._handler = e => {
            binding.value(e)
        }
        // 创建计时器（2秒后执行函数）
        el._start = e => {
            // 0为鼠标左键
            if (e.type === 'click' && e.button !== 0) return
​
            if (el._timer === null) {
                el._timer = setTimeout(_ => {
                    el._handler()
                }, 2000)
​
                // 取消浏览器默认事件
                el.addEventListener('contextmenu', e => {
                    e.preventDefault()
                })
            }
        }
        // 两秒内松手，取消计时器
        el._cancel = e => {
            if (el._timer !== null) {
                clearTimeout(el._timer)
                el._timer = null
            }
        }
​
        // 添加计时监听
        el.addEventListener('mousedown', el._start)
        el.addEventListener('touchstart', el._start)
        // 添加取消监听
        el.addEventListener('click', el._cancel)
        el.addEventListener('mouseout', el._cancel)
        el.addEventListener('touchend', el._cancel)
        el.addEventListener('touchcancel', el._cancel)
    },
    unbind(el) {
        // 移除监听
        el.removeEventListener('mousedown', el._start)
        el.removeEventListener('touchstart', el._start)
        el.removeEventListener('click', el._cancel)
        el.removeEventListener('mouseout', el._cancel)
        el.removeEventListener('touchend', el._cancel)
        el.removeEventListener('touchcancel', el._cancel)
    }
}
​
export default longpress

使用：给DOM节点加上v-longpress及相应回调函数

<template>
    <button v-longpress="handleLongpress">复制</button>
</template>
​
<script>
    export default {
        methods: {
            handleLongpress() {
                alert('这是长按指令')
            }
        }
    }
</script>
3.防抖指令 v-debounce

场景：项目开发中，经常会遇到按钮多次点击后，重复请求接口，造成数据混乱，例如表单提交。实现：使用防抖，防止按钮在短时间内多次点击，设置按钮在1秒内只能点击一次。思路：1.定义延时方法，在1秒内再调用该方法，则重新计算执行时间2.将事件绑定在点击方法上

const debounce = {
    inserted: (el, binding) => {
        // 没有绑定函数抛出错误
        if (typeof binding.value !== 'function') {
            throw 'debounce callback not a function'
        }
​
        let timer
        el.addEventListener('click', () => {
            if (timer) clearTimeout(timer)
​
            timer = setTimeout(_ => {
                binding.value()
            }, 1000)
        })
    }
}
​
export default debounce

使用：给DOM节点加上v-debounce及回调函数

<template>
    <button v-debounce="handleDebounce">防抖</button>
</template>
​
<script>
    export default {
        methods: {
            handleDebounce() {
                console.log('防抖，触发一次')
            }
        }
    }
</script>
4.节流指令 v-throttle

场景：同防抖指令场景实现：使用节流方法，限制1秒内按钮只能点击一次思路：1.定义一个开关，默认时打开状态2.在点击按钮后关闭开关，在1秒内再点击按钮，不执行回调函数3.1秒过后，开关打开

const throttle = {
    bind: (el, binding) => {
        // 没有绑定函数抛出错误
        if (typeof binding.value !== 'function') {
            throw 'throttle callback not a function'
        }
​
        // 开关
        el._flag = true
        el._timer = null
        el._handler = () => {
            if (!el._flag) return
​
            // 函数执行后关闭开关
            el._flag && binding.value()
            el._flag = false
​
            if (el._timer) clearTimeout(el._timer)
​
            el._timer = setTimeout(_ => {
                el._flag = true
            }, 1000)
        }
        el.addEventListener('click', el._handler)
    },
    unbind: (el, binding) => {
        el.removeEventListener('click', el._handler)
    }
}
​
export default throttle

使用：给DOM节点加上v-throttle及回调函数

<template>
    <button v-throttle="handleThrottle">节流</button>
</template>
​
<script>
    export default {
        methods: {
            handleThrottle() {
                console.log('节流，触发一次')
            }
        }
    }
</script>
5.点击元素外部指令 v-clickOut

场景：弹窗，点击弹窗外部（即蒙版），关闭弹窗实现：点击指定区域外部，执行相应回调函数思路：判断点击的元素是否指定元素是则不执行，否则执行相应回调函数

const clickOut = {
    bind: (el, binding) => {
        el._handler = e => {
            // 判断点击的元素是否本身，是则返回
            if (el.contains(e.target)) return
​
            // 如果绑定了函数，则调用函数
            if (typeof binding.value === 'function') {
                binding.value()
            }
        }
​
        // 添加事件监听
        setTimeout(_ => {
            document.addEventListener('click', el._handler)
        }, 0)
    },
    unbind(el) {
        // 解除事件监听
        document.removeEventListener('click', el._handler)
    }
}
​
export default clickOut

使用：给指定DOM节点加v-clickOut及回调函数

<template>
    <!-- v-clickOut、v-click-out都可以使用 -->
    <div style="width:100px;height:100px;background-color:red;" v-click-out="handleClickOut">target DOM</div>
</template>
​
<script>
    export default {
        methods: {
            handleClickOut() {
                console.log('外部元素触发')
            }
        }
    }
</script>
6.拖拽指令 v-draggable

实现：指定元素在可视区域内任意拖拽思路：设置指定元素相对定位，父元素绝对定位鼠标按下时（触发onmousedown事件）时记录指定元素当前的left、top值鼠标移动时（触发onmousemove事件）时计算每次移动的横向距离、纵向距离，并改变left、top值鼠标松开时（触发onmouseup事件）时完成一次拖拽

const draggable = {
    inserted: (el) => {
        el.style.cursor = 'move'
        el._onmousedown = e => {
            // 记录当前的left、top值
            let disX = e.pageX - el.offsetLeft
            let disY = e.pageY - el.offsetTop
​
            // 鼠标移动
            document.onmousemove = e => {
                let x = e.pageX - disX
                let y = e.pageY - disY
​
                // 临界值处理
                let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
                let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
​
                if (x < 0) {
                    x = 0
                } else if (x > maxX) {
                    x = maxX
                }
​
                if (y < 0) {
                    y = 0
                } else if (y > maxY) {
                    y = maxY
                }
​
                el.style.left = `${x}px`
                el.style.top = `${y}px`
            }
            document.onmouseup = _ => {
                document.onmousemove = document.onmouseup = null
            }
        }
    }
}
​
export default draggable

使用：给指定DOM节点加v-draggable即可

<template>
    <!-- 需要加上position:absolute -->
    <div style="width:40px;height:40px;background-color:green;position:absolute;" v-draggable></div>
</template>
7.水印指令 v-Money

实现：给指定页面添加背景水印思路：使用canvas特性生成base64格式的图片文件，设置其字体大小，颜色等。将其设置为背景图，实现水印效果

function addWaterMarker (str, parentNode, font, textColor) {
    // 水印文字，父元素，字体，文字颜色
    var can = document.createElement('canvas')
    parentNode.appendChild(can)
    can.width = 200
    can.height = 150
    can.style.display = 'none'
    var cans = can.getContext('2d')
    cans.rotate((-20 * Math.PI) / 180)
    cans.font = font || '16px Microsoft JhengHei'
    cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
    cans.textAlign = 'left'
    cans.textBaseline = 'Middle'
    cans.fillText(str, can.width / 10, can.height / 2)
    parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
​
const waterMarker = {
    bind: function (el, binding) {
        addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
    }
}
​
export default waterMarker

使用：给DOM节点加上v-waterMarker，并设置水印文案，字体大小及颜色等

<template>
    <div class="water-marker" v-waterMarker="waterMarker"></div>
</template>

<script>
    export default {
        waterMarker: {
            text: '版权所有',
            font: '14px Microsoft Fangc',
            textColor: 'rgba(180, 180, 180, 0.4)'
        }
    }
</script>

<style lang="scss" scoped>
.water-marker {
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
}
</style>

嗓子疼谁心疼
关注
  • 57
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 自定义指令
似水流年QC的博客
07-03 1195
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。
Vue自定义指令
月光晒了很凉快的博客
09-04 4994
除了核心功能默认内置的指令，Vue也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。自定义指令分为：全局指令和局部指令，当全局指令和局部指令同名时以局部指令为准。自定义指令常用钩子函数：指令的钩子会传递以下几种参数：钩子函数的执行顺序： 程序一执行，当数据源中的数据第一次绑定了元素就会执行函数，当绑定元素插入到父元素中，即显示到视图中时，会执行函数：当我们改变视图，使得数据发生改变时，就会执行和函数：当我们销毁被绑定元素时，即被绑定元素和数
Vue自定义命令
马优晨
08-28 479
自定义指令分为两个部分： 1-元素指令 2-属性指令 元素指令相当于定义一个轻量级的组件 对于指令这里需要讲解一下钩子函数，对于Vue.js提供了几个钩子函数，这几个钩子函数之间都是可选的，相互并不制约。钩子函数的作用就是： 将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令钩子函数分类： bind - 只调用一次，在指令第一次绑定到元素上时候调用 update -
vue 自定义命令 v-copy 复制文字
weixin_41850621的博客
03-21 456
vue 自定义命令
vue 自定义命令控制打包运行切换环境。
举案齐眉意难平
02-22 1467
如何自定义vue 打包，运行的npm 指令
Vue自定义指令方法
xjx0121的博客
09-22 452
在main.js文件中定义。
总结8个常用的Vue自定义指令
qq_44741577的博客
02-01 1242
Vue 2.X 与 Vue 3.X 相比，钩子函数是存在变化的自定义指令要分全局自定义指令和局部指令全局指令：通过应用实例身上的directive()注册一个全局自定义指令Vue.directive(指令名， { 自定义指令生命周期 })// Vue 2.Xel.focus()})// Vue 3.Xel.focus()})这是一个简单的小案例，通过注册一个v-focus指令，实现一个在页面加载完成后自动让输入框获取焦点的小功能。实现：根据正则表达式，设计自定义处理表单输入规则的指令。
vue-自定义指令
qq_39111074的博客
11-29 336
局部自定义指令 局部自定义指令是以变量的形式定义，定义后，需要接收，然后才能使用 eg: // 自定义指令的定义 const directives = { 自定义指令名: { updated(el, binding) { // 处理内容 } } } // 自定义指令的接收 const app = Vue.createApp({ //、、、 // 局部自定义指令接收 directives: directives // 自定义指令的使用 template
二、vue 自定义命令实现节流、防抖
qq_42715869的博客
01-10 611
文章目录vue自定义命令实现节流、防抖--实现自定义命令使用方法 vue自定义命令实现节流、防抖–实现 /* * @Author: hangysx * @LastEditors: Please set LastEditors * @LastEditTime: 2022-01-10 22:14:13 * @Description: 节流、防抖自定义指令 */ import Vue from 'vue' // 节流 const throttle = { install(Vue) { Vu
Vue自定义指令的生命周期
独特的人
12-14 2200
自定义指令的生命周期
Vue组件之自定义事件的功能图解
08-28
Vue组件之自定义事件的功能图解 Vue组件自定义事件是指在Vue应用程序中，组件之间可以通过自定义事件来实现通信和交互的功能。在本文中，我们将通过图文并茂的形式来介绍Vue组件之自定义事件的功能和使用方法。 一...
vue自定义time标签
05-28
总的来说，Vue自定义`time`标签的核心在于利用数据绑定和计算属性来处理时间格式化，同时结合`moment.js`或Vue内置的日期处理方法，实现动态、可定制的时间显示功能。通过深入理解和实践，你可以创建更加复杂和高效...
Vue自定义指令写法与个人理解
01-19
指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们...
vue-terminal-ui-:desktop_computer:终端UI模拟器Vue：自定义和基本命令-Vue.js开发
05-27
演示/沙盒可在此处使用：安装npm i vue-terminal-ui --save用法//导入插件从'vue-terminal-ui'导入VueTerminal //添加到组件部分component {VueTerminal}，//添加方法以调用命令是类型化的方法：{onCliCommand（data...
vue自定义弹出式菜单PopupMenu（自适应屏幕点击位置）
01-25
在Vue.js框架中，自定义弹出式菜单（PopupMenu）是一种常见的交互元素，它能够根据用户的点击事件在合适的位置展示相关信息或操作选项。这个自定义组件的实现涉及到多个技术点，包括组件化开发、事件监听、响应式...
vue开启keep-alive缓存时，关于子组件上使用:key=“id“的问题以及解决方案
weixin_45549481的博客
08-02 123
2、致命错误，修改URL的id时，缓存之前有数据，子组件销毁重建，请求接口也有数据，但是因为keep-alive缓存了组件实例而不是组件的数据，表格的数据丢失；2、:key=“timeStap”，结合activated、deactivated —— —— keep-alive缓存activated时，会重新请求。1、切换tag，会触发id的变更，再次切回来时，将会触发表格销毁重建，重新请求数据，局部刷新表格的缓存丢失；特定场景下，必须使用:key="id"时，可以考虑下面的两个方式。
第十四节：Vben Admin实战-系统管理之角色菜单绑定
最新发布
cui_win的专栏
08-02 157
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 124
SignList这三个页面就是需要切换的页面。
keep-alive 是vue内置组件 缓存组件内部状态 避免重新渲染
lryh_的博客
08-02 211
离开被缓存的A组件 进入被缓存的B组件，会触发A组件的 deactivated ，则第一次进入被缓存的B组件 会触发beforeCreate ==>created ==>beforeMount ==>A组件的deactivated ==>mounted ==>activated。第一次进入被缓存的组件A 会触发beforeCreate ==>created ==>beforeMount ==>mounted ==>activated。可以缓存组件，也可以缓存路由。
vue3自定义命令详解
06-03
在 Vue3 中，自定义命令可以使用 `directive` 函数来实现。 `directive` 函数接受两个参数，第一个参数为指令名称，第二个参数为指令选项对象，其中包含了指令的各种钩子函数。 下面是一个自定义命令的示例，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值