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
| <template>
| <el-autocomplete
| class="top-search"
| popper-class="my-autocomplete"
| v-model="value"
| :fetch-suggestions="querySearch"
| :placeholder="$t('search')"
| @select="handleSelect"
| >
| <template #="{ item }">
| <i :class="[item[iconKey], 'icon']"></i>
| <div class="name">{{ item[labelKey] }}</div>
| <div class="addr">{{ item[pathKey] }}</div>
| </template>
| </el-autocomplete>
| </template>
|
| <script>
| import { mapGetters } from 'vuex';
|
| export default {
| data() {
| return {
| value: '',
| menuList: [],
| };
| },
| created() {
| this.getMenuList();
| },
|
| watch: {
| menu() {
| this.getMenuList();
| },
| },
| computed: {
| labelKey() {
| return this.website.menu.label;
| },
| pathKey() {
| return this.website.menu.path;
| },
| iconKey() {
| return this.website.menu.icon;
| },
| childrenKey() {
| return this.website.menu.children;
| },
| ...mapGetters(['menu']),
| },
| methods: {
| getMenuList() {
| const findMenu = list => {
| for (let i = 0; i < list.length; i++) {
| const ele = Object.assign({}, list[i]);
| if (this.validatenull(ele[this.childrenKey])) {
| this.menuList.push(ele);
| } else {
| findMenu(ele[this.childrenKey]);
| }
| }
| };
| this.menuList = [];
| findMenu(this.menu);
| },
| querySearch(queryString, cb) {
| var restaurants = this.menuList;
| var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
| // 调用 callback 返回建议列表的数据
| cb(results);
| },
| createFilter(queryString) {
| return restaurant => {
| return restaurant[this.labelKey].toLowerCase().indexOf(queryString.toLowerCase()) === 0;
| };
| },
| handleSelect(item) {
| this.value = '';
| this.$router.push({
| path: item[this.pathKey],
| query: item.query,
| });
| },
| },
| };
| </script>
|
| <style lang="scss">
| .my-autocomplete {
| li {
| line-height: normal !important;
| padding: 7px !important;
|
| .icon {
| margin-right: 5px;
| display: inline-block;
| vertical-align: middle;
| }
|
| .name {
| display: inline-block;
| text-overflow: ellipsis;
| overflow: hidden;
| vertical-align: middle;
| }
|
| .addr {
| padding-top: 5px;
| width: 100%;
| font-size: 12px;
| color: #b4b4b4;
| }
|
| .highlighted .addr {
| color: #ddd;
| }
| }
| }
| </style>
|
|
