| commit | author | age | ||
| 41b36f | 1 | <template> |
| 019990 | 2 | <a-row type="flex" justify="start"> |
| I | 3 | <a-col v-bind="showSmall"> |
| 4 | <router-link to="/main1">Home »</router-link> | |
| 5 | </a-col> | |
| 6 | <a-col v-bind="showSmall"> | |
| 7 | <router-link to="/main2">乐谱搜索 »</router-link> | |
| 8 | </a-col> | |
| 9 | <a-col v-bind="showSmall"> | |
| 10 | <router-link to="/main3">我的网盘 »</router-link> | |
| 11 | </a-col> | |
| 12 | <a-col v-bind="showMain"> | |
| 13 | <a-auto-complete ref="mySearch" | |
| 14 | v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> | |
| 15 | <a-input @keydown.enter="onSelect"> | |
| 16 | <a-icon slot="suffix" type="search" class="certain-category-icon" /> | |
| 17 | </a-input> | |
| 18 | </a-auto-complete> | |
| 19 | </a-col> | |
| 20 | ||
| 21 | </a-row> | |
| 41b36f | 22 | |
| I | 23 | </template> |
| 24 | ||
| 25 | <script> | |
| 26 | export default { | |
| 019990 | 27 | mounted() { |
| I | 28 | let self = this; |
| 29 | let code = 0; | |
| 30 | let code2 = 0; | |
| 31 | let code3 = 0; | |
| 32 | document.onkeydown = function(e) { | |
| 33 | let evn = e || event; | |
| 34 | let key = evn.keyCode || evn.which || evn.charCode; | |
| 35 | if (key === 17) { | |
| 36 | code = 1; | |
| 37 | } | |
| 38 | if (key === 16) { | |
| 39 | code2 = 1; | |
| 40 | } | |
| 41 | if (key === 70) { | |
| 42 | code3 = 1; | |
| 43 | } | |
| 44 | if (code === 1 && code2 === 1 && code3 === 1) { | |
| 45 | self.$message.info("进入全局搜索..") | |
| 46 | //do something | |
| 47 | self.$refs.mySearch.focus(); | |
| 48 | code = 0; | |
| 49 | code2 = 0; | |
| 50 | } | |
| 51 | } | |
| 52 | document.onkeyup = function(e) { | |
| 53 | if (e.keyCode === 17) { | |
| 54 | code = 0; | |
| 55 | } | |
| 56 | if (e.keyCode === 16) { | |
| 57 | code2 = 0; | |
| 58 | } | |
| 59 | if (e.keyCode === 70) { | |
| 60 | code3 = 0; | |
| 61 | } | |
| 62 | } | |
| 41b36f | 63 | |
| 019990 | 64 | }, |
| 41b36f | 65 | data() { |
| I | 66 | return { |
| 67 | search: { | |
| 019990 | 68 | placeholder: "ctrl+shift+f/enter", |
| 41b36f | 69 | allowClear: true, |
| I | 70 | // autoFocus: true, |
| 71 | backfill: true, | |
| 72 | dataSource: [], | |
| 73 | }, | |
| 74 | showSmall: { | |
| 75 | xs: 6, | |
| 76 | sm: 6, | |
| 77 | md: 6, | |
| 78 | lg: 6, | |
| 79 | xl: 6, | |
| 80 | xxl: 6, | |
| 81 | }, | |
| 82 | showMain: { | |
| 83 | xs: 0, | |
| 84 | sm: 0, | |
| 85 | md: 2, | |
| 86 | lg: 2, | |
| 87 | xl: 2, | |
| 88 | xxl: 2, | |
| 89 | } | |
| 90 | } | |
| 91 | ||
| 92 | }, | |
| 93 | watch: { | |
| 94 | value(val) { | |
| 95 | console.log('值:', val); | |
| 96 | }, | |
| 97 | }, | |
| 98 | methods: { | |
| 019990 | 99 | test(e) { |
| I | 100 | console.log(333); |
| 101 | console.log(e); | |
| 102 | }, | |
| 41b36f | 103 | onSearch(searchText) { |
| I | 104 | this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; |
| 105 | console.log("补全.."); | |
| 106 | }, | |
| 107 | onSelect(value) { | |
| 108 | console.log('回车', value); | |
| 019990 | 109 | this.$message.info("回车") |
| 41b36f | 110 | }, |
| I | 111 | onChange(value) { |
| 112 | console.log('修改', value); | |
| 113 | }, | |
| 114 | keyListener(value) { | |
| 115 | console.log('ref', this.$refs.mySearch); | |
| 116 | console.log('键盘', value); | |
| 117 | }, | |
| 118 | }, | |
| 119 | } | |
| 019990 | 120 | </script> |
