inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
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