From bb1d939a94ebad1c06992765a9b993a24c52b549 Mon Sep 17 00:00:00 2001 From: Pan Date: Thu, 2 Nov 2017 17:58:35 +0800 Subject: [PATCH] reactor:refine code&&demo --- src/components/ThemePicker/index.vue | 1 - src/icons/svg/dashboard.svg | 1 + src/router/index.js | 7 +- src/styles/element-ui.scss | 2 +- src/styles/sidebar.scss | 195 +++++++++--------- src/vendor/Export2Excel.js | 2 +- src/vendor/Export2Zip.js | 4 +- src/views/example/tab/components/tabPane.vue | 4 +- src/views/example/table/complexTable.vue | 14 +- src/views/example/table/dragTable.vue | 2 +- .../example/table/dynamicTable/fixedThead.vue | 2 +- .../table/dynamicTable/unfixedThead.vue | 2 +- src/views/example/table/inlineEditTable.vue | 2 +- src/views/excel/exportExcel.vue | 6 +- src/views/excel/selectExcel.vue | 6 +- src/views/layout/components/Levelbar.vue | 2 +- src/views/svg-icons/index.vue | 19 +- src/views/zip/index.vue | 6 +- 18 files changed, 138 insertions(+), 139 deletions(-) create mode 100644 src/icons/svg/dashboard.svg diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue index 5512d28c..25766330 100644 --- a/src/components/ThemePicker/index.vue +++ b/src/components/ThemePicker/index.vue @@ -54,7 +54,6 @@ export default { }) styles.forEach(style => { const { innerText } = style - console.log(style) if (typeof innerText !== 'string') return style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) }) diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg new file mode 100644 index 00000000..bee42507 --- /dev/null +++ b/src/icons/svg/dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 5c4b5728..992209d0 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -26,15 +26,14 @@ export const constantRouterMap = [ { path: '/401', component: _import('errorPage/401'), hidden: true }, { - path: '/', + path: '', component: Layout, - redirect: '/dashboard', - hidden: true, + redirect: 'dashboard', children: [{ path: 'dashboard', component: _import('dashboard/index'), name: 'dashboard', - meta: { title: '首页' } + meta: { title: '首页', icon: 'dashboard' } }] }, diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 86f8d55b..9ca1bb0f 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -12,7 +12,7 @@ .cell { .el-tag { - margin-right: 8px; + margin-right: 0px; } } diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index c00dd25f..ed1a7cf1 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -1,113 +1,104 @@ -// 主体区域 -.main-container { - min-height: 100%; - transition: margin-left 0.28s; - margin-left: 180px; -} - -// 侧边栏 -.hideSidebar { - .sidebar-container { - width: 36px!important; - overflow: inherit; - } +.app-wrapper { + // 主体区域 .main-container { - margin-left: 36px; + min-height: 100%; + transition: margin-left 0.28s; + margin-left: 180px; } -} - -.sidebar-container { - transition: width 0.28s; - width: 180px!important; - height: 100%; - position: fixed; - top: 0; - bottom: 0; - left: 0; - z-index: 1001; - overflow-y: auto; - &::-webkit-scrollbar { - display: none + // 侧边栏 + .hideSidebar { + .sidebar-container { + width: 36px!important; + overflow: inherit; + } + .main-container { + margin-left: 36px; + } } -} - -.sidebar-container>.el-menu { - width: 100%!important; - min-height: 100%; -} - -.sidebar-container .svg-icon { - margin-right: 16px; -} - -.hideSidebar .el-submenu>.el-submenu__title, -.hideSidebar .submenu-title-noDropdown { - padding-left: 10px!important; -} - -.hideSidebar .submenu-title-noDropdown span, -.hideSidebar .el-submenu>.el-submenu__title>span { - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - display: inline-block; -} - -.hideSidebar .nest-menu .el-submenu__title { - text-align: initial!important; - padding-left: 20px!important; - span { - height: auto; - width: auto; - visibility: visible; - display: inline; + .sidebar-container { + transition: width 0.28s; + width: 180px!important; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow-y: auto; + &::-webkit-scrollbar { + display: none + } } - .el-submenu__icon-arrow { - display: block!important; + .sidebar-container>.el-menu { + width: 100%!important; + min-height: 100%; } -} - -.hideSidebar .menu-wrapper>.el-menu-item, -.hideSidebar .submenu-title-noDropdown, -.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title { - text-align: center; -} - -.hideSidebar .el-menu-item .el-submenu__icon-arrow, -.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow { - display: none; -} - -.hideSidebar .submenu-title-noDropdown { - position: relative; - span { - transition: opacity .3s cubic-bezier(.55, 0, .1, 1); - opacity: 0; + .sidebar-container .svg-icon { + margin-right: 16px; } - &:hover { + .hideSidebar .el-submenu>.el-submenu__title, + .hideSidebar .submenu-title-noDropdown { + padding-left: 10px!important; + } + .hideSidebar .submenu-title-noDropdown span, + .hideSidebar .el-submenu>.el-submenu__title>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + .hideSidebar .nest-menu .el-submenu__title { + text-align: initial!important; + padding-left: 20px!important; span { - display: block; - border-radius: 3px; - z-index: 1002; - width: 140px; - height: 56px; + height: auto; + width: auto; visibility: visible; - position: absolute; - right: -145px; - text-align: left; - text-indent: 20px; - top: 0px; - background-color: #2B2C2D!important; - opacity: 1; + display: inline; + } + .el-submenu__icon-arrow { + display: block!important; + } + } + .hideSidebar .menu-wrapper>.el-menu-item, + .hideSidebar .submenu-title-noDropdown, + .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title { + text-align: center; + } + .hideSidebar .el-menu-item .el-submenu__icon-arrow, + .hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow { + display: none; + } + .hideSidebar .submenu-title-noDropdown { + position: relative; + span { + transition: opacity .3s cubic-bezier(.55, 0, .1, 1); + opacity: 0; + } + &: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: #2B2C2D!important; + opacity: 1; + } + } + } + .el-submenu .el-menu-item { + min-width: 180px!important; + background-color: #2B2C2D!important; + &:hover { + background-color: rgb(67, 74, 80)!important; } } } - -.el-submenu .el-menu-item { - min-width: 180px!important; - background-color: #2B2C2D!important; - &:hover { - background-color: rgb(67, 74, 80)!important; - } -} diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js index 4370da36..f7765e9a 100644 --- a/src/vendor/Export2Excel.js +++ b/src/vendor/Export2Excel.js @@ -155,6 +155,6 @@ export function export_json_to_excel(th, jsonData, defaultTitle) { wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}); - var title = defaultTitle || '列表' + var title = defaultTitle || 'excel-list' saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx") } diff --git a/src/vendor/Export2Zip.js b/src/vendor/Export2Zip.js index 599eda18..6e11dc83 100644 --- a/src/vendor/Export2Zip.js +++ b/src/vendor/Export2Zip.js @@ -4,8 +4,8 @@ import JSZip from 'jszip' export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new JSZip() - const txt_name = txtName || '文本' - const zip_name = zipName || '压缩包' + const txt_name = txtName || 'file' + const zip_name = zipName || 'file' const data = jsonData let txtData = `${th}\r\n` data.forEach((row) => { diff --git a/src/views/example/tab/components/tabPane.vue b/src/views/example/tab/components/tabPane.vue index aee689a7..1052d609 100644 --- a/src/views/example/tab/components/tabPane.vue +++ b/src/views/example/tab/components/tabPane.vue @@ -1,5 +1,5 @@ - + diff --git a/src/views/example/table/complexTable.vue b/src/views/example/table/complexTable.vue index 5ee5b858..92a3d2ef 100644 --- a/src/views/example/table/complexTable.vue +++ b/src/views/example/table/complexTable.vue @@ -19,10 +19,10 @@ - 搜索 - 添加 - 导出 - 显示审核人 + 搜索 + 添加 + 导出 + 显示审核人 @@ -39,7 +39,7 @@ - + - + @@ -121,7 +121,7 @@ - + diff --git a/src/views/example/table/dragTable.vue b/src/views/example/table/dragTable.vue index 73d3ad57..9eb16f7c 100644 --- a/src/views/example/table/dragTable.vue +++ b/src/views/example/table/dragTable.vue @@ -39,7 +39,7 @@ - + diff --git a/src/views/example/table/dynamicTable/fixedThead.vue b/src/views/example/table/dynamicTable/fixedThead.vue index cea5ed79..18aa7f74 100644 --- a/src/views/example/table/dynamicTable/fixedThead.vue +++ b/src/views/example/table/dynamicTable/fixedThead.vue @@ -9,7 +9,7 @@ - + - + diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue index 92f88b8a..e2dc069f 100644 --- a/src/views/excel/exportExcel.vue +++ b/src/views/excel/exportExcel.vue @@ -1,5 +1,6 @@