Skip to content

A
ant-design-pro-vue
Commit 1fdaca01 by sendya
Options

fix: merge mixin, fix user-layout 320px css

parent e8e2426a
Showing with 113 additions and 108 deletions
src/components/layouts/UserLayout.vue
<template>
<div id="userLayout" class="user-layout-wrapper">
<div id="userLayout" :class="['user-layout-wrapper', device]">
<div class="container">
<div class="top">
<div class="header">
......@@ -31,10 +31,12 @@
<script>
import RouteView from "@/components/layouts/RouteView"
import { mixinDevice } from '@/utils/mixin.js'
export default {
name: "UserLayout",
components: { RouteView },
mixins: [mixinDevice],
data () {
return {}
},
......@@ -51,6 +53,15 @@
#userLayout.user-layout-wrapper {
height: 100%;
&.mobile {
.container {
.main {
max-width: 368px;
width: 98%;
}
}
}
.container {
width: 100%;
min-height: 100%;
......@@ -105,6 +116,7 @@
}
.main {
min-width: 260px;
width: 368px;
margin: 0 auto;
}
......
src/components/menu/SideMenu.vue
<template>
<a-layout-sider
:class="['sider', device === 'desktop' ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
width="256px"
:collapsible="collapsible"
v-model="collapsed"
......@@ -21,11 +21,12 @@
import ALayoutSider from "ant-design-vue/es/layout/Sider"
import Logo from '../tools/Logo'
import SMenu from './index'
import { mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
export default {
name: "SideMenu",
components: { ALayoutSider, Logo, SMenu },
mixins: [mixin, mixinDevice],
props: {
mode: {
type: String,
......@@ -52,15 +53,6 @@
required: true
}
},
created () {
},
computed: {
...mapState({
device: state => state.app.device,
fixSiderbar: state => state.app.fixSiderbar,
})
},
methods: {
onSelect (obj) {
this.$emit('menuSelect', obj)
......
src/components/page/GlobalHeader.vue
......@@ -43,21 +43,26 @@
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { mapState } from 'vuex'
import { mixin } from '@/utils/mixin.js'
export default {
name: "LayoutHeader",
name: "GlobalHeader",
components: {
UserMenu,
SMenu,
Logo
},
mixins: [mixin],
props: {
mode: {
type: String,
// sidemenu, topmenu
default: 'sidemenu'
},
menus: {
type: Array,
required: true
},
theme: {
type: String,
required: false,
......@@ -76,24 +81,12 @@
},
data() {
return {
menus: [],
headerBarFixed: false,
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
created() {
this.menus = this.mainMenu.find((item) => item.path === '/').children
},
computed: {
...mapState({
mainMenu: state => state.permission.addRouters,
sidebarOpened: state => state.app.sidebar.opened,
fixedHeader: state => state.app.fixedHeader,
autoHideHeader: state => state.app.autoHideHeader,
}),
},
methods: {
handleScroll () {
if (this.autoHideHeader) {
......
src/components/page/GlobalLayout.vue
......@@ -4,7 +4,7 @@
<template v-if="layoutMode === 'sidemenu'">
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + theme"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
......@@ -14,16 +14,16 @@
mode="inline"
:menus="menus"
@menuSelect="menuSelect"
:theme="theme"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
</a-drawer>
<side-menu
v-else
mode="inline"
:menus="menus"
:theme="theme"
:mode="menuMode"
:theme="navTheme"
:collapsed="collapsed"
:collapsible="true"></side-menu>
</template>
......@@ -31,7 +31,7 @@
<template v-else>
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + theme"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
......@@ -41,7 +41,7 @@
mode="inline"
:menus="menus"
@menuSelect="menuSelect"
:theme="theme"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
</a-drawer>
......@@ -49,7 +49,14 @@
<a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: fixSiderbar && device === 'desktop' ? `${sidebarOpened ? 256 : 80}px` : '0' }">
<!-- layout header -->
<global-header :mode="layoutMode" :theme="theme" :collapsed="collapsed" :device="device" @toggle="toggle"/>
<global-header
:mode="layoutMode"
:menus="menus"
:theme="navTheme"
:collapsed="collapsed"
:device="device"
@toggle="toggle"
/>
<!-- layout content -->
<a-layout-content :style="{ margin: '24px 24px 0', height: '100%', paddingTop: fixedHeader ? '64px' : '0' }">
......@@ -71,41 +78,33 @@
import GlobalHeader from '@/components/page/GlobalHeader'
import GlobalFooter from '@/components/page/GlobalFooter'
import SettingDrawer from '@/components/setting/SettingDrawer'
import { triggerResize } from '@/utils/util'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
export default {
name: "BasicLayout",
name: "GlobalLayout",
components: {
SideMenu,
GlobalHeader,
GlobalFooter,
SettingDrawer
},
mixins: [mixin, mixinDevice],
data () {
return {
// light, dark
menuTheme: 'light',
// inline, horizontal
menuMode: 'inline',
collapsed: false,
menus: []
}
},
computed: {
...mapState({
// 主路由
mainMenu: state => state.permission.addRouters,
layoutMode: state => state.app.layout,
sidebarOpened: state => state.app.sidebar.opened,
fixedHeader: state => state.app.fixedHeader,
fixSiderbar: state => state.app.fixSiderbar,
contentWidth: state => state.app.contentWidth,
theme: state => state.app.theme,
device: state => state.app.device,
})
},
watch: {
sidebarOpened(val) {
console.log('watch',val)
this.collapsed = !val
},
},
......@@ -116,11 +115,11 @@
...mapActions(['setSidebar']),
toggle() {
this.collapsed = !this.collapsed
triggerResize()
this.setSidebar(!this.collapsed)
triggerWindowResizeEvent()
},
menuSelect() {
if (this.device !== 'desktop') {
if (!this.isDesktop()) {
this.collapsed = false
}
}
......
src/components/setting/SettingDrawer.vue
......@@ -92,7 +92,7 @@
<template slot='title'>
该设定仅 [顶部栏导航] 时有效
</template>
<a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
<a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
<a-select-option value="Fixed">固定</a-select-option>
<a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
</a-select>
......@@ -160,39 +160,25 @@
import SettingItem from '@/components/setting/SettingItem'
import config from '@/defaultSettings'
import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
import { mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
export default {
components: {
DetailList,
SettingItem
},
mixins: [mixin, mixinDevice],
data() {
return {
visible: true,
colorList,
}
},
computed: {
...mapState({
navTheme: state => state.app.theme,
layoutMode: state => state.app.layout,
primaryColor: state => state.app.color,
colorWeak: state => state.app.weak,
fixedHeader: state => state.app.fixedHeader,
fixSiderbar: state => state.app.fixSiderbar,
autoHideHeader: state => state.app.autoHideHeader,
contentWidth: state => state.app.contentWidth,
}),
},
watch: {
},
mounted () {
const vm = this
/*this.$nextTick(() => {
vm.visible = false
})*/
setTimeout(() => {
vm.visible = false
}, 16)
......
src/defaultSettings.js
......@@ -17,7 +17,7 @@ export default {
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: false, // sticky header
fixSiderbar: false, // sticky siderbar
autoHideHeader: false, // auto hide header
......
src/utils/mixin.js 0 → 100644
// import Vue from 'vue'
import { mapState } from "vuex";
// const mixinsComputed = Vue.config.optionMergeStrategies.computed
// const mixinsMethods = Vue.config.optionMergeStrategies.methods
const mixin = {
computed: {
...mapState({
layoutMode: state => state.app.layout,
navTheme: state => state.app.theme,
primaryColor: state => state.app.color,
colorWeak: state => state.app.weak,
fixedHeader: state => state.app.fixedHeader,
fixSiderbar: state => state.app.fixSiderbar,
contentWidth: state => state.app.contentWidth,
autoHideHeader: state => state.app.autoHideHeader,
sidebarOpened: state => state.app.sidebarOpened
})
}
}
const mixinDevice = {
computed: {
...mapState({
device: state => state.app.device,
})
},
methods: {
isMobile () {
return this.device === 'mobile'
},
isDesktop () {
return this.device === 'desktop'
}
}
}
export { mixin, mixinDevice }
\ No newline at end of file
src/utils/util.js
......@@ -13,7 +13,7 @@ export function welcome() {
/**
* 触发 window.resize
*/
export function triggerResize() {
export function triggerWindowResizeEvent() {
let event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
event.eventType = 'message'
......
src/views/account/settings/Custom.vue
<script>
import { mapState } from "vuex"
import { colorList } from '@/components/tools/setting'
import ASwitch from 'ant-design-vue/es/switch'
import AList from "ant-design-vue/es/list"
import AListItem from "ant-design-vue/es/list/Item"
import { mixin } from '@/utils/mixin.js'
const Meta = AListItem.Meta
......@@ -14,16 +14,11 @@
ASwitch,
Meta
},
mixins: [mixin],
data () {
return {
}
},
computed: {
...mapState({
theme: state => state.app.theme,
color: state => state.app.color
})
},
filters: {
themeFilter(theme) {
const themeMap = {
......@@ -58,14 +53,14 @@
</span>
</Meta>
<div slot="actions">
<ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.theme === 'dark' && true || false} onChange={this.onChange} />
<ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
</div>
</AListItem>
<AListItem>
<Meta>
<a slot="title">主题色</a>
<span slot="description">
页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.color) }/>
页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
</span>
</Meta>
</AListItem>
......
src/views/account/settings/Index.vue
......@@ -51,13 +51,14 @@
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import { mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'
export default {
components: {
RouteView,
PageLayout
},
mixins: [mixinDevice],
data () {
return {
// horizontal inline
......@@ -87,11 +88,6 @@
pageTitle: ''
}
},
computed: {
...mapState({
device: state => state.app.device,
})
},
created () {
this.updateMenu()
},
......@@ -121,9 +117,9 @@
border-right: unset;
border-bottom: 1px solid #e8e8e8;
width: 100%;
height: 48px;
overflow-x: hidden;
overflow-y: auto;
height: 50px;
overflow-x: auto;
overflow-y: scroll;
}
.account-settings-info-right {
padding: 20px 40px;
......
src/views/profile/advanced/Advanced.vue
......@@ -30,7 +30,7 @@
</template>
<a-card :bordered="false" title="流程进度">
<a-steps :direction="device==='mobile' && 'vertical' || 'horizontal'" :current="1" progressDot>
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
<a-step title="创建项目">
</a-step>
<a-step title="部门初审">
......@@ -133,7 +133,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList'
......@@ -146,6 +146,7 @@
DetailList,
DetailListItem
},
mixins: [mixinDevice],
data () {
return {
tabList: [
......@@ -295,12 +296,7 @@
}
return statusTypeMap[type]
}
},
computed: {
...mapState({
device: state => state.app.device,
})
},
}
}
</script>
......
src/views/result/Success.vue
......@@ -22,7 +22,7 @@
2016-12-12 ~ 2017-12-12
</a-col>
</a-row>
<a-steps :current="1" :direction="device === 'mobile' && directionType.vertical || directionType.horizontal" progressDot>
<a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
<a-step >
<span style="font-size: 14px" slot="title">创建项目</span>
<template slot="description">
......@@ -61,7 +61,7 @@
<script>
import Result from './Result'
import { mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'
const directionType = {
horizontal: 'horizontal',
......@@ -73,6 +73,7 @@
components: {
Result
},
mixins: [mixinDevice],
data () {
return {
title: '提交成功',
......@@ -82,11 +83,6 @@
' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
directionType
}
},
computed: {
...mapState({
device: state => state.app.device,
})
}
}
</script>
......
src/views/user/Register.vue
......@@ -90,7 +90,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js'
import { getSmsCaptcha } from '@/api/login'
const levelNames = {
......@@ -115,6 +115,7 @@
name: "Register",
components: {
},
mixins: [mixinDevice],
data() {
return {
form: null,
......@@ -131,9 +132,6 @@
}
},
computed: {
...mapState({
isMobile: state => state.app.device === 'mobile',
}),
passwordLevelClass () {
return levelClass[this.state.passwordLevel]
},
......@@ -198,7 +196,7 @@
},
handlePasswordInputClick () {
if (!this.isMobile) {
if (!this.isMobile()) {
this.state.passwordLevelChecked = true
return;
}
......
vue.config.js
......@@ -52,12 +52,14 @@ module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
ws: false,
changeOrigin: true
},
'/gateway': {
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
ws: false,
changeOrigin: true,
pathRewrite: {
'^/gateway': '/api'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment