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 {isString} from "@/util/validate" |
||||
import router from '@/router' |
||||
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) { |
||||
tagsViewMutations.delView(router.currentRoute) |
||||
!isEmpty(next) && router.replace(next) |
||||
tagsViewMutations.delTagAndCache(router.currentRoute) |
||||
if (!isEmpty(next)) { |
||||
return router.replace(next) |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue