feature: add global size option (#1024)

This commit is contained in:
花裤衩 2018-08-29 15:24:47 +08:00 committed by GitHub
parent 5bbb4abe21
commit 0fbda3c8c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 112 additions and 6 deletions

View file

@ -22,7 +22,7 @@ export default {
this.$i18n.locale = lang
this.$store.dispatch('setLanguage', lang)
this.$message({
message: 'switch language success',
message: 'Switch Language Success',
type: 'success'
})
}

View file

@ -0,0 +1,63 @@
<template>
<el-dropdown trigger="click" @command="handleSetSize">
<div>
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="size==='medium'" command="medium">Medium</el-dropdown-item>
<el-dropdown-item :disabled="size==='small'" command="small">Small</el-dropdown-item>
<el-dropdown-item :disabled="size==='mini'" command="mini">Mini</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
size() {
return this.$store.getters.size
}
},
methods: {
handleSetSize(size) {
this.$ELEMENT.size = size
this.$store.dispatch('setSize', size)
this.refreshView()
this.$message({
message: 'Switch Size Success',
type: 'success'
})
},
refreshView() {
// In order to make the cached page re-rendered
const visitedViews = [...this.$store.getters.visitedViews].map(i => {
i.meta.noCache = true
return i
})
this.$store.dispatch('delAllViews', this.$route).then(() => {
console.log(visitedViews)
for (const i of visitedViews) {
this.$store.dispatch('addVisitedViews', i)
}
})
const { path } = this.$route
this.$router.replace({
path: '/redirect' + path
})
}
}
}
</script>
<style scoped>
.size-icon {
font-size: 20px;
cursor: pointer;
vertical-align: -4px!important;
}
</style>

2
src/icons/svg/size.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1535513021233" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13539" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
</style></defs><path d="M64 512l384 0 0 128-128 0 0 384-128 0 0-384-128 0zM960 256l-251.74016 0 0 768-136.4992 0 0-768-251.74016 0 0-128 640 0z" p-id="13540"></path></svg>

After

Width:  |  Height:  |  Size: 711 B

View file

@ -67,8 +67,9 @@ export default {
logOut: 'Log Out',
dashboard: 'Dashboard',
github: 'Github',
screenfull: 'screenfull',
theme: 'theme'
screenfull: 'Screenfull',
theme: 'Theme',
size: 'Global Size'
},
login: {
title: 'Login Form',

View file

@ -68,7 +68,8 @@ export default {
dashboard: '首页',
github: '项目地址',
screenfull: '全屏',
theme: '换肤'
theme: '换肤',
size: '布局大小'
},
login: {
title: '系统登录',

View file

@ -1,5 +1,7 @@
import Vue from 'vue'
import Cookies from 'js-cookie'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import Element from 'element-ui'
@ -20,7 +22,7 @@ import './mock' // simulation data
import * as filters from './filters' // global filters
Vue.use(Element, {
size: 'medium', // set element-ui default size
size: Cookies.get('size') || 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
})

View file

@ -31,6 +31,17 @@ import nestedRouter from './modules/nested'
}
**/
export const constantRouterMap = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path*',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/login',
component: () => import('@/views/login/index'),

View file

@ -1,6 +1,7 @@
const getters = {
sidebar: state => state.app.sidebar,
language: state => state.app.language,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,

View file

@ -7,7 +7,8 @@ const app = {
withoutAnimation: false
},
device: 'desktop',
language: Cookies.get('language') || 'en'
language: Cookies.get('language') || 'en',
size: Cookies.get('size') || 'medium'
},
mutations: {
TOGGLE_SIDEBAR: state => {
@ -30,6 +31,10 @@ const app = {
SET_LANGUAGE: (state, language) => {
state.language = language
Cookies.set('language', language)
},
SET_SIZE: (state, size) => {
state.size = size
Cookies.set('size', size)
}
},
actions: {
@ -44,6 +49,9 @@ const app = {
},
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
},
setSize({ commit }, size) {
commit('SET_SIZE', size)
}
}
}

View file

@ -11,6 +11,10 @@
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
<size-select class="international right-menu-item"/>
</el-tooltip>
<lang-select class="international right-menu-item"/>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
@ -48,6 +52,7 @@ import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import ErrorLog from '@/components/ErrorLog'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import LangSelect from '@/components/LangSelect'
import ThemePicker from '@/components/ThemePicker'
@ -57,6 +62,7 @@ export default {
Hamburger,
ErrorLog,
Screenfull,
SizeSelect,
LangSelect,
ThemePicker
},

View file

@ -0,0 +1,11 @@
<script>
export default {
beforeCreate() {
const path = this.$route.params.path
this.$router.replace('/' + path)
},
render: function(h) {
return h() // avoid warning message
}
}
</script>