@jx3box/jx3box-vue3-ui 0.4.3 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/menu-by.less +2 -0
- package/index.js +16 -0
- package/package.json +1 -1
- package/src/App.vue +18 -0
- package/src/filters/clientBy.vue +85 -0
- package/src/filters/markBy.vue +177 -0
- package/src/filters/menuBy.vue +63 -0
- package/src/filters/orderBy.vue +170 -0
- package/src/filters/tagBy.vue +171 -0
- package/src/filters/topicBy.vue +151 -0
- package/src/filters/zlpBy.vue +70 -0
package/assets/css/menu-by.less
CHANGED
package/index.js
CHANGED
|
@@ -6,6 +6,14 @@ import LeftSidebar from "./src/LeftSidebar.vue";
|
|
|
6
6
|
import RightSidebar from "./src/RightSidebar.vue";
|
|
7
7
|
import LeftSideToggle from "./src/LeftSideToggle.vue";
|
|
8
8
|
|
|
9
|
+
import markBy from "./src/filters/markBy.vue";
|
|
10
|
+
import tagBy from "./src/filters/tagBy.vue";
|
|
11
|
+
import orderBy from "./src/filters/orderBy.vue";
|
|
12
|
+
import menuBy from "./src/filters/menuBy.vue";
|
|
13
|
+
import clientBy from "./src/filters/clientBy.vue";
|
|
14
|
+
import zlpBy from "./src/filters/zlpBy.vue";
|
|
15
|
+
import topicBy from "./src/filters/topicBy.vue";
|
|
16
|
+
|
|
9
17
|
const components = {
|
|
10
18
|
Header,
|
|
11
19
|
Footer,
|
|
@@ -14,6 +22,14 @@ const components = {
|
|
|
14
22
|
LeftSidebar,
|
|
15
23
|
RightSidebar,
|
|
16
24
|
LeftSideToggle,
|
|
25
|
+
|
|
26
|
+
tagBy,
|
|
27
|
+
orderBy,
|
|
28
|
+
markBy,
|
|
29
|
+
menuBy,
|
|
30
|
+
clientBy,
|
|
31
|
+
zlpBy,
|
|
32
|
+
topicBy,
|
|
17
33
|
};
|
|
18
34
|
|
|
19
35
|
const install = function (app) {
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -21,6 +21,16 @@
|
|
|
21
21
|
</LeftSidebar>
|
|
22
22
|
|
|
23
23
|
<Main :withoutLeft="false" :withoutRight="false">
|
|
24
|
+
<clientBy @filter="filterMeta" :type="client"></clientBy>
|
|
25
|
+
|
|
26
|
+
<markBy @filter="filterMeta"></markBy>
|
|
27
|
+
|
|
28
|
+
<zlpBy @filter="filterMeta" type="zlp" :client="client"></zlpBy>
|
|
29
|
+
<orderBy @filter="filterMeta"></orderBy>
|
|
30
|
+
<menuBy :data="['test1', 'test2']" @filter="filterMeta"></menuBy>
|
|
31
|
+
<tagBy :data="['PVE', 'PVX']" :type="tag" @filter="filterMeta"></tagBy>
|
|
32
|
+
<topicBy v-model="tag2" label="PVE" :topics="post_topics"></topicBy>
|
|
33
|
+
<el-divider></el-divider>
|
|
24
34
|
<UploadAlum />
|
|
25
35
|
<PostHeader :post="post"></PostHeader>
|
|
26
36
|
<SimpleThxVue
|
|
@@ -62,6 +72,7 @@ import Thx from "./single/Thx.vue";
|
|
|
62
72
|
import PostHeader from "./single/PostHeader.vue";
|
|
63
73
|
import PostTopic from "./single/PostTopic.vue";
|
|
64
74
|
import axios from "axios";
|
|
75
|
+
import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
|
|
65
76
|
export default {
|
|
66
77
|
name: "App",
|
|
67
78
|
components: {
|
|
@@ -77,6 +88,10 @@ export default {
|
|
|
77
88
|
return {
|
|
78
89
|
post_id: "60031",
|
|
79
90
|
post: "",
|
|
91
|
+
client: location.href.includes("origin") ? "origin" : "std",
|
|
92
|
+
tag: "",
|
|
93
|
+
post_topics: post_topics["bps_pve"],
|
|
94
|
+
tag2: "",
|
|
80
95
|
};
|
|
81
96
|
},
|
|
82
97
|
watch: {
|
|
@@ -94,6 +109,9 @@ export default {
|
|
|
94
109
|
this.$forceUpdate();
|
|
95
110
|
});
|
|
96
111
|
},
|
|
112
|
+
filterMeta(val) {
|
|
113
|
+
console.log(val);
|
|
114
|
+
},
|
|
97
115
|
},
|
|
98
116
|
};
|
|
99
117
|
</script>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-filter-client">
|
|
3
|
+
<ul>
|
|
4
|
+
<li
|
|
5
|
+
class="u-client"
|
|
6
|
+
:class="{ on: client == value }"
|
|
7
|
+
v-for="(label, value) in clients"
|
|
8
|
+
:key="value"
|
|
9
|
+
@click="filter(value)"
|
|
10
|
+
>
|
|
11
|
+
{{ label }}
|
|
12
|
+
</li>
|
|
13
|
+
</ul>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
const clients = {
|
|
19
|
+
all: "全部版本",
|
|
20
|
+
std: "重制",
|
|
21
|
+
origin: "缘起",
|
|
22
|
+
};
|
|
23
|
+
export default {
|
|
24
|
+
name: "clientBy",
|
|
25
|
+
emits: ["filter"],
|
|
26
|
+
props: ["type"],
|
|
27
|
+
data: function () {
|
|
28
|
+
return {
|
|
29
|
+
client: this.type || "all",
|
|
30
|
+
clients,
|
|
31
|
+
};
|
|
32
|
+
},
|
|
33
|
+
computed: {},
|
|
34
|
+
methods: {
|
|
35
|
+
filter: function (val) {
|
|
36
|
+
this.client = val;
|
|
37
|
+
this.$emit("filter", { type: "client", val: val });
|
|
38
|
+
this.$forceUpdate();
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
mounted: function () {
|
|
42
|
+
const client = location.href.includes("origin") ? "origin" : "std";
|
|
43
|
+
if (client) {
|
|
44
|
+
this.client = client;
|
|
45
|
+
this.filter(this.client);
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style lang="less">
|
|
52
|
+
.w-filter-client {
|
|
53
|
+
font-size: 0;
|
|
54
|
+
ul,
|
|
55
|
+
li {
|
|
56
|
+
list-style: none;
|
|
57
|
+
padding: 0;
|
|
58
|
+
margin: 0;
|
|
59
|
+
}
|
|
60
|
+
ul {
|
|
61
|
+
.clearfix;
|
|
62
|
+
.dbi;
|
|
63
|
+
background-color: @bg-gray;
|
|
64
|
+
border: 1px solid #eee;
|
|
65
|
+
.r(3px);
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
}
|
|
68
|
+
li {
|
|
69
|
+
padding: 5px 10px;
|
|
70
|
+
.fl;
|
|
71
|
+
.fz(12px);
|
|
72
|
+
border-right: 1px solid #eee;
|
|
73
|
+
&:last-child {
|
|
74
|
+
border-right: none;
|
|
75
|
+
}
|
|
76
|
+
.pointer;
|
|
77
|
+
|
|
78
|
+
&.on {
|
|
79
|
+
background-color: @color-link;
|
|
80
|
+
color: #fff;
|
|
81
|
+
border-color: darken(@color-link, 5%);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="w-filter-menu">
|
|
3
|
+
<el-dropdown>
|
|
4
|
+
<span class="el-dropdown-link">
|
|
5
|
+
<span class="u-menu-label"
|
|
6
|
+
><el-icon>
|
|
7
|
+
<operation />
|
|
8
|
+
</el-icon>
|
|
9
|
+
{{ current ? current : deftext
|
|
10
|
+
}}<el-icon>
|
|
11
|
+
<arrow-down /> </el-icon
|
|
12
|
+
></span>
|
|
13
|
+
</span>
|
|
14
|
+
<template #dropdown>
|
|
15
|
+
<el-dropdown-menu>
|
|
16
|
+
<el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
|
|
17
|
+
<el-dropdown-item v-for="(item, key) in marks" :key="key" @click="filter(key)">{{
|
|
18
|
+
item
|
|
19
|
+
}}</el-dropdown-item>
|
|
20
|
+
</el-dropdown-menu>
|
|
21
|
+
</template>
|
|
22
|
+
</el-dropdown>
|
|
23
|
+
</span>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
const default_marks = {
|
|
28
|
+
newbie: "新手易用",
|
|
29
|
+
advanced: "进阶推荐",
|
|
30
|
+
recommended: "编辑精选",
|
|
31
|
+
geek: "骨灰必备",
|
|
32
|
+
};
|
|
33
|
+
export default {
|
|
34
|
+
name: "markBy",
|
|
35
|
+
emits: ["filter"],
|
|
36
|
+
props: {
|
|
37
|
+
placeholder: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: "",
|
|
40
|
+
},
|
|
41
|
+
mode: {
|
|
42
|
+
type: String,
|
|
43
|
+
default: "",
|
|
44
|
+
},
|
|
45
|
+
marks: {
|
|
46
|
+
type: Object,
|
|
47
|
+
default: () => default_marks,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
data: function () {
|
|
51
|
+
return {
|
|
52
|
+
visible: false,
|
|
53
|
+
mark: "",
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
computed: {
|
|
57
|
+
current: function () {
|
|
58
|
+
return this.marks[this.mark];
|
|
59
|
+
},
|
|
60
|
+
deftext: function () {
|
|
61
|
+
return this.placeholder || "精选";
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
methods: {
|
|
65
|
+
toggleFilter: function () {
|
|
66
|
+
this.visible = !this.visible;
|
|
67
|
+
},
|
|
68
|
+
filter: function (key) {
|
|
69
|
+
this.mark = key;
|
|
70
|
+
this.$emit("filter", { type: "mark", val: key });
|
|
71
|
+
this.visible = false;
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
mounted: function () {},
|
|
75
|
+
components: {},
|
|
76
|
+
};
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<style lang="less">
|
|
80
|
+
.w-filter-menu {
|
|
81
|
+
.pointer;
|
|
82
|
+
.u-menu-label {
|
|
83
|
+
.flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: 5px;
|
|
86
|
+
.fz(12px);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.w-filter-mark {
|
|
90
|
+
.fz(12px);
|
|
91
|
+
|
|
92
|
+
.u-label {
|
|
93
|
+
.none;
|
|
94
|
+
}
|
|
95
|
+
.u-toggle {
|
|
96
|
+
.pa;
|
|
97
|
+
.rt(0);
|
|
98
|
+
padding: 6px 10px;
|
|
99
|
+
.pointer;
|
|
100
|
+
|
|
101
|
+
.el-icon-arrow-up {
|
|
102
|
+
.none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.on {
|
|
106
|
+
.el-icon-arrow-down {
|
|
107
|
+
.none;
|
|
108
|
+
}
|
|
109
|
+
.el-icon-arrow-up {
|
|
110
|
+
.db;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.u-mode {
|
|
115
|
+
.mr(15px);
|
|
116
|
+
.pointer;
|
|
117
|
+
i {
|
|
118
|
+
.mr(2px);
|
|
119
|
+
}
|
|
120
|
+
&.on {
|
|
121
|
+
color: @primary;
|
|
122
|
+
}
|
|
123
|
+
&:hover {
|
|
124
|
+
color: @pink;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
@media screen and (max-width: @ipad) {
|
|
129
|
+
.w-filter-mark {
|
|
130
|
+
.pr;
|
|
131
|
+
background-color: #f6f8fa;
|
|
132
|
+
border: 1px solid #eee;
|
|
133
|
+
.r(4px);
|
|
134
|
+
user-select: none;
|
|
135
|
+
padding: 5px 0;
|
|
136
|
+
padding-right: 20px;
|
|
137
|
+
min-width: 110px;
|
|
138
|
+
box-sizing: border-box;
|
|
139
|
+
|
|
140
|
+
&.on {
|
|
141
|
+
.u-options {
|
|
142
|
+
.db;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
border-bottom-left-radius: 0;
|
|
146
|
+
border-bottom-right-radius: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.u-label {
|
|
150
|
+
padding: 0 10px;
|
|
151
|
+
.pointer;
|
|
152
|
+
.db;
|
|
153
|
+
}
|
|
154
|
+
.u-options {
|
|
155
|
+
.pa;
|
|
156
|
+
.lt(-1px, 29px);
|
|
157
|
+
padding: 5px 0;
|
|
158
|
+
.w(100%);
|
|
159
|
+
background-color: #fff;
|
|
160
|
+
border: 1px solid #ddd;
|
|
161
|
+
.z(2);
|
|
162
|
+
.u-mode {
|
|
163
|
+
.db;
|
|
164
|
+
padding: 7px 10px;
|
|
165
|
+
.pr;
|
|
166
|
+
.ml(0);
|
|
167
|
+
}
|
|
168
|
+
.none;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
@media screen and (max-width: @phone) {
|
|
173
|
+
.w-filter-mark {
|
|
174
|
+
.none;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
</style>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="w-filter-menu" v-if="data">
|
|
3
|
+
<el-dropdown>
|
|
4
|
+
<span class="el-dropdown-link">
|
|
5
|
+
<span class="u-menu-label"
|
|
6
|
+
><el-icon> <operation /> </el-icon>{{ current ? current : deftext
|
|
7
|
+
}}<el-icon> <arrow-down /> </el-icon
|
|
8
|
+
></span>
|
|
9
|
+
</span>
|
|
10
|
+
<template #dropdown>
|
|
11
|
+
<el-dropdown-menu>
|
|
12
|
+
<el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
|
|
13
|
+
<el-dropdown-item v-for="(item, key) in data" :key="key" @click="filter(key)">{{
|
|
14
|
+
item
|
|
15
|
+
}}</el-dropdown-item>
|
|
16
|
+
</el-dropdown-menu>
|
|
17
|
+
</template>
|
|
18
|
+
</el-dropdown>
|
|
19
|
+
</span>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
export default {
|
|
24
|
+
name: "menuBy",
|
|
25
|
+
emits: ["filter"],
|
|
26
|
+
props: ["data", "type", "placeholder"],
|
|
27
|
+
data: function () {
|
|
28
|
+
return {
|
|
29
|
+
value: "",
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
computed: {
|
|
33
|
+
current: function () {
|
|
34
|
+
return this.data[this.value];
|
|
35
|
+
},
|
|
36
|
+
deftext: function () {
|
|
37
|
+
return this.placeholder || "筛选";
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
methods: {
|
|
41
|
+
filter: function (key) {
|
|
42
|
+
this.value = key;
|
|
43
|
+
this.$emit("filter", { type: this.type, val: key });
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
mounted: function () {},
|
|
47
|
+
components: {},
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style lang="less">
|
|
52
|
+
.w-filter-menu {
|
|
53
|
+
.pointer;
|
|
54
|
+
.u-menu-label {
|
|
55
|
+
.flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
i {
|
|
58
|
+
.mr(5px);
|
|
59
|
+
}
|
|
60
|
+
.fz(12px);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-filter-order" :class="{ on: visible }">
|
|
3
|
+
<span class="u-label" @click="toggleFilter">
|
|
4
|
+
<span class="u-current-order">排序 : {{ current || "最后更新" }}</span>
|
|
5
|
+
<span class="u-toggle">
|
|
6
|
+
<el-icon class="el-icon-arrow-down">
|
|
7
|
+
<arrow-down />
|
|
8
|
+
</el-icon>
|
|
9
|
+
<el-icon class="el-icon-arrow-up">
|
|
10
|
+
<arrow-up />
|
|
11
|
+
</el-icon>
|
|
12
|
+
</span>
|
|
13
|
+
</span>
|
|
14
|
+
<span class="u-options">
|
|
15
|
+
<span class="u-mode u-update" :class="{ on: order == 'update' }" @click="filter('update')"
|
|
16
|
+
><el-icon>
|
|
17
|
+
<refresh />
|
|
18
|
+
</el-icon>
|
|
19
|
+
最后更新</span
|
|
20
|
+
>
|
|
21
|
+
<span class="u-mode u-podate" :class="{ on: order == 'podate' }" @click="filter('podate')"
|
|
22
|
+
><el-icon>
|
|
23
|
+
<sort />
|
|
24
|
+
</el-icon>
|
|
25
|
+
最早发布</span
|
|
26
|
+
>
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</span>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script>
|
|
33
|
+
const order_map = {
|
|
34
|
+
update: "最后更新",
|
|
35
|
+
podate: "最早发布",
|
|
36
|
+
favs: "收藏最多",
|
|
37
|
+
likes: "点赞最多",
|
|
38
|
+
downs: "下载最多",
|
|
39
|
+
};
|
|
40
|
+
export default {
|
|
41
|
+
name: "orderBy",
|
|
42
|
+
emits: ["filter"],
|
|
43
|
+
props: [],
|
|
44
|
+
data: function () {
|
|
45
|
+
return {
|
|
46
|
+
visible: false,
|
|
47
|
+
order: "update",
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
computed: {
|
|
51
|
+
current: function () {
|
|
52
|
+
return order_map[this.order];
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
methods: {
|
|
56
|
+
toggleFilter: function () {
|
|
57
|
+
this.visible = !this.visible;
|
|
58
|
+
},
|
|
59
|
+
filter: function (key) {
|
|
60
|
+
this.order = key;
|
|
61
|
+
this.$emit("filter", { type: "order", val: key });
|
|
62
|
+
this.visible = false;
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
mounted: function () {},
|
|
66
|
+
components: {},
|
|
67
|
+
};
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<style lang="less">
|
|
71
|
+
.w-filter-order {
|
|
72
|
+
.fz(12px);
|
|
73
|
+
|
|
74
|
+
.u-label {
|
|
75
|
+
.none;
|
|
76
|
+
}
|
|
77
|
+
.u-toggle {
|
|
78
|
+
.pa;
|
|
79
|
+
.rt(0);
|
|
80
|
+
padding: 6px 10px;
|
|
81
|
+
.pointer;
|
|
82
|
+
|
|
83
|
+
.el-icon-arrow-up {
|
|
84
|
+
.none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.on {
|
|
88
|
+
.el-icon-arrow-down {
|
|
89
|
+
.none;
|
|
90
|
+
}
|
|
91
|
+
.el-icon-arrow-up {
|
|
92
|
+
.db;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.u-options {
|
|
97
|
+
.flex;
|
|
98
|
+
gap: 15px;
|
|
99
|
+
align-items: center;
|
|
100
|
+
}
|
|
101
|
+
.u-mode {
|
|
102
|
+
.flex;
|
|
103
|
+
gap: 2px;
|
|
104
|
+
align-items: center;
|
|
105
|
+
.pointer;
|
|
106
|
+
&.on {
|
|
107
|
+
color: @primary;
|
|
108
|
+
}
|
|
109
|
+
&:hover {
|
|
110
|
+
color: @pink;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@media screen and (max-width: @ipad) {
|
|
115
|
+
.w-filter-order {
|
|
116
|
+
.pr;
|
|
117
|
+
background-color: #f6f8fa;
|
|
118
|
+
border: 1px solid #eee;
|
|
119
|
+
.r(4px);
|
|
120
|
+
user-select: none;
|
|
121
|
+
padding: 5px 0;
|
|
122
|
+
padding-right: 20px;
|
|
123
|
+
|
|
124
|
+
&.on {
|
|
125
|
+
.u-options {
|
|
126
|
+
.flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
align-items: flex-start;
|
|
129
|
+
gap: 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
border-bottom-left-radius: 0;
|
|
133
|
+
border-bottom-right-radius: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.u-label {
|
|
137
|
+
padding: 0 10px;
|
|
138
|
+
.pointer;
|
|
139
|
+
.db;
|
|
140
|
+
}
|
|
141
|
+
.u-options {
|
|
142
|
+
.pa;
|
|
143
|
+
.lt(-1px, 29px);
|
|
144
|
+
padding: 5px 0;
|
|
145
|
+
.w(100%);
|
|
146
|
+
background-color: #fff;
|
|
147
|
+
border: 1px solid #ddd;
|
|
148
|
+
.z(2);
|
|
149
|
+
.flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
align-items: flex-start;
|
|
152
|
+
gap: 0;
|
|
153
|
+
.u-mode {
|
|
154
|
+
.flex;
|
|
155
|
+
align-items: center;
|
|
156
|
+
gap: 2px;
|
|
157
|
+
padding: 7px 10px;
|
|
158
|
+
.pr;
|
|
159
|
+
.ml(0);
|
|
160
|
+
}
|
|
161
|
+
.none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
@media screen and (max-width: @phone) {
|
|
166
|
+
.w-filter-order {
|
|
167
|
+
.none;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
</style>
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-filter-tag" :class="{ on: visible }">
|
|
3
|
+
<span class="u-label" @click="toggleFilter">
|
|
4
|
+
<span class="u-current-filter"
|
|
5
|
+
><el-icon>
|
|
6
|
+
<collection-tag />
|
|
7
|
+
</el-icon>
|
|
8
|
+
{{ current || "全部" }}</span
|
|
9
|
+
>
|
|
10
|
+
<span class="u-toggle">
|
|
11
|
+
<el-icon class="el-icon-arrow-down">
|
|
12
|
+
<arrow-down />
|
|
13
|
+
</el-icon>
|
|
14
|
+
<el-icon class="el-icon-arrow-up">
|
|
15
|
+
<arrow-up />
|
|
16
|
+
</el-icon>
|
|
17
|
+
</span>
|
|
18
|
+
</span>
|
|
19
|
+
<span class="u-options">
|
|
20
|
+
<span class="u-mode u-all" :class="{ on: value === '' }" @click="filter('', '')"
|
|
21
|
+
><el-icon>
|
|
22
|
+
<collection-tag />
|
|
23
|
+
</el-icon>
|
|
24
|
+
全部</span
|
|
25
|
+
>
|
|
26
|
+
<span
|
|
27
|
+
v-for="(item, key) in data"
|
|
28
|
+
:key="key"
|
|
29
|
+
class="u-mode"
|
|
30
|
+
:class="{ on: item == current }"
|
|
31
|
+
@click="filter(key)"
|
|
32
|
+
><el-icon>
|
|
33
|
+
<collection-tag />
|
|
34
|
+
</el-icon>
|
|
35
|
+
{{ item }}</span
|
|
36
|
+
>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</span>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
export default {
|
|
44
|
+
name: "tagBy",
|
|
45
|
+
emits: ["filter"],
|
|
46
|
+
props: ["data", "type"],
|
|
47
|
+
data: function () {
|
|
48
|
+
return {
|
|
49
|
+
visible: false,
|
|
50
|
+
value: "",
|
|
51
|
+
};
|
|
52
|
+
},
|
|
53
|
+
computed: {
|
|
54
|
+
current: function () {
|
|
55
|
+
return this.data[this.value];
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
toggleFilter: function () {
|
|
60
|
+
this.visible = !this.visible;
|
|
61
|
+
},
|
|
62
|
+
filter: function (key) {
|
|
63
|
+
this.value = key;
|
|
64
|
+
this.$emit("filter", { type: this.type, val: key });
|
|
65
|
+
this.visible = false;
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
mounted: function () {},
|
|
69
|
+
components: {},
|
|
70
|
+
};
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<style lang="less">
|
|
74
|
+
.w-filter-tag {
|
|
75
|
+
.fz(12px);
|
|
76
|
+
|
|
77
|
+
.u-label {
|
|
78
|
+
.none;
|
|
79
|
+
}
|
|
80
|
+
.u-current-filter {
|
|
81
|
+
.flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
gap: 5px;
|
|
84
|
+
}
|
|
85
|
+
.u-toggle {
|
|
86
|
+
.pa;
|
|
87
|
+
.rt(0);
|
|
88
|
+
padding: 6px 10px;
|
|
89
|
+
.pointer;
|
|
90
|
+
|
|
91
|
+
.el-icon-arrow-up {
|
|
92
|
+
.none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.on {
|
|
96
|
+
.el-icon-arrow-down {
|
|
97
|
+
.none;
|
|
98
|
+
}
|
|
99
|
+
.el-icon-arrow-up {
|
|
100
|
+
.db;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
.u-options {
|
|
105
|
+
.flex;
|
|
106
|
+
gap: 15px;
|
|
107
|
+
}
|
|
108
|
+
.u-mode {
|
|
109
|
+
.flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
gap: 2px;
|
|
112
|
+
.pointer;
|
|
113
|
+
&.on {
|
|
114
|
+
color: @primary;
|
|
115
|
+
}
|
|
116
|
+
&:hover {
|
|
117
|
+
color: @pink;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
@media screen and (max-width: @ipad) {
|
|
122
|
+
.w-filter-tag {
|
|
123
|
+
.pr;
|
|
124
|
+
background-color: @bg-light;
|
|
125
|
+
border: 1px solid #ddd;
|
|
126
|
+
.r(4px);
|
|
127
|
+
user-select: none;
|
|
128
|
+
padding: 6px 0;
|
|
129
|
+
padding-right: 20px;
|
|
130
|
+
|
|
131
|
+
&.on {
|
|
132
|
+
.u-options {
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
border-bottom-left-radius: 0;
|
|
137
|
+
border-bottom-right-radius: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.u-label {
|
|
141
|
+
padding: 0 10px;
|
|
142
|
+
.pointer;
|
|
143
|
+
.db;
|
|
144
|
+
}
|
|
145
|
+
.u-options {
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
.pa;
|
|
148
|
+
.lt(-1px, 29px);
|
|
149
|
+
padding: 5px 0;
|
|
150
|
+
.w(100%);
|
|
151
|
+
background-color: #fff;
|
|
152
|
+
border: 1px solid #ddd;
|
|
153
|
+
.z(2);
|
|
154
|
+
.u-mode {
|
|
155
|
+
.flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
gap: 5px;
|
|
158
|
+
padding: 7px 10px;
|
|
159
|
+
.pr;
|
|
160
|
+
.ml(0);
|
|
161
|
+
}
|
|
162
|
+
.none;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
@media screen and (max-width: @phone) {
|
|
167
|
+
.w-filter-tag {
|
|
168
|
+
.none;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
</style>
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-filter-topic" ref="tagBy">
|
|
3
|
+
<el-popover
|
|
4
|
+
v-model:visible="visible"
|
|
5
|
+
trigger="manual"
|
|
6
|
+
ref="pop"
|
|
7
|
+
:width="380"
|
|
8
|
+
popper-class="w-filter-topic__pop"
|
|
9
|
+
:popper-options="{ boundariesElement: 'parent' }"
|
|
10
|
+
>
|
|
11
|
+
<div class="w-filter-topic__content">
|
|
12
|
+
<div class="u-group">
|
|
13
|
+
<el-tag
|
|
14
|
+
v-for="item in computedTopics"
|
|
15
|
+
:key="item"
|
|
16
|
+
@click="onTagClick(item)"
|
|
17
|
+
class="u-group-item u-topic"
|
|
18
|
+
:effect="item === value ? 'dark' : 'light'"
|
|
19
|
+
size="small"
|
|
20
|
+
>{{ item }}</el-tag
|
|
21
|
+
>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<template #reference>
|
|
26
|
+
<span @click="onToggle" class="u-toggle" :class="{ active: !!value }">
|
|
27
|
+
<el-icon> <operation /> </el-icon>
|
|
28
|
+
{{ activeText }}
|
|
29
|
+
<el-icon>
|
|
30
|
+
<arrow-down />
|
|
31
|
+
</el-icon>
|
|
32
|
+
</span>
|
|
33
|
+
</template>
|
|
34
|
+
</el-popover>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script>
|
|
39
|
+
export default {
|
|
40
|
+
name: "topicBy",
|
|
41
|
+
props: {
|
|
42
|
+
topics: {
|
|
43
|
+
type: Array,
|
|
44
|
+
default: () => [],
|
|
45
|
+
},
|
|
46
|
+
modelValue: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: "",
|
|
49
|
+
},
|
|
50
|
+
label: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: "主题",
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
emits: ["update:modelValue"],
|
|
56
|
+
model: {
|
|
57
|
+
prop: "modelValue",
|
|
58
|
+
event: "update:modelValue",
|
|
59
|
+
},
|
|
60
|
+
data() {
|
|
61
|
+
return {
|
|
62
|
+
visible: false,
|
|
63
|
+
value: "全部",
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
computed: {
|
|
67
|
+
activeText() {
|
|
68
|
+
const { value } = this;
|
|
69
|
+
return value === "全部" ? this.label : value;
|
|
70
|
+
},
|
|
71
|
+
computedTopics() {
|
|
72
|
+
return ["全部", ...this.topics];
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
watch: {
|
|
76
|
+
modelValue: {
|
|
77
|
+
immediate: true,
|
|
78
|
+
handler(val) {
|
|
79
|
+
this.value = val === "" ? "全部" : val;
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
value(val) {
|
|
83
|
+
if (val === "全部") val = "";
|
|
84
|
+
this.$emit("update:modelValue", val);
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
mounted() {
|
|
88
|
+
document.addEventListener("click", this.clickOutside);
|
|
89
|
+
},
|
|
90
|
+
beforeUnmount() {
|
|
91
|
+
document.removeEventListener("click", this.clickOutside);
|
|
92
|
+
},
|
|
93
|
+
methods: {
|
|
94
|
+
onToggle() {
|
|
95
|
+
this.visible = !this.visible;
|
|
96
|
+
},
|
|
97
|
+
onTagClick(item) {
|
|
98
|
+
this.value = item;
|
|
99
|
+
|
|
100
|
+
setTimeout(() => {
|
|
101
|
+
this.visible = false;
|
|
102
|
+
}, 100);
|
|
103
|
+
},
|
|
104
|
+
clickOutside(e) {
|
|
105
|
+
const tagBy = this.$refs.tagBy;
|
|
106
|
+
const pop = this.$refs.pop;
|
|
107
|
+
|
|
108
|
+
if (tagBy && !tagBy.contains(e.target) && pop && !pop.$el.contains(e.target)) {
|
|
109
|
+
this.visible = false;
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
};
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<style lang="less">
|
|
117
|
+
.w-filter-topic {
|
|
118
|
+
display: inline-block;
|
|
119
|
+
.u-toggle {
|
|
120
|
+
color: #606266;
|
|
121
|
+
font-size: 12px;
|
|
122
|
+
.pointer;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
.w-filter-topic__content {
|
|
126
|
+
padding: 5px;
|
|
127
|
+
}
|
|
128
|
+
.w-filter-topic__pop {
|
|
129
|
+
.u-group-title {
|
|
130
|
+
color: #606266;
|
|
131
|
+
padding-bottom: 10px;
|
|
132
|
+
}
|
|
133
|
+
.u-group {
|
|
134
|
+
.flex;
|
|
135
|
+
flex-wrap: wrap;
|
|
136
|
+
gap: 10px;
|
|
137
|
+
}
|
|
138
|
+
.u-topic {
|
|
139
|
+
.pointer;
|
|
140
|
+
border: 1px solid transparent;
|
|
141
|
+
line-height: 26px;
|
|
142
|
+
height: 28px;
|
|
143
|
+
&:not(.el-tag--dark) {
|
|
144
|
+
background-color: #f1f8ff;
|
|
145
|
+
}
|
|
146
|
+
&:hover {
|
|
147
|
+
border: 1px solid @color-link;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
</style>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="w-filter-menu">
|
|
3
|
+
<el-dropdown>
|
|
4
|
+
<span class="el-dropdown-link">
|
|
5
|
+
<span class="u-menu-label">
|
|
6
|
+
<el-icon> <operation /> </el-icon>
|
|
7
|
+
{{ value ? value : "资料片" }}
|
|
8
|
+
<el-icon>
|
|
9
|
+
<arrow-down />
|
|
10
|
+
</el-icon>
|
|
11
|
+
</span>
|
|
12
|
+
</span>
|
|
13
|
+
<template #dropdown>
|
|
14
|
+
<el-dropdown-menu>
|
|
15
|
+
<el-dropdown-item @click="filter('')">
|
|
16
|
+
{{ "全部" }}
|
|
17
|
+
</el-dropdown-item>
|
|
18
|
+
<el-dropdown-item v-for="item in data" :key="item" @click="filter(item)">{{
|
|
19
|
+
item
|
|
20
|
+
}}</el-dropdown-item>
|
|
21
|
+
</el-dropdown-menu>
|
|
22
|
+
</template>
|
|
23
|
+
</el-dropdown>
|
|
24
|
+
</span>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
import zlps from "@jx3box/jx3box-common/data/jx3_zlp.json";
|
|
29
|
+
export default {
|
|
30
|
+
name: "zlpBy",
|
|
31
|
+
emits: ["filter"],
|
|
32
|
+
props: ["client"],
|
|
33
|
+
data: function () {
|
|
34
|
+
return {
|
|
35
|
+
value: "",
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
computed: {
|
|
39
|
+
data: function () {
|
|
40
|
+
let client = this.client || "all";
|
|
41
|
+
return zlps[client];
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
watch: {
|
|
45
|
+
client: function () {
|
|
46
|
+
this.value = "";
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
methods: {
|
|
50
|
+
filter: function (key) {
|
|
51
|
+
this.value = key;
|
|
52
|
+
this.$emit("filter", { type: "zlp", val: key });
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
mounted: function () {},
|
|
56
|
+
components: {},
|
|
57
|
+
};
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<style lang="less">
|
|
61
|
+
.w-filter-menu {
|
|
62
|
+
.pointer;
|
|
63
|
+
.u-menu-label {
|
|
64
|
+
i {
|
|
65
|
+
.mr(5px);
|
|
66
|
+
}
|
|
67
|
+
.fz(12px);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</style>
|