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
| <template>
| <div class="search">
| <Card>
| <Tabs @on-click="handleClickTab">
| <TabPane
| v-for="(item, index) in templatesWay"
| :key="index"
| :name="item.template"
| :label="item.label"
| >
| <components v-if="item.template == currentTemplate" :is="currentTemplate"></components>
| </TabPane>
| </Tabs>
| </Card>
| </div>
| </template>
|
| <script>
| import todayHotWords from "./template/todayHotWords";
| import historyHotWords from "./template/historyHotWords";
| import setupHotWords from "./template/setupHotWords";
| import statisticsHotWords from "./template/statisticsHotWords";
| export default {
| name: "hotWords",
| components: {
| todayHotWords,
| historyHotWords,
| setupHotWords,
| statisticsHotWords
| },
| data() {
| return {
| // 模版集合key value
| templatesWay: [
| {
| template: "todayHotWords",
| label: "今日热词",
| },
| {
| template: "historyHotWords",
| label: "历史热词",
| },
| {
| template: "statisticsHotWords",
| label: "热词统计",
| },
| {
| template: "setupHotWords",
| label: "设置热词",
| },
| ],
| // 引入模板
| templates: {
| todayHotWords,
| historyHotWords,
| setupHotWords,
| statisticsHotWords
| },
| // 当前模版
| currentTemplate: "todayHotWords",
| };
| },
| methods: {
| handleClickTab(val) {
| this.currentTemplate = val;
| },
| },
|
| };
| </script>
| <style lang="scss" scoped></style>
|
|
