inleft
2022-01-21 f9c38ed1b72fc96b96c1d3ffdcc1a66b03bd3b73
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>