blog的前端代码
view | history | commit | commitdiff
inleft
2022-02-25 fc0c102554f509989dd74b199f298a67f266c3c8
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">
fc0c10 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>