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