blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-26 87317f44d9cc20ad70b6971168667e1c843e03d8
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>
e33959 6                 <router-link to="/comment">碎碎念</router-link>
f60b31 7                 <router-link to="/link">友人帐</router-link>
56fe69 8                 <router-link to="/platform">月台</router-link>
6d1057 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">
74344a 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: {
6461f5 69                     //placeholder: "ctrl+shift+f/enter",
I 70                     placeholder: "搜索框未营业..",
7b98c8 71                     // allowClear: true,
41b36f 72                     // autoFocus: true,
I 73                     backfill: true,
b505f3 74                     value: '',
41b36f 75                     dataSource: [],
I 76                 },
77                 showSmall: {
b505f3 78                     xs: 24,
I 79                     sm: 18,
80                     md: 18,
81                     lg: 18,
82                     xl: 18,
83                     xxl: 18,
41b36f 84                 },
I 85                 showMain: {
86                     xs: 0,
b505f3 87                     sm: 6,
I 88                     md: 6,
89                     lg: {
90                         span: 3,
91                         offset: 3
92                     },
93                     xl: {
94                         span: 3,
95                         offset: 3
96                     },
97                     xxl: {
98                         span: 3,
99                         offset: 3
100                     },
41b36f 101                 }
I 102             }
103
104         },
105         watch: {
106             value(val) {
107                 console.log('值:', val);
108             },
109         },
110         methods: {
019990 111             test(e) {
I 112                 console.log(333);
113                 console.log(e);
114             },
41b36f 115             onSearch(searchText) {
b505f3 116                 this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
41b36f 117                 console.log("补全..");
I 118             },
119             onSelect(value) {
054cde 120                 // console.log('回车', value);
I 121                 this.$message.info("这个功能会等到内容足够多的时候再打开..")
122                 // this.$message.info("回车,内容为" + value)
41b36f 123             },
I 124             onChange(value) {
125                 console.log('修改', value);
126             },
127             keyListener(value) {
128                 console.log('ref', this.$refs.mySearch);
129                 console.log('键盘', value);
130             },
131         },
132     }
019990 133 </script>
b505f3 134 <style lang="less" scoped>
I 135     .menu {
63f511 136         -moz-user-select: none;
I 137         -webkit-user-select: none;
138         -ms-user-select: none;
139         -khtml-user-select: none;
140         user-select: none;
81c155 141
b505f3 142         a {
I 143             margin-left: 10px;
144         }
145
146     }
147 </style>