1. Vue.directive フック関数 (どちらもオプション)
Vue.directiveには、bind (バインド トリガー)、insert (挿入トリガー)、update (更新トリガー)、componentUpdated (コンポーネント更新トリガー)、unbind (バインド解除トリガー) の 5 つの組み込みフック関数があります。
bind: ディレクティブが要素に初めてバインドされるときに、1 回だけ呼び出されます。ここでは、ワンタイム初期化設定を行うことができます。
inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるとは限りません)。
update: 現在の要素が削除されない限り、他のほとんどすべての操作によって、これら 2 つのライフ サイクルがトリガーされます。最初に update がトリガーされ、次に componentUpdate がトリガーされます。仮想 DOM の更新はいつ行われますか: 要素の非表示、表示値の変更、コンテンツの変更などを含む限り、仮想 DOM の更新がトリガーされます. :コンポーネントの更新: 命令を使用する要素がアンロードされるときに実行されます.これは
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" の場合、式の値は "1 + 1" です。
arg: コマンドに渡されるパラメーター。たとえば、v-my-directive:foo の場合、arg の値は「foo」です。
modifiers: モディファイヤを含むオブジェクト。例: v-my-directive.foo.bar。modifier オブジェクトの値は { foo: true, bar: true } です。
vnode: Vue コンパイルによって生成された
oldVnode仮想ノード : update および componentUpdated フックでのみ使用可能な以前の仮想
vnodeノード : vue コンパイルによって生成された仮想ノード
oldVnode: update および componentUpdated フックでのみ使用可能な以前の仮想ノード
除了el之外，其他参数都应该是只读的，不能修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
3. カスタム コマンド シナリオの使用例
【1】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)
}
})
}
})
[2] main.js にファイルを導入します。
import '@/utils/drag.js'
【3】ページ利用：
<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>
【4】効果：
第二个输入框会鼠标聚焦，
点击按钮，会有防止重复点击
图片加载前有默认背景色
弹窗 可以随处移动。右边可拖拽变宽，右下角可以整体变大