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
| <template>
| <a-row type="flex" justify="start">
| <a-col v-bind="showSmall">
| <div class="menu">
| <router-link to="/">Home</router-link>
| <router-link to="/main2">乐谱搜索</router-link>
| <router-link to="/main3">我的网盘</router-link>
| <router-link to="/main4">友人帐</router-link>
| <router-link to="/login">登录</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>
| export default {
| mounted() {
| 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 {
| search: {
| placeholder: "ctrl+shift+f/enter",
| // 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>
|
|
