[Vue] 自定义命令

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/456227.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

文章目录 前言相关链接Nuget选择知识补充JWT不是加密算法可逆加密和不可逆加密 普通Jwt&#xff08;不推荐&#xff09;项目环境Nuget 最小JWT测试在WebApi中简单使用简单使用运行结果 WebApi 授权&#xff0c;博客太老了&#xff0c;尝试失败 WebApi .net core 8.0 最新版Jwt …
阅读更多...
【投稿优惠-EI稳定检索】2024年图像处理与机械系统工程国际学术会议 (ICIPMSE 2024)

【投稿优惠-EI稳定检索】2024年图像处理与机械系统工程国际学术会议 (ICIPMSE 2024)

【投稿优惠-EI稳定检索】2024年图像处理与机械系统工程国际学术会议 (ICIPMSE 2024) 大会主题: (主题包括但不限于, 更多主题请咨询会务组苏老师) 图像处理 基于图像的渲染 计算机视觉 可视化分析 模式识别 3D打印 渲染和动画 渲染技术 电脑动画 基于草图的建模 机械…
阅读更多...
详解Python中%r和%s的区别及用法

详解Python中%r和%s的区别及用法

首先看下面的定义&#xff1a; %r用rper()方法处理对象 %s用str()方法处理对象 函数str() 用于将值转化为适于人阅读的形式&#xff0c;而repr() 转化为供解释器读取的形式&#xff08;如果没有等价的语法&#xff0c;则会发生SyntaxError 异常&#xff09; 某对象没有适于人…
阅读更多...
【leetcode+深度/广度优先搜索】841. 钥匙和房间 (DFS,BFS)

【leetcode+深度/广度优先搜索】841. 钥匙和房间 (DFS,BFS)

leetcode-cn&#xff1a;leetcode面试75道精华&#xff1a;https://leetcode.cn/studyplan/leetcode-75/ 841.钥匙和房间&#xff1a;https://leetcode.cn/problems/keys-and-rooms/description/ 一、题目&#xff1a;841. 钥匙和房间 有 n 个房间&#xff0c;房间按从 0 到 n…
阅读更多...
零代码开发的优势 零代码平台开发的好处

零代码开发的优势 零代码平台开发的好处

随着数字化浪潮的推进&#xff0c;企业对于数据驱动的需求越来越高&#xff0c;而零代码快速开发平台正是满足这一需求的重要工具之一。零代码开发平台是一种无需编写代码即可开发应用程序的平台&#xff0c;它可以让用户通过拖、拉、拽的方式快速创建高度定制化的应用。这种平…
阅读更多...
VC++ BitBlt函数学习

VC++ BitBlt函数学习

