Drop excel file here or
browse
@@ -51,7 +51,9 @@ export default {
handkeFileChange(e) {
const files = e.target.files
const itemFile = files[0] // only use files[0]
+ if (!itemFile) return
this.readerData(itemFile)
+ this.$refs['excel-upload-input'].value = null // fix can't select the same excel
},
readerData(itemFile) {
const reader = new FileReader()
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/styles/element-ui.scss b/src/styles/element-ui.scss
index b159d16b..dc59591e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -73,3 +73,10 @@
}
}
}
+
+//dropdown
+ .el-dropdown-menu{
+ a{
+ display: block
+ }
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 2fed2b1d..36410770 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -2,18 +2,24 @@
// 主体区域
.main-container {
min-height: 100%;
- transition: margin-left 0.28s;
+ transition: margin-left .28s;
margin-left: 180px;
- } // 侧边栏
+ }
+ // 侧边栏
.sidebar-container {
- transition: width 0.28s;
- width: 180px!important;
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
+ transition: width .28s;
+ width: 180px !important;
height: 100%;
position: fixed;
+ font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
+ overflow: hidden;
a {
display: inline-block;
width: 100%;
@@ -23,78 +29,48 @@
}
.el-menu {
border: none;
- width: 100%;
+ width: 100% !important;
}
}
.hideSidebar {
- .sidebar-container,.sidebar-container .el-menu {
- width: 36px!important;
- // overflow: inherit;
+ .sidebar-container {
+ width: 36px !important;
}
.main-container {
margin-left: 36px;
}
- }
- .hideSidebar {
.submenu-title-noDropdown {
- padding-left: 10px!important;
+ padding-left: 10px !important;
position: relative;
- span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
- opacity: 0;
- display: inline-block;
- }
- &:hover {
- span {
- display: block;
- border-radius: 3px;
- z-index: 1002;
- width: 140px;
- height: 56px;
- visibility: visible;
- position: absolute;
- right: -145px;
- text-align: left;
- text-indent: 20px;
- top: 0px;
- background-color: $subMenuBg!important;
- opacity: 1;
- }
+ .el-tooltip {
+ padding: 0 10px !important;
}
}
.el-submenu {
&>.el-submenu__title {
- padding-left: 10px!important;
+ padding-left: 10px !important;
&>span {
- display: none;
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
+ display: inline-block;
}
.el-submenu__icon-arrow {
display: none;
}
}
- .nest-menu {
- .el-submenu__icon-arrow {
- display: block!important;
- }
- span {
- display: inline-block!important;
- }
- }
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-submenu .el-menu-item {
- min-width: 180px!important;
- background-color: $subMenuBg!important;
+ min-width: 180px !important;
+ background-color: $subMenuBg !important;
&:hover {
- background-color: $menuHover!important;
+ background-color: $menuHover !important;
}
}
- .el-menu--collapse .el-menu .el-submenu{
- min-width: 180px!important;
+ .el-menu--collapse .el-menu .el-submenu {
+ min-width: 180px !important;
}
}
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 5bdd1b43..10579fd3 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -26,7 +26,7 @@ export function validateUpperCase(str) {
}
/* 大小写字母*/
-export function validatAlphabets(str) {
+export function validateAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
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 @@
+
+
+ open a Drag Dialog
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index d8381592..8d3482d1 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -19,7 +19,7 @@ export default {
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
- { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
+ { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
]
}
}
diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue
index e36c83a2..99eea062 100644
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -65,6 +65,7 @@ export default {
.pan-img {
display: block;
margin: 0 auto;
+ width: 100%;
}
.text-jumbo {
font-size: 60px;
diff --git a/src/views/example/table/complexTable.vue b/src/views/example/table/complexTable.vue
index 15213b11..a5442ce1 100644
--- a/src/views/example/table/complexTable.vue
+++ b/src/views/example/table/complexTable.vue
@@ -335,7 +335,11 @@ export default {
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
const data = this.formatJson(filterVal, this.list)
- excel.export_json_to_excel(tHeader, data, 'table-list')
+ excel.export_json_to_excel({
+ header: tHeader,
+ data,
+ filename: 'table-list'
+ })
this.downloadLoading = false
})
},
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index e60313f9..cddcd61d 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -2,17 +2,18 @@