| 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"> |
| 4b854c | 5 | <router-link to="/">Home</router-link> |
| 6d1057 | 6 | <router-link to="/main2">乐谱搜索</router-link> |
| I | 7 | <router-link to="/main3">我的网盘</router-link> |
| 8 | <router-link to="/main4">友人帐</router-link> | |
| 9 | <router-link to="/login">登录</router-link> | |
| b505f3 | 10 | </div> |
| 06ee76 | 11 | </a-col> |
| 019990 | 12 | <a-col v-bind="showMain"> |
| b505f3 | 13 | <a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" v-bind="search" |
| I | 14 | @select="onSelect" @search="onSearch" @change="onChange"> |
| 019990 | 15 | <a-input @keydown.enter="onSelect"> |
| I | 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", |
| 7b98c8 | 69 | // allowClear: true, |
| 41b36f | 70 | // autoFocus: true, |
| I | 71 | backfill: true, |
| b505f3 | 72 | value: '', |
| 41b36f | 73 | dataSource: [], |
| I | 74 | }, |
| 75 | showSmall: { | |
| b505f3 | 76 | xs: 24, |
| I | 77 | sm: 18, |
| 78 | md: 18, | |
| 79 | lg: 18, | |
| 80 | xl: 18, | |
| 81 | xxl: 18, | |
| 41b36f | 82 | }, |
| I | 83 | showMain: { |
| 84 | xs: 0, | |
| b505f3 | 85 | sm: 6, |
| I | 86 | md: 6, |
| 87 | lg: { | |
| 88 | span: 3, | |
| 89 | offset: 3 | |
| 90 | }, | |
| 91 | xl: { | |
| 92 | span: 3, | |
| 93 | offset: 3 | |
| 94 | }, | |
| 95 | xxl: { | |
| 96 | span: 3, | |
| 97 | offset: 3 | |
| 98 | }, | |
| 41b36f | 99 | } |
| I | 100 | } |
| 101 | ||
| 102 | }, | |
| 103 | watch: { | |
| 104 | value(val) { | |
| 105 | console.log('值:', val); | |
| 106 | }, | |
| 107 | }, | |
| 108 | methods: { | |
| 019990 | 109 | test(e) { |
| I | 110 | console.log(333); |
| 111 | console.log(e); | |
| 112 | }, | |
| 41b36f | 113 | onSearch(searchText) { |
| b505f3 | 114 | this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; |
| 41b36f | 115 | console.log("补全.."); |
| I | 116 | }, |
| 117 | onSelect(value) { | |
| 118 | console.log('回车', value); | |
| b505f3 | 119 | this.$message.info("回车,内容为" + value) |
| 41b36f | 120 | }, |
| I | 121 | onChange(value) { |
| 122 | console.log('修改', value); | |
| 123 | }, | |
| 124 | keyListener(value) { | |
| 125 | console.log('ref', this.$refs.mySearch); | |
| 126 | console.log('键盘', value); | |
| 127 | }, | |
| 128 | }, | |
| 129 | } | |
| 019990 | 130 | </script> |
| b505f3 | 131 | <style lang="less" scoped> |
| I | 132 | .menu { |
| 133 | a { | |
| 134 | margin-left: 10px; | |
| 135 | } | |
| 136 | ||
| 137 | } | |
| 138 | </style> | |
