[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 = valueel.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 timerel.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 = trueel._timer = nullel._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.offsetLeftlet disY = e.pageY - el.offsetTop
​// 鼠标移动document.onmousemove = e => {let x = e.pageX - disXlet 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 = 200can.height = 150can.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.mzph.cn/news/740973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用endnote插入引用文献导致word英文和数字变成符号的解决方案

使用endnote插入引用文献导致word英文和数字变成符号的解决方案 如图使用endnote插入引用文献导致word英文和数字变成符号字体Wingdings Wingdings 是一个符号字体系列&#xff0c;它将许多字母渲染成各式各样的符号&#xff0c;用途十分广泛。 **解决方法&#xff1a;**直接通…

Linux基础学习:常用命令

目录结构及其常用命令 处理目录的常用命令&#xff1a; ls &#xff1a;列出目录及文件名cd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录rmdir&#xff1a;删除一个空的目录cp&#xff1a;复制文件或目录rm&#xff1a;删除文件或目录…

uni-app网络请求封装及发送

在看本篇文章之前&#xff0c;请先至少学会独立完成vue2项目 首先配置request.js const url_all {DEV: http://localhost:8888, // 开发// 生产 PRO: http://111.111.111.111:8080, }let BASEURL url_all[DEV] // 调整当前环境/** 全局请求封装* param path 请求路径* pa…

ROS2 Python导入三方库及自定义python程序

ROS2 Python导入三方库及自定义python程序 文章目录 前言正文导入三方库文件导入自定义python程序 前言 本文主要讲解ROS2建立pyhon包时如何导入三方库文件&#xff08;.so&#xff09;&#xff0c;及自定义的python程序。 正文 导入三方库文件 此处以Jaka驱动为例&#xf…

【3GPP】【核心网】【5G】NG接口介绍(超详细)

目录 1. NG接口定义 2. 接口原则和功能 3. NG 接口控制面 5. NG接口主要信令流程 6. NG SETUP过程 1. NG接口定义 NG接口指无线接入网与5G核心网之间的接口。在5G SA网络中&#xff0c;gNB之间通过Xn接口进行连接,gNB与5GC之间通过NG接口进行连接。NG接口分为NG-C接口和NG…

Python控制摄像头并获取数据文件

一、引言 摄像头作为计算机视觉领域的核心设备之一&#xff0c;广泛应用于视频监控、图像采集和数据处理等领域。通过Python编程语言&#xff0c;我们可以实现对摄像头的精确控制&#xff0c;包括摄像头的开启、关闭、参数设置以及数据获取等功能。本文将指导读者完成这些操作…

CVE-2023-38836 BoidCMSv.2.0.0 后台文件上传漏洞

漏洞简介 BoidCMS是一个免费的开源平面文件 CMS&#xff0c;用于构建简单的网站和博客&#xff0c;使用 PHP 开发并使用 JSON 作为数据库。它的安装无需配置或安装任何关系数据库&#xff08;如 MySQL&#xff09;。您只需要一个支持PHP 的Web服务器。在 BoidCMS v.2.0.0 中存…

【LLM知识】笔记

为什么现在的LLM以decoder-only为主 为什么现在的LLM都是Decoder only的架构&#xff1f; 回答一 回答二 encoder-decoder 常用于处理需要对输入和输出建立精确的映射关系的任务&#xff08;机器翻译、文本摘要等&#xff09;&#xff0c;更具有专业性优势 输入的语义理解会…

c#简易学生管理系统

https://pan.baidu.com/s/1kCPvWg8P5hvlf26nGf2vxg?pwdya45 ya45

Linux运维:磁盘分区与挂载详解

Linux运维&#xff1a;磁盘分区与挂载详解 1、磁盘分区的原理2、查看系统中所有的磁盘设备及其分区信息3、进行磁盘分区&#xff08;对于sdb新磁盘&#xff09;4、格式化分区5、挂载分区&#xff08;临时挂载、永久挂载&#xff09;6、取消挂载分区7、删除分区 &#x1f496;Th…

立式学习灯有什么讲究?大路灯原来要这样选,五大台灯分享!

立式学习灯作为近年来最适合照明的护眼家电&#xff0c;为用户提供了良好的光线环境&#xff0c;并且还能够减少光线带来的视觉疲劳感。然而&#xff0c;随着其销量的节节攀升商家为了谋取利润&#xff0c;市面上也涌现了很多劣质产品&#xff0c;这些产品普遍没有经过技术调教…

【AnaConda/MiniConda/Linux】使用sudo python或切换root管理员conda环境被绕过解决方案

写在前面 部分机型修改环境变量存在风险&#xff0c;可能用于被覆盖而出现大量命令无法找到的情况 可以输入这个解决 export PATH/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin往期相关内容 探索Miniconda3&#xff1a;简单、灵活的Python环境和…

LeetCode1261. Find Elements in a Contaminated Binary Tree

文章目录 一、题目二、题解 一、题目 Given a binary tree with the following rules: root.val 0 If treeNode.val x and treeNode.left ! null, then treeNode.left.val 2 * x 1 If treeNode.val x and treeNode.right ! null, then treeNode.right.val 2 * x 2 Now…

逆变器调试踩坑专题之测试设备

一个好的PV模拟器&#xff08;DC直流源&#xff09;是成功的一半 不同于实际现场的PV特性&#xff0c;现在各个测试设备生产厂家的PV模拟器&#xff08;DC直流源&#xff09;本身的控制频率和硬件自带的谐振频率会影响我们逆变器自身的控制环路。 如果DC直流源的控制环路和逆变…

leetcode16--最接近的三数之和

1. 题意 求最接近的三数之和 最接近的三数之和 2. 题解 与三数之和类似 class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int sz nums.size();int sum nums[0] nums[1] nums[2];for (int i 0…

刷题日记——16进制不进位加法(厦门大学机试)

例题 分析 输入 本题解题关键在于输入的两个数位数不同时候需要尾数对齐&#xff0c;由于是16进制输入&#xff0c;含有字母&#xff0c;需要当作字符串输入&#xff0c;当然输出也要字母&#xff0c;那么就需要我们的两个老伙计了&#xff0c;一个是map&#xff0c;另一个是…

一文带你详解天池医疗数据集

医疗作为和民生健康息息相关的产业&#xff0c;通过天池大赛开放出一批有临床科研价值的数据集&#xff0c;涵盖了预防、辅诊、医学科研等主题。 与此同时&#xff0c;阿里云天池平台也积极推动产学研的共同进步&#xff0c;开源了多个本地生活领域的数据集&#xff0c;如aBea…

数据库类型转换

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 数据类型转换是指将一个数据类型的值转换为另一个数据类型的值的过程。数据类型转换通常发生在不同数据类型的比较、计算或赋值操作中。kingbase主要分为隐式转换和显示转换&#xff0c;本篇文章主要介绍这两种转换方…

2.经典项目-海量用户即使通讯系统

1.实现功能-完成注册用户 完成用户注册的步骤(客户端) 1.将User移动到common/message文件夹下 2.在message中新增注册用户的结构体 const (LoginMesType "LoginMes"LoginResMesType "LoginResMes"RegisterMesType "RegisterMes"…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的危险物品检测系统(深度学习模型+PySide6界面+训练数据集+Python代码)

摘要&#xff1a;本文深入介绍了一个采用深度学习技术的危险物品识别系统&#xff0c;该系统融合了最新的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5等早期版本的性能。该系统在处理图像、视频、实时视频流及批量文件时&#xff0c;能够准确识别和分类各种危险物品…