284 lines
7.9 KiB
JavaScript
284 lines
7.9 KiB
JavaScript
/* eslint-disable no-useless-escape */
|
||
import Vue from 'vue';
|
||
import store from '@/store';
|
||
|
||
/**
|
||
*元素获取焦点：v-dialogDrag
|
||
* @param {*} el
|
||
* @param {*} binding
|
||
*/
|
||
Vue.directive('focus', {
|
||
// 当被绑定的元素插入到 DOM 中时
|
||
inserted: function (el, obj) {
|
||
// 这是需要页面刚加载就能进行聚焦操作使用的钩子函数,可以省略的，视具体需求而定
|
||
// 对值进行判断
|
||
if (obj.value) {
|
||
// 聚焦元素
|
||
el.focus();
|
||
}
|
||
},
|
||
// 当指令所在组件的 VNode 及其子 VNode 全部更新后调用
|
||
// 这是每当绑定的值发生改变时触发的钩子函数
|
||
componentUpdated: function (el, obj) {
|
||
if (obj.value) {
|
||
el.focus();
|
||
}
|
||
}
|
||
});
|
||
|
||
/**
|
||
*弹窗拖拽：v-dialogDrag
|
||
* @param {*} el
|
||
* @param {*} binding
|
||
* @param {*} vnode
|
||
* @param {*} oldvNode
|
||
*/
|
||
Vue.directive('dialogDrag', {
|
||
bind(el) {
|
||
const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
||
const dragDom = el.querySelector('.el-dialog');
|
||
dialogHeaderEl.style.cursor = 'move';
|
||
|
||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||
|
||
dialogHeaderEl.onmousedown = (e) => {
|
||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
||
|
||
/** 获取到的值带px 正则匹配替换*/
|
||
let styL, styT;
|
||
|
||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||
if (sty.left.includes('%')) {
|
||
// eslint-disable-next-line no-useless-escape
|
||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||
} else {
|
||
// eslint-disable-next-line no-useless-escape
|
||
styL = +sty.left.replace(/\px/g, '');
|
||
// eslint-disable-next-line no-useless-escape
|
||
styT = +sty.top.replace(/\px/g, '');
|
||
}
|
||
|
||
document.onmousemove = function (e) {
|
||
/** 通过事件委托，计算移动的距离*/
|
||
const l = e.clientX - disX;
|
||
const t = e.clientY - disY;
|
||
|
||
/** 移动当前元素*/
|
||
dragDom.style.left = `${l + styL}px`;
|
||
dragDom.style.top = `${t + styT}px`;
|
||
|
||
/** 刷新提示标签位置*/
|
||
store.dispatch('training/emitTipFresh');
|
||
|
||
/** 将此时的位置传出去*/
|
||
// binding.value({ x: e.pageX, y: e.pageY });
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
};
|
||
};
|
||
}
|
||
});
|
||
|
||
/**
|
||
*弹窗宽度拖大,拖小：dialogDragWidth
|
||
* @param {*} el
|
||
* @param {*} binding
|
||
* @param {*} vnode
|
||
* @param {*} oldvNode
|
||
*/
|
||
Vue.directive('dialogDragWidth', {
|
||
bind(el, binding) {
|
||
const dragDom = binding.value.$el.querySelector('.el-dialog');
|
||
|
||
el.onmousedown = (e) => {
|
||
|
||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||
const disX = e.clientX - el.offsetLeft;
|
||
|
||
document.onmousemove = function (e) {
|
||
/** 移动时禁用默认事件*/
|
||
e.preventDefault();
|
||
|
||
/** 通过事件委托，计算移动的距离*/
|
||
const l = e.clientX - disX;
|
||
dragDom.style.width = `${l}px`;
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
};
|
||
};
|
||
}
|
||
});
|
||
|
||
/**
|
||
* 弹窗拖拽：v-quickEntryDrag
|
||
* @param {*} el
|
||
* @param {*} binding
|
||
* @param {*} vnode
|
||
* @param {*} oldvNode
|
||
*/
|
||
Vue.directive('quickMenuDrag', {
|
||
bind(el) {
|
||
const dragDom = el;
|
||
dragDom.style.cursor = 'move';
|
||
|
||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||
|
||
dragDom.onmousedown = (e) => {
|
||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||
const disX = e.clientX;
|
||
const disY = e.clientY;
|
||
|
||
/** 获取到的值带px 正则匹配替换*/
|
||
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 - disX;
|
||
const t = e.clientY - disY;
|
||
|
||
/** 移动当前元素*/
|
||
dragDom.style.left = `${l + styL}px`;
|
||
dragDom.style.top = `${t + styT}px`;
|
||
|
||
/** 将此时的位置传出去*/
|
||
// binding.value({ x: e.pageX, y: e.pageY });
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
};
|
||
};
|
||
}
|
||
});
|
||
|
||
/**
|
||
*vue-自定义指令-拖拽 v-drag
|
||
*/
|
||
Vue.directive('drag', {
|
||
bind(el) {
|
||
const dragDom = el.querySelector('.reminder-box');
|
||
const dragRight = el.querySelector('.drag-right');
|
||
const dragLeft = el.querySelector('.drag-left');
|
||
const dragBottom = el.querySelector('.drag-bottom');
|
||
const dragTop = el.querySelector('.drag-top');
|
||
const dragBody = el.querySelector('.tip-body');
|
||
const body = el.querySelector('.tip-body-box');
|
||
|
||
dragRight.onmousedown = (e) => {
|
||
document.onselectstart = function () {
|
||
return false;
|
||
};
|
||
// 宽度拖拽
|
||
var iEvent = e || event;
|
||
var disX = iEvent.clientX;
|
||
var disW = dragDom.offsetWidth;
|
||
document.onmousemove = function (e) {
|
||
|
||
var iEvent = e || event;
|
||
if (disW + (iEvent.clientX - disX) > 350) {
|
||
dragDom.style.width = disW + (iEvent.clientX - disX) + 'px';
|
||
}
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
document.onselectstart = null;
|
||
};
|
||
};
|
||
dragLeft.onmousedown = (e) => {
|
||
document.onselectstart = function () {
|
||
return false;
|
||
};
|
||
// 宽度拖拽
|
||
var iEvent = e || event;
|
||
var disX = iEvent.clientX;
|
||
var disW = dragDom.offsetWidth;
|
||
var OFFLeft = dragDom.offsetLeft;
|
||
document.onmousemove = function (e) {
|
||
const iEvent = e || event;
|
||
const width = disW - (iEvent.clientX - disX);
|
||
if (width > 350) {
|
||
dragDom.style.width = disW - (iEvent.clientX - disX) + 'px';
|
||
dragDom.style.left = OFFLeft + (iEvent.clientX - disX) + 'px';
|
||
}
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
document.onselectstart = null;
|
||
};
|
||
};
|
||
dragBottom.onmousedown = (e) => {
|
||
document.onselectstart = function () {
|
||
return false;
|
||
};
|
||
// 宽度拖拽
|
||
var iEvent = e || event;
|
||
var disY = iEvent.clientY;
|
||
var disH = dragDom.offsetHeight;
|
||
document.onmousemove = function (e) {
|
||
var iEvent = e || event;
|
||
if (disH + (iEvent.clientY - disY) > 200) {
|
||
dragDom.style.height = disH + (iEvent.clientY - disY) + 'px';
|
||
body.style.height = disH + (iEvent.clientY - disY) - 40 + 'px';
|
||
dragBody.style.height = disH + (iEvent.clientY - disY) - 100 + 'px';
|
||
}
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
document.onselectstart = null;
|
||
};
|
||
};
|
||
dragTop.onmousedown = (e) => {
|
||
document.onselectstart = function () {
|
||
return false;
|
||
};
|
||
// 宽度拖拽
|
||
var iEvent = e || event;
|
||
var disY = iEvent.clientY;
|
||
var disH = dragDom.offsetHeight;
|
||
var OOFTop = dragDom.offsetTop;
|
||
document.onmousemove = function (e) {
|
||
var iEvent = e || event;
|
||
if (disH - (iEvent.clientY - disY) > 200) {
|
||
dragDom.style.height = disH - (iEvent.clientY - disY) + 'px';
|
||
body.style.height = disH - (iEvent.clientY - disY) - 40 + 'px';
|
||
dragBody.style.height = disH - (iEvent.clientY - disY) - 100 + 'px';
|
||
dragDom.style.top = OOFTop + (iEvent.clientY - disY) + 'px';
|
||
}
|
||
};
|
||
|
||
document.onmouseup = function () {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
document.onselectstart = null;
|
||
};
|
||
};
|
||
}
|
||
});
|