From 02c8872b67a689002e87e7971cd0e5e4d374b2f5 Mon Sep 17 00:00:00 2001 From: lin-xin <2981207131@qq.com> Date: Wed, 12 Sep 2018 20:56:20 +0800 Subject: [PATCH 1/2] =?UTF-8?q?'=E6=B7=BB=E5=8A=A0=E5=8F=AF=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E5=BC=B9=E6=A1=86'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Sidebar.vue | 16 ++++-- src/components/common/directives.js | 80 +++++++++++++++++++++++++++++ src/components/page/DragDialog.vue | 36 +++++++++++++ src/components/page/DragList.vue | 3 +- src/main.js | 1 + src/router/index.js | 6 +++ 6 files changed, 138 insertions(+), 4 deletions(-) create mode 100644 src/components/common/directives.js create mode 100644 src/components/page/DragDialog.vue diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index 628b7b6..dadb2fc 100644 --- a/src/components/common/Sidebar.vue +++ b/src/components/common/Sidebar.vue @@ -94,12 +94,22 @@ }, { icon: 'el-icon-rank', - index: 'drag', - title: '拖拽列表' + index: '6', + title: '拖拽组件', + subs: [ + { + index: 'drag', + title: '拖拽列表', + }, + { + index: 'dialog', + title: '拖拽弹框', + } + ] }, { icon: 'el-icon-lx-warn', - index: '6', + index: '7', title: '错误处理', subs: [ { diff --git a/src/components/common/directives.js b/src/components/common/directives.js new file mode 100644 index 0000000..26aa3ad --- /dev/null +++ b/src/components/common/directives.js @@ -0,0 +1,80 @@ +import Vue from 'vue'; + +// v-dialogDrag: 弹窗拖拽属性 +Vue.directive('dialogDrag', { + bind(el, binding, vnode, oldVnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header'); + const dragDom = el.querySelector('.el-dialog'); + + dialogHeaderEl.style.cssText += ';cursor:move;' + dragDom.style.cssText += ';top:0px;' + + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const sty = (() => { + if (window.document.currentStyle) { + return (dom, attr) => dom.currentStyle[attr]; + } else { + return (dom, attr) => getComputedStyle(dom, false)[attr]; + } + })() + + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下,计算当前元素距离可视区的距离 + const disX = e.clientX - dialogHeaderEl.offsetLeft; + const disY = e.clientY - dialogHeaderEl.offsetTop; + + const screenWidth = document.body.clientWidth; // body当前宽度 + const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) + + const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 + const dragDomheight = dragDom.offsetHeight; // 对话框高度 + + const minDragDomLeft = dragDom.offsetLeft; + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; + + const minDragDomTop = dragDom.offsetTop; + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; + + + // 获取到的值带px 正则匹配替换 + let styL = sty(dragDom, 'left'); + let styT = sty(dragDom, 'top'); + + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); + styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); + } else { + styL = +styL.replace(/\px/g, ''); + styT = +styT.replace(/\px/g, ''); + }; + + document.onmousemove = function (e) { + // 通过事件委托,计算移动的距离 + let left = e.clientX - disX; + let top = e.clientY - disY; + + // 边界处理 + if (-(left) > minDragDomLeft) { + left = -(minDragDomLeft); + } else if (left > maxDragDomLeft) { + left = maxDragDomLeft; + } + + if (-(top) > minDragDomTop) { + top = -(minDragDomTop); + } else if (top > maxDragDomTop) { + top = maxDragDomTop; + } + + // 移动当前元素 + dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; + }; + + document.onmouseup = function (e) { + document.onmousemove = null; + document.onmouseup = null; + }; + } + } +}) diff --git a/src/components/page/DragDialog.vue b/src/components/page/DragDialog.vue new file mode 100644 index 0000000..40c0b4d --- /dev/null +++ b/src/components/page/DragDialog.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/components/page/DragList.vue b/src/components/page/DragList.vue index deba215..491eabe 100644 --- a/src/components/page/DragList.vue +++ b/src/components/page/DragList.vue @@ -2,7 +2,8 @@
- 拖拽排序 + 拖拽组件 + 拖拽排序
diff --git a/src/main.js b/src/main.js index 8bcf238..82c8c65 100644 --- a/src/main.js +++ b/src/main.js @@ -6,6 +6,7 @@ import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 默认主题 // import '../static/css/theme-green/index.css'; // 浅绿色主题 import '../static/css/icon.css'; +import './components/common/directives'; import "babel-polyfill"; Vue.use(ElementUI, { size: 'small' }); diff --git a/src/router/index.js b/src/router/index.js index 74bc738..6db7263 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -69,6 +69,12 @@ export default new Router({ component: resolve => require(['../components/page/DragList.vue'], resolve), meta: { title: '拖拽列表' } }, + { + // 拖拽Dialog组件 + path: '/dialog', + component: resolve => require(['../components/page/DragDialog.vue'], resolve), + meta: { title: '拖拽弹框' } + }, { // 权限页面 path: '/permission', From 9b3052774b1f49a0c2e658c82abc378407ee5dfe Mon Sep 17 00:00:00 2001 From: lin-xin <2981207131@qq.com> Date: Fri, 28 Dec 2018 16:29:50 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BD=BF=E7=94=A8index?= =?UTF-8?q?=E4=BD=9C=E4=B8=BAv-for=E7=9A=84key?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/page/DragList.vue | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/page/DragList.vue b/src/components/page/DragList.vue index 491eabe..96527c8 100644 --- a/src/components/page/DragList.vue +++ b/src/components/page/DragList.vue @@ -16,7 +16,7 @@
todo
-
+
{{item.content}}
@@ -26,7 +26,7 @@
doing
-
+
{{item.content}}
@@ -36,7 +36,7 @@
done
-
+
{{item.content}}
@@ -61,34 +61,43 @@ }, todo: [ { + id: 1, content: '开发图表组件' }, { + id: 2, content: '开发拖拽组件' }, { + id: 3, content: '开发权限测试组件' } ], doing: [ { + id: 1, content: '开发登录注册页面' }, { + id: 2, content: '开发头部组件' }, { + id: 3, content: '开发表格相关组件' }, { + id: 4, content: '开发表单相关组件' } ], done:[ { + id: 1, content: '初始化项目,生成工程目录,完成相关配置' }, { + id: 2, content: '开发项目整体框架' } ]