sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

页面基础结构和输入框

Browse Source 
Former-commit-id: 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly f700069d686be8e9ee177e36627eb284b3638ca7 [formerly a23ef90c3256f8bdee11ee6f63c778afa8b0e7d3]]]]]
Former-commit-id: cf1abe3e0fdd1078f74e78741bae59315d66aacf
Former-commit-id: 8c342c2eaeb9cf04bfbc1fa7b15f34c36445e77d
Former-commit-id: 38d7d5273db075c711a5235819cf75f15dfbd1a4 [formerly 054ce7262136015f7dd4dfa1cecd9a2e83a90449]
Former-commit-id: e6a1403e2d4426450c70b43a79f9809151df9146
Former-commit-id: b9d31641196ff5ba6cc16a8097ffc6a45582f601
Former-commit-id: e88fe6c0ea4ad041f4a9c44f36ba52222035e7d6
Former-commit-id: 34dbea74181ba5f7bba361921cc46c1750a6aadd
Former-commit-id: ffe6a1be153494a4845b800ebcdaf0483bd85ef0
This commit is contained in:
liyang
2018-08-28 09:58:31 +08:00
parent 133cb91682
commit 19ebab2fa6
6 changed files with 123 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/layout/header-aside/components/header-search/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
<d2-icon name="search"/>
</el-button>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('click')
}
}
}
</script>

41
src/layout/header-aside/components/panel-search/index.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="panel-search">
<div class="panel-search__input-group" flex="main:center cross:center">
<el-input
class="panel-search__input"
ref="input"
v-model="input"
suffix-icon="el-icon-search"
placeholder="搜索页面"/>
</div>
</div>
</template>
<script>
export default {
data () {
return {
input: ''
}
},
methods: {
focus () {
this.$nextTick(() => {
this.$refs.input.focus()
})
}
}
}
</script>
<style lang="scss" scoped>
.panel-search {
margin: 20px;
.panel-search__input-group {
height: 200px;
.panel-search__input {
width: 300px;
}
}
}
</style>

55
src/layout/header-aside/layout.vue
View File

@@ -20,6 +20,7 @@
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
<d2-header-search @click="handleSearch"/>
<d2-header-error-log/>
<d2-header-fullscreen/>
<d2-header-theme/>
@@ -37,17 +38,26 @@
<d2-menu-side/>
</div>
<!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex="dir:top">
<div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs/>
</div>
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view/>
</keep-alive>
</transition>
</div>
<div class="d2-theme-container-main" flex-box="1" flex>
<transition name="fade-scale">
<div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<d2-panel-search ref="panelSearch"/>
</div>
</transition>
<transition name="fade-scale">
<div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs/>
</div>
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view/>
</keep-alive>
</transition>
</div>
</div>
</transition>
</div>
</div>
</div>
@@ -63,9 +73,11 @@ export default {
'd2-menu-header': () => import('./components/menu-header'),
'd2-tabs': () => import('./components/tabs'),
'd2-header-fullscreen': () => import('./components/header-fullscreen'),
'd2-header-search': () => import('./components/header-search'),
'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'),
'd2-header-error-log': () => import('./components/header-error-log')
'd2-header-error-log': () => import('./components/header-error-log'),
'd2-panel-search': () => import('./components/panel-search')
},
data () {
return {
@@ -78,6 +90,7 @@ export default {
computed: {
...mapState('d2admin', {
grayActive: state => state.gray.active,
searchActive: state => state.search.active,
transitionActive: state => state.transition.active,
asideCollapse: state => state.menu.asideCollapse
}),
@@ -97,14 +110,24 @@ export default {
}
},
methods: {
...mapMutations('d2admin/menu', [
'asideCollapseToggle'
]),
...mapMutations({
menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle',
searchToggle: 'd2admin/search/toggle'
}),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside () {
this.asideCollapseToggle()
this.menuAsideCollapseToggle()
},
/**
* 接收点击搜索按钮
*/
handleSearch () {
this.searchToggle()
if (this.searchActive) {
this.$refs.panelSearch.focus()
}
}
}
}