自定义可拖动弹窗宽度指令
This commit is contained in:
parent
cb5ee9c8a1
commit
e6e10308ff
|
@ -0,0 +1,31 @@
|
||||||
|
/**
|
||||||
|
* v-dialogDragWidth 可拖动弹窗宽度
|
||||||
|
* Copyright (c) 2019 ruoyi
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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;
|
||||||
|
dragDom.style.width = `${curWidth + l}px`;
|
||||||
|
};
|
||||||
|
document.onmouseup = function (e) {
|
||||||
|
document.onmousemove = null;
|
||||||
|
document.onmouseup = null;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
dragDom.appendChild(lineEl);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,17 +1,18 @@
|
||||||
import hasRole from './permission/hasRole'
|
import hasRole from './permission/hasRole'
|
||||||
import hasPermi from './permission/hasPermi'
|
import hasPermi from './permission/hasPermi'
|
||||||
import dialogDrag from './dialog/drag'
|
import dialogDrag from './dialog/drag'
|
||||||
|
import dialogDragWidth from './dialog/dragWidth'
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
Vue.directive('hasRole', hasRole)
|
Vue.directive('hasRole', hasRole)
|
||||||
Vue.directive('hasPermi', hasPermi)
|
Vue.directive('hasPermi', hasPermi)
|
||||||
Vue.directive('dialogDrag', dialogDrag)
|
Vue.directive('dialogDrag', dialogDrag)
|
||||||
|
Vue.directive('dialogDragWidth', dialogDragWidth)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (window.Vue) {
|
if (window.Vue) {
|
||||||
window['hasRole'] = hasRole
|
window['hasRole'] = hasRole
|
||||||
window['hasPermi'] = hasPermi
|
window['hasPermi'] = hasPermi
|
||||||
window['dialogDrag'] = dialogDrag
|
|
||||||
Vue.use(install); // eslint-disable-line
|
Vue.use(install); // eslint-disable-line
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue