inleft
2022-02-21 4b854c29227ef08ea178a3bba527a40ca2f84674
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>