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