| commit | author | age | ||
| 9bcb19 | 1 | import { Select } from 'ant-design-vue' |
| I | 2 | import './index.less' |
| 3 | ||
| 4 | const GlobalSearch = { | |
| 5 | name: 'GlobalSearch', | |
| 6 | data () { | |
| 7 | return { | |
| 8 | visible: false | |
| 9 | } | |
| 10 | }, | |
| 11 | mounted () { | |
| 12 | const keyboardHandle = (e) => { | |
| 13 | e.preventDefault() | |
| 14 | e.stopPropagation() | |
| 15 | const { ctrlKey, shiftKey, altKey, keyCode } = e | |
| 16 | console.log('keyCode:', e.keyCode, e) | |
| 17 | // key is `K` and hold ctrl | |
| 18 | if (keyCode === 75 && ctrlKey && !shiftKey && !altKey) { | |
| 19 | this.visible = !this.visible | |
| 20 | } | |
| 21 | } | |
| 22 | document.addEventListener('keydown', keyboardHandle) | |
| 23 | }, | |
| 24 | render () { | |
| 25 | const { visible } = this | |
| 26 | const handleSearch = (e) => { | |
| 27 | this.$emit('search', e) | |
| 28 | } | |
| 29 | ||
| 30 | const handleChange = (e) => { | |
| 31 | this.$emit('change', e) | |
| 32 | } | |
| 33 | if (!visible) { | |
| 34 | return null | |
| 35 | } | |
| 36 | return ( | |
| 37 | <div class={'global-search global-search-wrapper'}> | |
| 38 | <div class={'global-search-box'}> | |
| 39 | <Select | |
| 40 | size={'large'} | |
| 41 | showSearch | |
| 42 | placeholder="Input search text.." | |
| 43 | style={{ width: '100%' }} | |
| 44 | defaultActiveFirstOption={false} | |
| 45 | showArrow={false} | |
| 46 | filterOption={false} | |
| 47 | onSearch={handleSearch} | |
| 48 | onChange={handleChange} | |
| 49 | notFoundContent={null} | |
| 50 | > | |
| 51 | </Select> | |
| 52 | <div class={'global-search-tips'}>Open with Ctrl/⌘ + K</div> | |
| 53 | </div> | |
| 54 | </div> | |
| 55 | ) | |
| 56 | } | |
| 57 | } | |
| 58 | ||
| 59 | GlobalSearch.install = function (Vue) { | |
| 60 | Vue.component(GlobalSearch.name, GlobalSearch) | |
| 61 | } | |
| 62 | ||
| 63 | export default GlobalSearch | |
