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