Merge branch 'feature/global_size_demo' into develop
Former-commit-id: e746458f12e94d6c47cad88474a7593924150499 [formerly e746458f12e94d6c47cad88474a7593924150499 [formerly e746458f12e94d6c47cad88474a7593924150499 [formerly e746458f12e94d6c47cad88474a7593924150499 [formerly 91f0c4155632e8cb3f42ffabefb3ef977e486e52 [formerly 00e5c5eae54fc83e51fb0e2b186805cc5e2bfb4b]]]]] Former-commit-id: a6841474977cb86989a48f41fd35a214c8cbe5ab Former-commit-id: 46e9b77e3b43c62de79f7348251084d06d0f6b37 Former-commit-id: f8df39702ade9bcf300f8b928d4bdca6cbc562ca [formerly e674d94bf64629b40e37374ac14e8762e9ea461b] Former-commit-id: c552ab7d6efd7f20f0a72f9648b28e878d056d93 Former-commit-id: c9869b358d0078fe3a9dbb52f3ad9ddc5eb59bac Former-commit-id: f99d787f53181eea64c11a26f88ca48c1ccb8daf Former-commit-id: b54e8cd7586d68434a9f40ffc2457e7033c3ac0a Former-commit-id: 337ba58e8fbdf972de106a28a35e6b0ccaeffbc1
This commit is contained in:
liyang
@@ -60,8 +60,8 @@ export default {
|
||||
title: '全局状态管理',
|
||||
icon: 'bolt',
|
||||
children: [
|
||||
{ path: `${pre}store/sys`, title: '系统状态', icon: 'microchip' },
|
||||
{ path: `${pre}store/menu`, title: '菜单控制', icon: 'bars' },
|
||||
{ path: `${pre}store/size`, title: '全局尺寸', icon: 'font' },
|
||||
{ path: `${pre}store/ua`, title: '浏览器信息', icon: 'info-circle' },
|
||||
{ path: `${pre}store/gray`, title: '灰度模式', icon: 'eye' },
|
||||
{ path: `${pre}store/fullscreen`, title: '全屏', icon: 'arrows-alt' },
|
||||
|
||||
39
src/pages/demo/playground/store/size/index.vue
Normal file
39
src/pages/demo/playground/store/size/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<d2-container type="card">
|
||||
<el-radio-group v-model="currentValue" @change="sizeSet">
|
||||
<el-radio-button label="default"></el-radio-button>
|
||||
<el-radio-button label="medium"></el-radio-button>
|
||||
<el-radio-button label="small"></el-radio-button>
|
||||
<el-radio-button label="mini"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currentValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/size', [
|
||||
'value'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
this.currentValue = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
sizeSet: 'd2admin/size/set'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,172 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<template slot="header">version {{releasesVersion}} [ {{releasesUpdate ? '有新版本' : '已经是最新版本'}} ]</template>
|
||||
<div class="d2-mt d2-mr">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">顶栏菜单数据</template>
|
||||
<div style="height: 260px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="menuHeader"
|
||||
:options="{ rootObjectKey: 'menuHeader', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">侧边栏菜单数据</template>
|
||||
<div style="height: 260px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="menuAside"
|
||||
:options="{ rootObjectKey: 'menuAside', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">全屏模式</template>
|
||||
<el-switch v-model="fullscreenActive" active-text="打开" inactive-text="关闭" disabled/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">灰度模式</template>
|
||||
<el-switch v-model="grayActive" active-text="打开" inactive-text="关闭" disabled/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">侧边栏折叠</template>
|
||||
<el-switch v-model="menuAsideCollapse" active-text="收缩" inactive-text="展开" disabled/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">全局尺寸</template>
|
||||
{{sizeValue}}
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">当前主题</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
{{themeActiveName}}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">已经注册的主题</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="themeList"
|
||||
:options="{ rootObjectKey: 'themeList', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">当前主题信息</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="themeActiveSetting"
|
||||
:options="{ rootObjectKey: 'themeActiveSetting', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">当前页面</template>
|
||||
{{pageCurrent}}
|
||||
</el-card>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">支持多页显示的页面列表</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="pagePool"
|
||||
:options="{ rootObjectKey: 'pagePool', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">打开的标签页</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="pageopened"
|
||||
:options="{ rootObjectKey: 'pageopened', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">缓存页面</template>
|
||||
<div style="height: 300px; overflow: auto;">
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="keepAlive"
|
||||
:options="{ rootObjectKey: 'keepAlive', maxDepth: 1 }"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="never" class="d2-card d2-mb">
|
||||
<template slot="header">最新版本数据 [ {{releasesUpdate ? '有新版本' : '已经是最新版本'}} ]</template>
|
||||
<tree-view
|
||||
class="tree-view-small"
|
||||
:data="releasesLatest"
|
||||
:options="{ rootObjectKey: 'releasesLatest', maxDepth: 1 }"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState('d2admin', {
|
||||
// 用户信息
|
||||
userInfo: state => state.user.info,
|
||||
// 版本
|
||||
releasesVersion: state => state.releases.version,
|
||||
releasesLatest: state => state.releases.latest,
|
||||
releasesUpdate: state => state.releases.update,
|
||||
// 菜单
|
||||
menuHeader: state => state.menu.header,
|
||||
menuAside: state => state.menu.aside,
|
||||
menuAsideCollapse: state => state.menu.asideCollapse,
|
||||
// 主题
|
||||
themeList: state => state.theme.list,
|
||||
themeActiveName: state => state.theme.activeName,
|
||||
// 全屏
|
||||
fullscreenActive: state => state.fullscreen.active,
|
||||
// 灰度模式
|
||||
grayActive: state => state.gray.active,
|
||||
// tag 池
|
||||
pagePool: state => state.page.pool,
|
||||
pageCurrent: state => state.page.current,
|
||||
pageopened: state => state.page.opened,
|
||||
// 全局尺寸
|
||||
sizeValue: state => state.size.value
|
||||
}),
|
||||
...mapGetters('d2admin', {
|
||||
keepAlive: 'page/keepAlive',
|
||||
themeActiveSetting: 'theme/activeSetting'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -25,7 +25,6 @@ export default {
|
||||
defaultValue: '',
|
||||
user: true
|
||||
})
|
||||
console.log('size: ', size)
|
||||
// Element
|
||||
Vue.use(ElementUI, {
|
||||
size
|
||||
|
||||
@@ -1 +1 @@
|
||||
58069f63d26f33421df3d333c4aa58af52c87aaa
|
||||
c62802e4146a602e5c498cdb99205b56768d4047
|
||||
Reference in New Issue
Block a user