toesbieya
6 years ago
parent
7d47e9c0ec
commit
875ad55d90
@ -0,0 +1,30 @@ |
|||||||
|
# 布局设计 |
||||||
|
|
||||||
|
## 导航模式 |
||||||
|
|
||||||
|
### 桌面端 |
||||||
|
|
||||||
|
1.侧边栏导航：侧边栏菜单为完整菜单，顶部菜单不渲染 |
||||||
|
|
||||||
|
2.顶部导航：侧边栏菜单不渲染，顶部菜单为完整菜单 |
||||||
|
|
||||||
|
3.混合导航：顶部菜单为完整菜单的所有根节点，侧边栏菜单为当前激活的顶部菜单的子级 |
||||||
|
|
||||||
|
### 移动端 |
||||||
|
|
||||||
|
1.侧边栏导航：侧边栏菜单为完整菜单，顶部菜单不渲染，侧边栏为抽屉模式 |
||||||
|
|
||||||
|
2.顶部导航：设置无效，效果等同于侧边栏导航 |
||||||
|
|
||||||
|
3.混合导航：设置无效，效果等同于侧边栏导航 |
||||||
|
|
||||||
|
## 侧边栏 |
||||||
|
|
||||||
|
### 桌面端 |
||||||
|
|
||||||
|
未设置自动隐藏时，折叠状态依据用户设置 |
||||||
|
设置了自动隐藏时，折叠状态无效，侧边栏为抽屉模式 |
||||||
|
|
||||||
|
### 移动端 |
||||||
|
|
||||||
|
侧边栏只能为抽屉模式 |
||||||
@ -1,39 +0,0 @@ |
|||||||
function getColorChannels(color) { |
|
||||||
color = color.replace('#', '') |
|
||||||
if (/^[0-9a-fA-F]{3}$/.test(color)) { |
|
||||||
color = color.split('') |
|
||||||
for (let i = 2; i >= 0; i--) { |
|
||||||
color.splice(i, 0, color[i]) |
|
||||||
} |
|
||||||
color = color.join('') |
|
||||||
} |
|
||||||
if (/^[0-9a-fA-F]{6}$/.test(color)) { |
|
||||||
return { |
|
||||||
red: parseInt(color.slice(0, 2), 16), |
|
||||||
green: parseInt(color.slice(2, 4), 16), |
|
||||||
blue: parseInt(color.slice(4, 6), 16) |
|
||||||
} |
|
||||||
} |
|
||||||
else { |
|
||||||
return { |
|
||||||
red: 255, |
|
||||||
green: 255, |
|
||||||
blue: 255 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export function mixColor(color, percent) { |
|
||||||
let {red, green, blue} = getColorChannels(color) |
|
||||||
if (percent > 0) { // shade given color
|
|
||||||
red *= 1 - percent |
|
||||||
green *= 1 - percent |
|
||||||
blue *= 1 - percent |
|
||||||
} |
|
||||||
else { // tint given color
|
|
||||||
red += (255 - red) * percent |
|
||||||
green += (255 - green) * percent |
|
||||||
blue += (255 - blue) * percent |
|
||||||
} |
|
||||||
return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})` |
|
||||||
} |
|
||||||
@ -1,8 +1,32 @@ |
|||||||
|
/** |
||||||
|
* 路由控制工具类 |
||||||
|
*/ |
||||||
|
|
||||||
import {isEmpty} from "@/util" |
import {isEmpty} from "@/util" |
||||||
|
import {isString} from "@/util/validate" |
||||||
import router from '@/router' |
import router from '@/router' |
||||||
import {mutations as tagsViewMutations} from "@/layout/store/tagsView" |
import {mutations as tagsViewMutations} from "@/layout/store/tagsView" |
||||||
|
|
||||||
|
/** |
||||||
|
* 路由刷新 |
||||||
|
* |
||||||
|
* @param route {string|route} 需要刷新的路由，不传时为当前路由，如果是字符串时请确保以'/'开头 |
||||||
|
* @param replace {boolean} 是否使用replace进行跳转 |
||||||
|
* @return {Promise} 返回vue-router跳转的结果 |
||||||
|
*/ |
||||||
|
export function refreshPage(route = router.currentRoute, replace = true) { |
||||||
|
const target = `/redirect${isString(route) ? route : route.fullPath}` |
||||||
|
return router[replace ? 'replace' : 'push'](target) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 关闭当前页，如果传入next则跳转到next页面 |
||||||
|
* @param next 跳转的目标页面，作为第一个参数传入vue-router.replace |
||||||
|
* @return 仅在next有值时，返回vue-router.replace的结果 |
||||||
|
*/ |
||||||
export function closeCurrentPage(next) { |
export function closeCurrentPage(next) { |
||||||
tagsViewMutations.delView(router.currentRoute) |
tagsViewMutations.delTagAndCache(router.currentRoute) |
||||||
!isEmpty(next) && router.replace(next) |
if (!isEmpty(next)) { |
||||||
|
return router.replace(next) |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue