Former-commit-id: bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly bb8db2a25ef717137a9d4e473538c0f954ba9eae [formerly 6048998b71a5d72480e0bd1e221dbab02a31053f [formerly 0507967735e3772d1574716b94858068a8b045a6]]]]]
Former-commit-id: cbe63cc098a79ac9ebaafb9d68b1cab37bd9f14f
Former-commit-id: 687b0834254a9afb6bd9ab786fcd0ac70974e9eb
Former-commit-id: 1ee65e08e4be2da3c4872b382cd00b22d0c70803 [formerly 077722278a2e61df580803cb3dd8338717496920]
Former-commit-id: 157231d84ac7a4a1361c466a2aeb660202593193
Former-commit-id: 5f841aa4b756af37c4bd3d7ffc1cf79b15cb653d
Former-commit-id: 3f7e0fd74011f90411a3f811b0123b19eb5f2c28
Former-commit-id: 39b9cdfcff6656ba65f35796cd14e4ca9ad2a26f
Former-commit-id: 11ae87bd38fa19408ca8cb6d20a74268c90cc6a7
This commit is contained in:
liyang
2018-08-28 18:18:47 +08:00
parent 06c27b4206
commit afc2a5b67b
3 changed files with 68 additions and 45 deletions

View File

@@ -68,9 +68,12 @@
<script> <script>
import { mapState, mapGetters, mapMutations } from 'vuex' import { mapState, mapGetters, mapMutations } from 'vuex'
import hotkeys from 'hotkeys-js' import mixinSearch from './mixins/search'
export default { export default {
name: 'd2-layout-header-aside', name: 'd2-layout-header-aside',
mixins: [
mixinSearch
],
components: { components: {
'd2-menu-side': () => import('./components/menu-side'), 'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'), 'd2-menu-header': () => import('./components/menu-header'),
@@ -79,8 +82,7 @@ export default {
'd2-header-search': () => import('./components/header-search'), 'd2-header-search': () => import('./components/header-search'),
'd2-header-theme': () => import('./components/header-theme'), 'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'), '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 () { data () {
return { return {
@@ -90,27 +92,9 @@ export default {
asideWidthCollapse: '65px' asideWidthCollapse: '65px'
} }
}, },
mounted () {
// 绑定搜索功能快捷键 [ 打开 ]
hotkeys(this.searchHotkey.open, event => {
event.preventDefault()
this.searchPanelOpen()
})
// 绑定搜索功能快捷键 [ 关闭 ]
hotkeys(this.searchHotkey.close, event => {
event.preventDefault()
this.searchPanelClose()
})
},
beforeDestroy () {
// 解绑搜索功能快捷键
hotkeys.unbind('esc')
},
computed: { computed: {
...mapState('d2admin', { ...mapState('d2admin', {
grayActive: state => state.gray.active, grayActive: state => state.gray.active,
searchActive: state => state.search.active,
searchHotkey: state => state.search.hotkey,
transitionActive: state => state.transition.active, transitionActive: state => state.transition.active,
asideCollapse: state => state.menu.asideCollapse asideCollapse: state => state.menu.asideCollapse
}), }),
@@ -131,36 +115,13 @@ export default {
}, },
methods: { methods: {
...mapMutations({ ...mapMutations({
menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle', menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
searchToggle: 'd2admin/search/toggle',
searchSet: 'd2admin/search/set'
}), }),
/** /**
* 接收点击切换侧边栏的按钮 * 接收点击切换侧边栏的按钮
*/ */
handleToggleAside () { handleToggleAside () {
this.menuAsideCollapseToggle() this.menuAsideCollapseToggle()
},
/**
* 接收点击搜索按钮
*/
handleSearchClick () {
this.searchToggle()
if (this.searchActive) {
this.$refs.panelSearch.focus()
}
},
searchPanelOpen () {
if (!this.searchActive) {
this.searchSet(true)
this.$refs.panelSearch.focus()
}
},
// 关闭搜索面板
searchPanelClose () {
if (this.searchActive) {
this.searchSet(false)
}
} }
} }
} }

View File

@@ -0,0 +1,58 @@
import { mapState, mapMutations } from 'vuex'
import hotkeys from 'hotkeys-js'
export default {
components: {
'd2-panel-search': () => import('../components/panel-search')
},
mounted () {
// 绑定搜索功能快捷键 [ 打开 ]
hotkeys(this.searchHotkey.open, event => {
event.preventDefault()
this.searchPanelOpen()
})
// 绑定搜索功能快捷键 [ 关闭 ]
hotkeys(this.searchHotkey.close, event => {
event.preventDefault()
this.searchPanelClose()
})
},
beforeDestroy () {
hotkeys.unbind(this.searchHotkey.open)
hotkeys.unbind(this.searchHotkey.close)
},
computed: {
...mapState('d2admin', {
searchActive: state => state.search.active,
searchHotkey: state => state.search.hotkey
})
},
methods: {
...mapMutations({
searchToggle: 'd2admin/search/toggle',
searchSet: 'd2admin/search/set'
}),
/**
* 接收点击搜索按钮
*/
handleSearchClick () {
this.searchToggle()
if (this.searchActive) {
this.$refs.panelSearch.focus()
}
},
searchPanelOpen () {
if (!this.searchActive) {
this.searchSet(true)
this.$refs.panelSearch.focus()
}
},
// 关闭搜索面板
searchPanelClose () {
if (this.searchActive) {
this.searchSet(false)
}
}
}
}

View File

@@ -30,6 +30,10 @@ const setting = {
version: version, version: version,
api: 'https://api.github.com/repos/FairyEver/d2-admin/releases/latest' api: 'https://api.github.com/repos/FairyEver/d2-admin/releases/latest'
}, },
// 菜单搜索
search: {
enable: true
},
// 注册的主题 // 注册的主题
theme: { theme: {
list: [ list: [