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