vue 自定义指令directive的使用场景
作者：口袋の的天空 发布时间：2024-05-13 09:09:08
标签：vue,自定义,指令,directive
1. 一个指令定义对象可以提供如下几个钩子函数(均为可选)
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已 * 入文档中)。
update:只要当前元素不被移除，其他操作几乎都会触发这2个生命周期，先触发update后触发componentUpdate。虚拟DOM什么时候更新：只要涉及到元素的隐藏、显示（display）值的改变、内容的改变等都会触发虚拟DOM更新.
componentUpdated:组件更新
unbind:当使用指令的元素被卸载的时候会执行，就是当前元素被移除的时候,只调用一次
Vue.directive 内置了五个钩子函数 ：
bind(绑定触发)、inserted(插入触发)、update(更新触发)、componentUpdated(组件更新触发)和unbind(解绑触发)函
// 注册
Vue.directive('my-directive',{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function() {}
})
2.指令钩子函数会被传入以下参数
el：指定所绑定的元素，可以用来直接操作DOM
binding:一个对象，包含以下属性：
name:指令名，不包含前缀v-
value:指令的绑定值，例如：v-my-directive="1+1"中，绑定值为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 钩子中可用
vnode：vue编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用
除了el之外，其他参数都应该是只读的，不能修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
3.使用自定义指令场景的示例
drag.js
import Vue from 'vue'
import { Message } from 'element-ui';
// 自定义指令示例1：弹窗拖拽
Vue.directive('dialogDrag',{
bind(el,binding,vnode,oldVnode){
const dialogHeader = el.querySelector('.el-dialog__header');
const dialogDom = el.querySelector('.el-dialog');
dialogHeader.style.cursor = 'move'
/**
* 不同浏览器获取行内样式属性
* ie浏览器： dom元素.currentStyle
* 火狐浏览器：window.getComputedStyle(dom元素, null)
*/
const sty = dialogDom.currentStyle || window.getComputedStyle(dialogDom, null)
dialogHeader.onmousedown = (e) => {
//按下鼠标，获取点击的位置 距离 弹窗的左边和上边的距离
//点击的点距离左边窗口的距离 - 弹窗距离左边窗口的距离
const distX = e.clientX - dialogHeader.offsetLeft;
const distY = e.clientY - dialogHeader.offsetTop;
//弹窗的left属性值和top属性值
let styL, styT
//注意在ie中，第一次获取到的值为组件自带50％，移动之后赋值为Px
if(sty.left.includes('％')){
styL = +document.body.clientWidth * (+sty.left.replace(/％/g,'') / 100)
styT = +document,body.clientHeight * (+sty.top.replace(/％/g,'') / 100)
}else{
styL = +sty.left.replace(/px/g,'');
styT = +sty.top.replace(/px/g,'');
}
document.onmousemove = function(e) {
//通过事件委托，计算移动距离
const l = e.clientX - distX
const t = e.clientY - distY
//移动当前的元素
dialogDom.style.left = `${l + styL}px`
dialogDom.style.top = `${t + styT}px`
}
document.onmouseup = function(e){
document.onmousemove = null
document.onmouseup = null
}
}
}
})
//自定义指令示例2：v-dialogDragWidth 可拖动弹窗宽度（右侧边）
Vue.directive('dragWidth',{
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 5px; background: inherit; height: 80％; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
lineEl.addEventListener('mousedown',
function (e) {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
// 当前宽度
const curWidth = dragDom.offsetWidth;
document.onmousemove = function (e) {
e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
if(l > 0){
dragDom.style.width = `${curWidth + l}px`;
}
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
})
// 自定义指令示例3：v-dialogDragWidth 可拖动弹窗高度（右下角）
Vue.directive('dragHeight',{
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
lineEl.addEventListener('mousedown',
function(e) {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;
// 当前宽度 高度
const curWidth = dragDom.offsetWidth;
const curHeight = dragDom.offsetHeight;
document.onmousemove = function(e) {
e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const xl = e.clientX - disX;
const yl = e.clientY - disY
dragDom.style.width = `${curWidth + xl}px`;
dragDom.style.height = `${curHeight + yl}px`;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
})
// 自定义指令示例4：图片加载前填充背景色
Vue.directive('imgUrl',function(el,binding){
var color=Math.floor(Math.random()*1000000);//设置随机颜色
el.style.backgroundColor='#'+color;
var img=new Image();
img.src=binding.value;// -->binding.value指的是指令后的参数
img.onload=function(){
el.style.backgroundColor='';
el.src=binding.value;
}
})
// 自定义指令示例5：输入框聚焦
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时……
inserted (el) {
// 聚焦元素
el.querySelector('input').focus()
},
});
// 自定义指令示例6：设置防抖自定义指令
Vue.directive('throttle', {
bind: (el, binding) => {
let setTime = binding.value; // 可设置防抖时间
if (!setTime) { // 用户若不设置防抖时间，则默认2s
setTime = 1000;
}
let cbFun;
el.addEventListener('click', event => {
if (!cbFun) { // 第一次执行
cbFun = setTimeout(() => {
cbFun = null;
}, setTime);
} else {
/*如果多个事件 * 被附加到相同元素的相同事件类型上，当此事件触发时，
它们会按其被添加的顺序被调用。如果在其中一个事件 * 中执行 stopImmediatePropagation() ，那么剩下的事件 * 都不会被调用*/
event && event.stopImmediatePropagation();
}
}, true);
},
});
// 自定义指令示例7：点击按钮操作频繁给出提示
Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
Message.warning('操作频繁')
setTimeout(() => {
el.disabled = false
//可设置时间
}, binding.value || 3000)
}
})
}
})
main.js中引入文件：
import '@/assets/js/drag.js'
页面使用：
<template>
<div>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<div style="display:flex">
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
<img v-imgUrl="url"></img>
</div>
<div>
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"></el-input>
<el-input v-focus placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input>
</div>
<div>
<el-button type="danger" v-throttle @click="throttleBtn">危险按钮</el-button>
<el-button @click="submitForm()">创建</el-button>
</div>
<el-dialog title="提示" v-dialogDrag v-dragWidth v-dragHeight :visible.sync="dialogVisible" width="30％" :before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
url:'//www.baidu.com/img/flexible/logo/pc/result.png',
input1: '',
input2: '',
}
},
methods: {
handleClose(done) {
console.log('弹窗打开')
},
throttleBtn(){
console.log('我的用来测试防抖的按钮')
},
submitForm(){
this.$message.error('Message 消息提示每次只能1个');
}
},
}
</script>
<style>
img{
width: 100px;
height: 100px;
}
</style>
看下效果吧：
首先进入页面，
第二个输入框会鼠标聚焦，
点击按钮，会有防止重复点击
图片加载前有默认背景色
弹窗 可以随处移动。右边可拖拽变宽，右下角可以整体变大
来源：https://blog.csdn.net/qq_39928481/article/details/130087184
0
投稿猜你喜欢
- 前言:看似简单的任务，往往隐藏陷阱！一个常见的任务是在一个列表上迭代，并根据条件删除一些元素。本文将展示如何完成该任务的不同方法，同时展示一
- 尽管 ORDER BY 不是和索引的顺序准确匹配，索引还是可以被用到，只要不用的索引部分和所有的额外的 ORDER BY 字段在 WHERE
- 废话不多说，大家直接看代码吧！"""遗传算法实现求函数极大值—Zjh"""imp
- 本文讲述了python提示No module named images的解决方法，非常实用！分享给大家供大家参考。具体方法如下：出现提示：I
先思考一些问题：它是做什么的、以及怎么使用它。带着这些问题往下走。consul是做什么的consul用于微服务下的服务治理。服务治理是什么？- 在ASP.NET中使用js时，js获取DOM元素时，经常获取不到，这是因为获取的方法有误，现在介绍一方法，解决如何使用js获取ASP.NET
- 什么是集合1.集合是一个可变容器2.集合内的数据对象都是唯一的(不能重复)3.集合是无序的存储结构,集合内的数据没有先后关系4.集合是可迭代
- 前言对于MySQL的理解，我认为很多性能优化工作、主从主主复制都是在调整参数，来适应不同时期不同数量级的数据。故，理解透彻my.cnf里的参
- 先给大家介绍php in array函数基本知识热热身。定义和用法in_array() 函数在数组中搜索给定的值。语法in_array(va
- 首先说明一下SQL Server内存占用由哪几部分组成。SQL Server占用的内存主要由三部分组成：数据缓存(Data Buffer)、
- 1. 作用将类方法转换为类属性，可以用 . 直接获取属性值或者对属性进行赋值2.实现方式使用property类来实现，也可以使用proper
- 切分文件最近遇到需要切分文件的需求，当然首选用python来解决，网上搜了下感觉都太复杂了，其实用python自带函数即可解决。f = op
- Pydicom单张影像的读取使用 pydicom.dcmread() 函数进行单张影像的读取,返回一个pydicom.dataset.Fil
- 一 方法汇总在 Python 进程中，有几种方法可以实现数据交互：共享内存：这是一种用于进程间通信的高效方式。多个进程可以访问同一个共享内存
- 经过摸索和实践，我把自己的解决方法，写在下面： 说明： 我的Oracle客户端的版本是 oracle 9i， 安装client端的时候，不能
- 本文主要研究的是python将字典内容存入mysql，分享了实现代码，具体介绍如下。1.背景项目需要，用python实现了将字典内容存入本地
- 一、解析PDF（简历内推）应用场景：简历内推（解析内容：包括不限于姓名、邮箱、电话号码、学历等信息）输入：要解析的文件路径输出：需要解析的内
- 本文实例讲述了python通过get,post方式发送http请求和接收http响应的方法。分享给大家供大家参考。具体如下：测试用CGI,名
- python3实现批量修改文件名，供大家参考，具体内容如下以批量修改某文件夹下所有图片名称为例，注释超详细，万能模板，读者可举一反三，适当修
- 背景：在pycharm中运行正常，但是使用命令方式就提示没有模块解决方案在Python安装目录下的\Lib\site-packages文件夹
