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
| <template>
| <div style="display: inline-block">
| <Dropdown @on-click="selectNav" :placement="placement">
| <div class="header-right-icon header-action" v-if="currType == 'icon'">
| <XIcon type="ios-apps" :size="20"></XIcon>
| </div>
| <div
| :class="`single-nav header-action single-nav-theme-${theme} `"
| v-else
| >
| {{ currNavTitle }}
| <XIcon type="ios-arrow-down" class="single-nav-dropdown-icon"></XIcon>
| </div>
| <DropdownMenu slot="list" v-if="type == 'list'">
| <DropdownItem
| v-for="(item, i) in navList"
| :key="i"
| :name="item.name"
| :selected="currNav == item.name"
| >
| <Badge :dot="item.component == 'hot'">
| <XIcon
| :type="item.icon"
| :size="14"
| style="margin: 0 10px 0 0"
| ></XIcon>
| {{ item.title }}
| </Badge>
| </DropdownItem>
| </DropdownMenu>
| <div slot="list" v-else>
| <apps :currNav="currNav" :navList="navList" @on-click="selectNav" />
| </div>
| </Dropdown>
| </div>
| </template>
|
| <script>
| import apps from "./apps";
| export default {
| name: "nav-app",
| components: {
| apps,
| },
| props: {
| navList: Array,
| currNav: String,
| currNavTitle: String,
| placement: {
| type: String,
| default: "bottom",
| },
| currType: {
| type: String,
| default: "icon",
| },
| type: {
| type: String,
| default: "app",
| },
| theme: {
| type: String,
| default: "darkblue",
| },
| },
| data() {
| return {};
| },
| methods: {
| selectNav(v) {
| this.$emit("on-click", v);
| },
| },
| watch: {},
| };
| </script>
|
| <style lang="less">
| // 单个下拉导航菜单
| .single-nav {
| height: 60px;
| display: flex;
| align-items: center;
| cursor: pointer;
| padding: 0 15px;
|
| .single-nav-dropdown-icon {
| margin-left: 5px;
| transition: transform 0.2s ease-in-out;
| }
| }
|
| .single-nav:hover {
| .single-nav-dropdown-icon {
| transform: rotate(180deg);
| }
| }
| </style>
|
|