1 BitBlt BitBlt函数执行与像素矩形相对应的颜色数据的位块传输,从指定的源设备上下文传输到目标设备上下文。 把位块从一个DC传到另一个DC； VC单文档工程，写3句代码如下； void CDeskdcView::OnDraw(CDC* pDC) {CDeskdcDoc* pDoc = GetDocument();ASSERT_VALID(pDoc);//…
阅读更多...
【老旧小区用电安全谁能管？】安科瑞智慧用电安全管理系统解决方案

【老旧小区用电安全谁能管？】安科瑞智慧用电安全管理系统解决方案

行业背景 电气火灾指由电气故障引发的火灾。每年以30%的比例高居各类火灾原因之首。以50%到80%的比例高居重特大火灾之首。已成为业界重点关注的对象并为此进行着孜孜不倦的努力。 国务院安委会也于2017年5月至2020年4月年开展了为期3年的电气火灾综合治理工作。在各界努力的…
阅读更多...
6. C++ 钻石继承与虚继承

6. C++ 钻石继承与虚继承

1. 钻石继承与虚继承 2. 什么是钻石继承&#xff1f; ANSWER&#xff1a;假设我们已经有了两个类Father1和Father2&#xff0c;他们都是类GrandFather的子类。现在又有一个新类Son&#xff0c;这个新类通过多继承机制对类Father1和Father2都进行了继承&#xff0c;此时类Gran…
阅读更多...
Pulsar IO实战

Pulsar IO实战

一、引言 今天跟着 官方文档 基于docker玩一把Pulsar IO吧 二、概要 在用户能够轻松的将消息队列跟其他系统(数据库、其他消息系统)一起使用时&#xff0c;消息队列的作用才是最强大的。而Pulsar IO connectors可以让你很轻松的创建、部署以及管理这些跟外部系统的连接&#…
阅读更多...
在SwiftUI中使用Buider模式创建复杂组件

在SwiftUI中使用Buider模式创建复杂组件

在SwiftUI中使用Buider模式创建复杂组件 我们在前面的博客闲聊SwiftUI中的自定义组件中聊到了如何在SwiftU中创建自定义组件。 在那里&#xff0c;我们创建了一个非常简单的组件RedBox&#xff0c;它将展示内容增加一个红色的边框。 RedBox非常简单&#xff0c;我们用普通的方…
阅读更多...
面试六--TCP粘包问题

面试六--TCP粘包问题

1.流式传输协议 流式传输协议&#xff08;Streaming Protocol&#xff09;是一种用于在网络上传输数据的通信协议&#xff0c;它允许数据以连续的流的形式进行传输&#xff0c;而不是一次性发送完整的数据包。流式传输协议即协议的内容是像流水一样的字节流&#xff0c;内容与内…
阅读更多...
Go——数组

Go——数组

Golang Array和以往认知的数组有很大的。 数组是同一种数据类型的固定长度的序列。数组定义&#xff1a;var a[len] int&#xff0c;比如&#xff1a;var a [5]int&#xff0c;数组长度必须是常量&#xff0c;且类型的组成部分。一旦定义&#xff0c;长度不能变。长度是数组类…
阅读更多...
Focal and Global Knowledge Distillation forDetectors

Focal and Global Knowledge Distillation forDetectors

摘要 文章指出&#xff0c;在目标检测中&#xff0c;教师和学生在不同领域的特征差异很大&#xff0c;尤其是在前景和背景中。如果我们 平等地蒸馏它们&#xff0c;特征图之间的不均匀差异将对蒸馏产生负面影响。因此&#xff0c;我们提出了局部和全局蒸馏。局部蒸馏分离前景和…
阅读更多...
力扣101---对称二叉树（简单题）

力扣101---对称二叉树（简单题）

题目描述&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 非递归Java代…
阅读更多...
Leetcode 1514 概率最大的路径

Leetcode 1514 概率最大的路径

文章目录 1. 题目描述2. 我的尝试 1. 题目描述 原题链接&#xff1a;Leetcode 1514 概率最大的路径 给你一个由 n 个节点&#xff08;下标从 0 开始&#xff09;组成的无向加权图&#xff0c;该图由一个描述边的列表组成&#xff0c;其中 edges[i] [a, b] 表示连接节点 a 和 b…
阅读更多...
C#，数值计算，希尔伯特矩阵（Hilbert Matrix）的算法与源代码

C#，数值计算，希尔伯特矩阵（Hilbert Matrix）的算法与源代码

Hilbert, David (1862-1943) 1 希尔伯特（Hilbert） 德国数学家，在《几何学基础》中提出了第一套严格的几何公理（1899年）。他还证明了自己的系统是自洽的。他发明了一条简单的空间填充曲线，即埃里克魏斯汀的数学世界，即希尔伯特曲线，埃里克魏斯汀的数学世界，并证明了不…
阅读更多...
win11创建本地局域网网站

win11创建本地局域网网站

前言 本篇文章介绍在windows11环境下通过IIS(Internet Information Services)管理器创建局域网网站 启用windows相关功能 键盘win R打开运行窗口输入optionalfeatures&#xff0c;回车打开windows功能界面选中下面这几项,点击确定&#xff0c;稍等即可 打开IIS 按下win键…
阅读更多...
3.1_6 基本地址变换机构

3.1_6 基本地址变换机构

文章目录 3.1_6 基本地址变换机构&#xff08;一&#xff09;基本地址变换机构&#xff08;二&#xff09;对页表项大小的进一步探讨 总结 3.1_6 基本地址变换机构 提示&#xff1a; 重点理解、记忆**基本地址变换机构&#xff08;即用于实现逻辑地址到物理地址转换的一组硬件机…
阅读更多...
网络层：地址解析协议ARP、网际控制报文协议ICMP、虚拟专用网络VPN、网络地址转换NAT

网络层：地址解析协议ARP、网际控制报文协议ICMP、虚拟专用网络VPN、网络地址转换NAT

文章目录 地址解析协议ARP解决的问题ARP解析流程ARP高速缓存 网际控制报文协议ICMPICMP报文的种类ICMP差错报告报文ICMP询问报文 ICMP应用举例分组网间探测PING(Packet InterNet Groper)traceroute(tracert)确定路径的MTU 虚拟专用网络专用地址虚拟专用网络远程接入VPN(remote …
阅读更多...
2024年文学、历史与艺术设计国际会议(ICLHAD2024)

2024年文学、历史与艺术设计国际会议(ICLHAD2024)

2024年文学、历史与艺术设计国际会议(ICLHAD2024) 一、【会议简介】 2024国际文学、历史和艺术设计会议&#xff08;IACLHAD 2024&#xff09;将在中国杭州举行。本次大会将继续遵循学术性和国际性原则&#xff0c;邀请国内外高校、科研院所、企事业单位的文史美术设计领域的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站