From 14fee27a92e92978cce643f6b527fa1327e72947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Fri, 13 Apr 2018 13:32:53 +0800 Subject: [PATCH] feature: add drag dialog (#477) --- src/directive/el-dragDialog/drag.js | 46 ++++++++++++++++++++++++ src/directive/el-dragDialog/index.js | 13 +++++++ src/lang/en.js | 1 + src/lang/zh.js | 1 + src/router/index.js | 3 +- src/views/components-demo/dragDialog.vue | 43 ++++++++++++++++++++++ 6 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 src/directive/el-dragDialog/drag.js create mode 100644 src/directive/el-dragDialog/index.js create mode 100644 src/views/components-demo/dragDialog.vue diff --git a/src/directive/el-dragDialog/drag.js b/src/directive/el-dragDialog/drag.js new file mode 100644 index 00000000..7d49e4bb --- /dev/null +++ b/src/directive/el-dragDialog/drag.js @@ -0,0 +1,46 @@ +export default{ + bind(el, binding) { + 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('%')) { + 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(e) { + document.onmousemove = null + document.onmouseup = null + } + } + } +} diff --git a/src/directive/el-dragDialog/index.js b/src/directive/el-dragDialog/index.js new file mode 100644 index 00000000..29facbfb --- /dev/null +++ b/src/directive/el-dragDialog/index.js @@ -0,0 +1,13 @@ +import drag from './drag' + +const install = function(Vue) { + Vue.directive('el-drag-dialog', drag) +} + +if (window.Vue) { + window['el-drag-dialog'] = drag + Vue.use(install); // eslint-disable-line +} + +drag.install = install +export default drag diff --git a/src/lang/en.js b/src/lang/en.js index 4ffc628b..c08c88ef 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -18,6 +18,7 @@ export default { countTo: 'CountTo', componentMixin: 'Mixin', backToTop: 'BackToTop', + dragDialog: 'Drag Dialog', charts: 'Charts', keyboardChart: 'Keyboard Chart', lineChart: 'Line Chart', diff --git a/src/lang/zh.js b/src/lang/zh.js index bcae0dac..a4cc93d4 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -18,6 +18,7 @@ export default { countTo: 'CountTo', componentMixin: '小组件', backToTop: '返回顶部', + dragDialog: '拖拽 Dialog', charts: '图表', keyboardChart: '键盘图表', lineChart: '折线图', diff --git a/src/router/index.js b/src/router/index.js index 596564b9..a5d704ef 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -111,7 +111,8 @@ export const asyncRouterMap = [ { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }}, { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }}, { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }}, - { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }} + { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}, + { path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }} ] }, diff --git a/src/views/components-demo/dragDialog.vue b/src/views/components-demo/dragDialog.vue new file mode 100644 index 00000000..3eb9bd91 --- /dev/null +++ b/src/views/components-demo/dragDialog.vue @@ -0,0 +1,43 @@ + + +