v2.4.0

新增
1、单个弹框功能
修改
1、components目录结构（方便二次开发）
2、body最小宽度1024px
修复
1、拖拽边界bug（弹框高度大于屏幕高度时出现的bug）

Author: uncleLian

README.md

@@ -78,6 +78,7 @@
         - 拖拽弹框
         - 拖拽表格
         - 拖拽列表
+    - 单个弹框
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-blog",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "private": true,
     "scripts": {
         "dev": "vue-cli-service serve",
@@ -12,7 +12,7 @@
     "dependencies": {
         "axios": "^0.18.0",
         "driver.js": "^0.9.5",
-        "element-ui": "^2.7.0",
+        "element-ui": "^2.12.0",
         "file-saver": "^2.0.1",
         "js-cookie": "^2.2.0",
         "jszip": "^3.2.0",

src/assets/css/global.styl

@@ -6,6 +6,7 @@
 html, body {
     width: 100%;
     height: 100%;
+    min-width: 1024px;
     min-height: 100%;
     background: #f4f5f6;
 }
@@ -35,6 +36,9 @@ a {
     a {
         margin-left: 5px;
     }
+    p {
+        margin: 1em 0 0 0;
+    }
 }
 // hover
 .ishover {

src/assets/icons/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'
+import SvgIcon from '@/components/Base/SvgIcon'
 
 Vue.component('svg-icon', SvgIcon)
 

src/components/SvgIcon/index.vue renamed to src/components/Base/SvgIcon/index.vue

@@ -29,7 +29,8 @@ export default {
             const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
 
             const minDragDomTop = dragDom.offsetTop
-            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+            let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+            maxDragDomTop = maxDragDomTop >= 0 ? maxDragDomTop : 'unLimit' // // 修复弹框高度大于可视区域的问题
 
             // 获取到的值带px 正则匹配替换
             let styL = getStyle(dragDom, 'left')
@@ -57,8 +58,10 @@ export default {
 
                 if (-(top) > minDragDomTop) {
                     top = -minDragDomTop
-                } else if (top > maxDragDomTop) {
-                    top = maxDragDomTop
+                } else if (maxDragDomTop !== 'unLimit') { // 修复弹框高度大于可视区域的问题
+                    if (top > maxDragDomTop) {
+                        top = maxDragDomTop
+                    }
                 }
 
                 // 移动当前元素

src/directive/dragDialog/drag.js

@@ -11,6 +11,8 @@ export default {
 }
 
 export function checkPermission(permissionRole) {
+    // 不能作为通用方案，判断权限的方法需自行实现
+    // 当前采用登录角色是否包含被验证的permissionRole
     let currentRole = (store.state.login.user && store.state.login.user.roles) || 'visitor'
     if (typeof currentRole === 'string') {
         currentRole = [currentRole]

src/directive/permission/permission.js

@@ -29,7 +29,8 @@ export default {
         '401': '401',
         '404': '404',
         errorLog: 'ErrorLog',
-        i18n: 'I18n'
+        i18n: 'I18n',
+        singleMessage: 'SingleMessage'
     },
     header: {
         logout: 'Log Out',
@@ -161,5 +162,9 @@ export default {
     dialog: {
         update: 'Change',
         cancle: 'Cancle'
+    },
+    singleMessage: {
+        description: 'SingleMessage base on el-message',
+        tip: 'Please keep click to see example'
     }
 }

src/language/en.js

@@ -29,7 +29,8 @@ export default {
         '401': '401',
         '404': '404',
         errorLog: '错误日志',
-        i18n: '国际化'
+        i18n: '国际化',
+        singleMessage: '单个弹框'
     },
     header: {
         logout: '退出',
@@ -163,5 +164,9 @@ export default {
     dialog: {
         update: '修 改',
         cancle: '取 消'
+    },
+    singleMessage: {
+        description: '单个弹框基于 el-message 实现',
+        tip: '连续点击弹框查看效果'
     }
 }