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