wl-design-mobile 0.0.3 → 0.0.4
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/README.md +6 -6
- package/detail/lambo-detail-grid.vue +2 -0
- package/detail/lambo-detail-row.vue +6 -3
- package/doc/img/styles/css/index.css +97 -97
- package/edit/list/styles/css/index.css +39 -39
- package/edit/select/lambo-edit-multi-select.vue +2 -1
- package/edit/select/styles/css/index.css +127 -124
- package/package.json +1 -1
- package/search/lambo-list-filter.vue +123 -0
- package/search/styles/css/index.css +125 -125
- package/util/assist.js +43 -43
- package/util/bus.js +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# wl-design-mobile
|
|
2
|
-
|
|
3
|
-
## Setup
|
|
4
|
-
```
|
|
5
|
-
npm i wl-design-mobile
|
|
6
|
-
```
|
|
1
|
+
# wl-design-mobile
|
|
2
|
+
|
|
3
|
+
## Setup
|
|
4
|
+
```
|
|
5
|
+
npm i wl-design-mobile
|
|
6
|
+
```
|
|
@@ -37,14 +37,16 @@ export default {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.detail-row-box {
|
|
40
|
-
height:
|
|
40
|
+
min-height: 60px;
|
|
41
|
+
height: auto;
|
|
41
42
|
margin: 0 14px;
|
|
42
43
|
padding: 12px 0;
|
|
43
44
|
border-bottom: 1px solid var(--scl-white-2);
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
.detail-row-title {
|
|
47
|
-
height: 16px;
|
|
48
|
+
min-height: 16px;
|
|
49
|
+
height: auto;
|
|
48
50
|
margin-bottom: 12px;
|
|
49
51
|
font-size: 12px;
|
|
50
52
|
font-family: Regular;
|
|
@@ -52,7 +54,8 @@ export default {
|
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
.detail-row-val {
|
|
55
|
-
height: 18px;
|
|
57
|
+
min-height: 18px;
|
|
58
|
+
height: auto;
|
|
56
59
|
font-size: 14px;
|
|
57
60
|
color: var(--scl-lucency-1);
|
|
58
61
|
}
|
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
.imgUplodaContainer {
|
|
2
|
-
padding: 12px 14px;
|
|
3
|
-
background: var(--scl-white-1);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.imgUplodaTitle {
|
|
7
|
-
/*margin-bottom: 18px;*/
|
|
8
|
-
display: flex;
|
|
9
|
-
justify-content: space-between;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.imgUplodaTitle p {
|
|
13
|
-
width: 100%;
|
|
14
|
-
color: var(--scl-gray-3);
|
|
15
|
-
font-size: 14px;
|
|
16
|
-
position: absolute;
|
|
17
|
-
top: -2px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.imgUplodaTitle img {
|
|
21
|
-
width: 20px;
|
|
22
|
-
height: 20px;
|
|
23
|
-
display: block;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/*右上角上传按钮样式*/
|
|
27
|
-
/deep/ .van-button--primary {
|
|
28
|
-
background: none;
|
|
29
|
-
border: none;
|
|
30
|
-
height: auto;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/*右上角上传按钮位置*/
|
|
34
|
-
/deep/ .van-uploader__input-wrapper, .van-uploader {
|
|
35
|
-
width: 100%;
|
|
36
|
-
position: static;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/*上传按钮首次进页面控制图标大小*/
|
|
40
|
-
/deep/ .van-icon__image {
|
|
41
|
-
width: 1em;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/*图片上传区域及右上角上传按钮*/
|
|
45
|
-
/deep/ .setUploader {
|
|
46
|
-
position: relative;
|
|
47
|
-
margin-bottom: 10px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/*图片整体位置*/
|
|
51
|
-
/deep/ .van-uploader__wrapper {
|
|
52
|
-
margin-top: 30px;
|
|
53
|
-
display: grid;
|
|
54
|
-
justify-content: space-between;
|
|
55
|
-
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
56
|
-
gap: 10px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/*右上角上传按钮位置*/
|
|
60
|
-
/deep/ .van-button--normal {
|
|
61
|
-
width: 20px;
|
|
62
|
-
position: absolute;
|
|
63
|
-
top: -1px;
|
|
64
|
-
right: -8px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/*/deep/ .van-uploader__preview {*/
|
|
68
|
-
/* width: 23%;*/
|
|
69
|
-
/* height: auto;*/
|
|
70
|
-
/* padding-left: 8px;*/
|
|
71
|
-
/* margin: 8px 0 0 0;*/
|
|
72
|
-
/*}*/
|
|
73
|
-
|
|
74
|
-
/*预览图片样式*/
|
|
75
|
-
/*/deep/ .van-uploader__preview-image {*/
|
|
76
|
-
/* display: block;*/
|
|
77
|
-
/* width: auto;*/
|
|
78
|
-
/* height: 100px;*/
|
|
79
|
-
/* overflow: hidden;*/
|
|
80
|
-
/* border: 1px solid #515a6e38;*/
|
|
81
|
-
/*}*/
|
|
82
|
-
|
|
83
|
-
/*控制上传功能覆盖区域*/
|
|
84
|
-
/deep/ .van-uploader__input {
|
|
85
|
-
height: 20px;
|
|
86
|
-
width: 20px;
|
|
87
|
-
position: absolute;
|
|
88
|
-
left: 95%;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/deep/ .van-uploader__preview {
|
|
92
|
-
margin: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/deep/ .van-uploader__preview-image {
|
|
96
|
-
width: auto;
|
|
97
|
-
height: 95px;
|
|
1
|
+
.imgUplodaContainer {
|
|
2
|
+
padding: 12px 14px;
|
|
3
|
+
background: var(--scl-white-1);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.imgUplodaTitle {
|
|
7
|
+
/*margin-bottom: 18px;*/
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.imgUplodaTitle p {
|
|
13
|
+
width: 100%;
|
|
14
|
+
color: var(--scl-gray-3);
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: -2px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.imgUplodaTitle img {
|
|
21
|
+
width: 20px;
|
|
22
|
+
height: 20px;
|
|
23
|
+
display: block;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*右上角上传按钮样式*/
|
|
27
|
+
/deep/ .van-button--primary {
|
|
28
|
+
background: none;
|
|
29
|
+
border: none;
|
|
30
|
+
height: auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/*右上角上传按钮位置*/
|
|
34
|
+
/deep/ .van-uploader__input-wrapper, .van-uploader {
|
|
35
|
+
width: 100%;
|
|
36
|
+
position: static;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/*上传按钮首次进页面控制图标大小*/
|
|
40
|
+
/deep/ .van-icon__image {
|
|
41
|
+
width: 1em;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/*图片上传区域及右上角上传按钮*/
|
|
45
|
+
/deep/ .setUploader {
|
|
46
|
+
position: relative;
|
|
47
|
+
margin-bottom: 10px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/*图片整体位置*/
|
|
51
|
+
/deep/ .van-uploader__wrapper {
|
|
52
|
+
margin-top: 30px;
|
|
53
|
+
display: grid;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
56
|
+
gap: 10px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/*右上角上传按钮位置*/
|
|
60
|
+
/deep/ .van-button--normal {
|
|
61
|
+
width: 20px;
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: -1px;
|
|
64
|
+
right: -8px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/*/deep/ .van-uploader__preview {*/
|
|
68
|
+
/* width: 23%;*/
|
|
69
|
+
/* height: auto;*/
|
|
70
|
+
/* padding-left: 8px;*/
|
|
71
|
+
/* margin: 8px 0 0 0;*/
|
|
72
|
+
/*}*/
|
|
73
|
+
|
|
74
|
+
/*预览图片样式*/
|
|
75
|
+
/*/deep/ .van-uploader__preview-image {*/
|
|
76
|
+
/* display: block;*/
|
|
77
|
+
/* width: auto;*/
|
|
78
|
+
/* height: 100px;*/
|
|
79
|
+
/* overflow: hidden;*/
|
|
80
|
+
/* border: 1px solid #515a6e38;*/
|
|
81
|
+
/*}*/
|
|
82
|
+
|
|
83
|
+
/*控制上传功能覆盖区域*/
|
|
84
|
+
/deep/ .van-uploader__input {
|
|
85
|
+
height: 20px;
|
|
86
|
+
width: 20px;
|
|
87
|
+
position: absolute;
|
|
88
|
+
left: 95%;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/deep/ .van-uploader__preview {
|
|
92
|
+
margin: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/deep/ .van-uploader__preview-image {
|
|
96
|
+
width: auto;
|
|
97
|
+
height: 95px;
|
|
98
98
|
}
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
.coll-div {
|
|
2
|
-
margin-bottom: 8px;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.indicator-title {
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
color: var(--scl-blue);
|
|
9
|
-
font-size: 14px;
|
|
10
|
-
font-family: 微软雅黑, serif Regular;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.indicator-title .color-line {
|
|
14
|
-
width: 3px;
|
|
15
|
-
height: 14px;
|
|
16
|
-
margin-right: 8px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.coll-title-icon {
|
|
20
|
-
justify-content: center;
|
|
21
|
-
align-items: center;
|
|
22
|
-
align-content: center;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* 覆盖折叠面板的标题的padding */
|
|
26
|
-
/deep/ .van-cell {
|
|
27
|
-
padding: 12px 10px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* 覆盖去掉折叠面板的标题下面的线 */
|
|
31
|
-
/deep/ .van-cell::after {
|
|
32
|
-
border: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* 覆盖折叠面板的内容的padding */
|
|
36
|
-
/deep/ .van-collapse-item__content {
|
|
37
|
-
padding: 0px 0px 0px 0px;
|
|
38
|
-
}
|
|
39
|
-
|
|
1
|
+
.coll-div {
|
|
2
|
+
margin-bottom: 8px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.indicator-title {
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
color: var(--scl-blue);
|
|
9
|
+
font-size: 14px;
|
|
10
|
+
font-family: 微软雅黑, serif Regular;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.indicator-title .color-line {
|
|
14
|
+
width: 3px;
|
|
15
|
+
height: 14px;
|
|
16
|
+
margin-right: 8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.coll-title-icon {
|
|
20
|
+
justify-content: center;
|
|
21
|
+
align-items: center;
|
|
22
|
+
align-content: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* 覆盖折叠面板的标题的padding */
|
|
26
|
+
/deep/ .van-cell {
|
|
27
|
+
padding: 12px 10px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* 覆盖去掉折叠面板的标题下面的线 */
|
|
31
|
+
/deep/ .van-cell::after {
|
|
32
|
+
border: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* 覆盖折叠面板的内容的padding */
|
|
36
|
+
/deep/ .van-collapse-item__content {
|
|
37
|
+
padding: 0px 0px 0px 0px;
|
|
38
|
+
}
|
|
39
|
+
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
18
|
<div>
|
|
19
|
-
<van-popup v-model
|
|
19
|
+
<van-popup v-model="showBottom" :style="{ height: '33%' }" position="bottom">
|
|
20
20
|
<van-checkbox-group v-model="selectItem.K">
|
|
21
21
|
<div class="edit-top-div">
|
|
22
22
|
<van-button class="edit-cancel-btn" size="normal" @click="cancel">取消</van-button>
|
|
@@ -137,6 +137,7 @@ export default {
|
|
|
137
137
|
changeColor() {
|
|
138
138
|
let searchRows = document.querySelectorAll('.edit-box')
|
|
139
139
|
Array.from(searchRows).forEach(function (row, index) {
|
|
140
|
+
console.log(index)
|
|
140
141
|
row.addEventListener('click', function () {
|
|
141
142
|
Array.from(searchRows).forEach(function (row) {
|
|
142
143
|
row.style.borderBottom = '1px solid var(--scl-white-2)'
|
|
@@ -1,124 +1,127 @@
|
|
|
1
|
-
.edit-box {
|
|
2
|
-
min-height:
|
|
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
|
-
|
|
1
|
+
.edit-box {
|
|
2
|
+
min-height: 50px;
|
|
3
|
+
height: auto;
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: space-between;
|
|
6
|
+
padding: 12px 0;
|
|
7
|
+
border-bottom: 1px solid var(--scl-white-2);
|
|
8
|
+
background-color: var(--scl-white-1);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.edit-left-box {
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* 覆盖value的padding */
|
|
16
|
+
.edit-left-box /deep/ .van-cell {
|
|
17
|
+
padding: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.edit-left-top {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
height: 16px;
|
|
24
|
+
padding: 0 15px;
|
|
25
|
+
margin-bottom: 12px
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.edit-red-icon {
|
|
29
|
+
margin-right: 4px
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.edit-title {
|
|
33
|
+
font-size: 12px;
|
|
34
|
+
font-family: Regular;
|
|
35
|
+
color: var(--scl-gray-2)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.edit-lambo-input {
|
|
39
|
+
border: none;
|
|
40
|
+
outline: none;
|
|
41
|
+
background: none;
|
|
42
|
+
height: 18px;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
color: var(--scl-gray-5);
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: flex-start;
|
|
47
|
+
align-items: center;
|
|
48
|
+
flex: 1;
|
|
49
|
+
margin-right: 8px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.edit-lambo-input-textarea {
|
|
53
|
+
border: none;
|
|
54
|
+
outline: none;
|
|
55
|
+
background: none;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
color: var(--scl-gray-5);
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: flex-start;
|
|
60
|
+
align-items: center;
|
|
61
|
+
flex: 1;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.edit-right-icon {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
.edit-top-div {
|
|
71
|
+
display: flex;
|
|
72
|
+
justify-content: space-between;
|
|
73
|
+
height: 44px;
|
|
74
|
+
line-height: 44px;
|
|
75
|
+
width: 100%;
|
|
76
|
+
position: fixed;
|
|
77
|
+
z-index: 300;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.edit-cancel-btn {
|
|
81
|
+
border: none;
|
|
82
|
+
color: var(--scl-gray-3);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.edit-confirm-btn {
|
|
86
|
+
border: none;
|
|
87
|
+
color: var(--scl-blue);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.edit-select-title {
|
|
91
|
+
font-size: 16px;
|
|
92
|
+
font-weight: bold;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/*修改单选多选的滚动条样式*/
|
|
96
|
+
/deep/ .van-radio-group {
|
|
97
|
+
position: relative;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/*修改单选多选的滚动条样式*/
|
|
101
|
+
/deep/ .van-cell-group {
|
|
102
|
+
padding-top: 44px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/*修改单选多选的滚动条样式*/
|
|
106
|
+
/deep/ .van-cell:first-child {
|
|
107
|
+
padding-top: 10px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
/*滚动条样式*/
|
|
112
|
+
/deep/ ::-webkit-scrollbar {
|
|
113
|
+
width: 6px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/*滚动条样式*/
|
|
117
|
+
/deep/ ::-webkit-scrollbar-thumb {
|
|
118
|
+
border-radius: var(--ind-border-radius-xl);
|
|
119
|
+
background: rgba(45, 140, 240, 0.6);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/*滚动条样式*/
|
|
123
|
+
/deep/ ::-webkit-scrollbar-track {
|
|
124
|
+
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
125
|
+
border-radius: var(--ind-border-radius-xl);
|
|
126
|
+
background: rgba(231, 242, 250, 0.4);
|
|
127
|
+
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="opt-btn">
|
|
4
|
+
<div>
|
|
5
|
+
<slot name="optBtn"></slot>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="showFilter">
|
|
8
|
+
<lambo-icon-button :icon="'order.png'" @click="showOrderPop"></lambo-icon-button>
|
|
9
|
+
<lambo-icon-button :icon="'filter.png'" @click="showFilterPop"></lambo-icon-button>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
<div v-if="showFilter">
|
|
13
|
+
<filtrate-row :name="'降序'"></filtrate-row>
|
|
14
|
+
<filtrate-row :name="'筛选范围'"></filtrate-row>
|
|
15
|
+
</div>
|
|
16
|
+
<van-popup
|
|
17
|
+
ref="orderPopup"
|
|
18
|
+
v-model="orderPop"
|
|
19
|
+
position="bottom"
|
|
20
|
+
round
|
|
21
|
+
@close="closeOrderPop"
|
|
22
|
+
class="van-popup">
|
|
23
|
+
<template v-slot:default>
|
|
24
|
+
<van-checkbox-group class="popup-item" v-model="orderChecked" shape="square">
|
|
25
|
+
<div class="opt-btn" v-for="(item) in orderColumns" :key="item.K">
|
|
26
|
+
<van-checkbox :name="item.K">{{item.V}}</van-checkbox>
|
|
27
|
+
<van-radio-group v-model="item.type" direction="horizontal">
|
|
28
|
+
<van-radio name="asc">升序</van-radio>
|
|
29
|
+
<van-radio name="desc">降序</van-radio>
|
|
30
|
+
</van-radio-group>
|
|
31
|
+
</div>
|
|
32
|
+
</van-checkbox-group>
|
|
33
|
+
</template>
|
|
34
|
+
</van-popup>
|
|
35
|
+
<van-popup
|
|
36
|
+
ref="filterPopup"
|
|
37
|
+
v-model="filterPop"
|
|
38
|
+
position="bottom"
|
|
39
|
+
round
|
|
40
|
+
@close="closeFilterPop"
|
|
41
|
+
class="van-popup">
|
|
42
|
+
<div class="popup-item">
|
|
43
|
+
<slot name="filter" ></slot>
|
|
44
|
+
</div>
|
|
45
|
+
</van-popup>
|
|
46
|
+
</div>
|
|
47
|
+
</template>
|
|
48
|
+
<script>
|
|
49
|
+
import LamboIconButton from "@/components/lambo/btn/lambo-icon-button.vue";
|
|
50
|
+
import FiltrateRow from "@/components/lambo/card-item/filtrate-row.vue";
|
|
51
|
+
|
|
52
|
+
export default {
|
|
53
|
+
name: "LamboListFilter",
|
|
54
|
+
components: {
|
|
55
|
+
FiltrateRow,
|
|
56
|
+
LamboIconButton
|
|
57
|
+
},
|
|
58
|
+
props: {
|
|
59
|
+
showFilter: {
|
|
60
|
+
type: [Boolean, String],
|
|
61
|
+
default: true
|
|
62
|
+
},
|
|
63
|
+
orderColumns: {
|
|
64
|
+
type: Array,
|
|
65
|
+
default: () => ([
|
|
66
|
+
{
|
|
67
|
+
K: 'a',
|
|
68
|
+
V: '复选框 a'
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
K: 'b',
|
|
72
|
+
V: '复选框 b'
|
|
73
|
+
}
|
|
74
|
+
])
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
data() {
|
|
78
|
+
return {
|
|
79
|
+
orderPop: false,
|
|
80
|
+
filterPop: false,
|
|
81
|
+
orderChecked: [],
|
|
82
|
+
orderData: []
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
methods: {
|
|
86
|
+
showOrderPop() {
|
|
87
|
+
this.orderPop = true
|
|
88
|
+
},
|
|
89
|
+
showFilterPop() {
|
|
90
|
+
this.filterPop = true
|
|
91
|
+
},
|
|
92
|
+
closeOrderPop() {
|
|
93
|
+
this.orderData = []
|
|
94
|
+
this.orderChecked.forEach((key) => {
|
|
95
|
+
const order = this.orderColumns.find(item => item.K === key)
|
|
96
|
+
const data = {
|
|
97
|
+
K: order.K,
|
|
98
|
+
type: order.type
|
|
99
|
+
}
|
|
100
|
+
this.orderData.push(data)
|
|
101
|
+
})
|
|
102
|
+
this.$emit('order-on-ok', this.orderData)
|
|
103
|
+
},
|
|
104
|
+
closeFilterPop() {
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
</script>
|
|
109
|
+
<style scoped>
|
|
110
|
+
.opt-btn {
|
|
111
|
+
display: flex;
|
|
112
|
+
justify-content: space-between;
|
|
113
|
+
margin-bottom: 10px;
|
|
114
|
+
}
|
|
115
|
+
.popup-item {
|
|
116
|
+
margin-top: 20px;
|
|
117
|
+
padding: 0 15px;
|
|
118
|
+
}
|
|
119
|
+
.van-popup {
|
|
120
|
+
min-height: 25%;
|
|
121
|
+
height: auto;
|
|
122
|
+
}
|
|
123
|
+
</style>
|
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
.search-top-pop {
|
|
2
|
-
min-height: 145px;
|
|
3
|
-
max-height: 320px;
|
|
4
|
-
background-color: var(--scl-white-1)
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.search-body {
|
|
8
|
-
border-top: none;
|
|
9
|
-
min-height: 70px;
|
|
10
|
-
max-height: 245px;
|
|
11
|
-
overflow: auto;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.search-bottom-btn {
|
|
15
|
-
padding: 18px 14px 14px 14px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/*日期选择*/
|
|
20
|
-
.search-row {
|
|
21
|
-
display: flex;
|
|
22
|
-
flex-direction: row;
|
|
23
|
-
justify-content: flex-start;
|
|
24
|
-
flex-wrap: nowrap;
|
|
25
|
-
align-items: center;
|
|
26
|
-
align-content: center;
|
|
27
|
-
height: 70px;
|
|
28
|
-
padding: 18px 0;
|
|
29
|
-
margin: 0 14px;
|
|
30
|
-
border-bottom: 1px solid var(--scl-white-2);
|
|
31
|
-
border-top: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.search-input-title {
|
|
35
|
-
height: 16px;
|
|
36
|
-
font-size: 12px;
|
|
37
|
-
color: var(--scl-gray-2);
|
|
38
|
-
display: flex;
|
|
39
|
-
justify-content: flex-start;
|
|
40
|
-
align-items: center;
|
|
41
|
-
margin-left: 12px;
|
|
42
|
-
width: 76px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.search-lambo-input {
|
|
46
|
-
border: none;
|
|
47
|
-
outline: none;
|
|
48
|
-
background: none;
|
|
49
|
-
height: 16px;
|
|
50
|
-
font-size: 12px;
|
|
51
|
-
color: var(--scl-gray-1);
|
|
52
|
-
display: flex;
|
|
53
|
-
justify-content: flex-start;
|
|
54
|
-
align-items: center;
|
|
55
|
-
margin-left: 8px;
|
|
56
|
-
flex: 1;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
/*输入框*/
|
|
61
|
-
|
|
62
|
-
.search-lambo-input .van-cell {
|
|
63
|
-
padding: 10px 0;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
/*多选*/
|
|
68
|
-
|
|
69
|
-
.search-top-div {
|
|
70
|
-
display: flex;
|
|
71
|
-
justify-content: space-between;
|
|
72
|
-
height: 44px;
|
|
73
|
-
line-height: 44px;
|
|
74
|
-
width: 100%;
|
|
75
|
-
position: fixed;
|
|
76
|
-
z-index: 300;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.search-cancel-btn {
|
|
80
|
-
border: none;
|
|
81
|
-
color: var(--scl-gray-3);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.search-confirm-btn {
|
|
85
|
-
border: none;
|
|
86
|
-
color: var(--scl-blue);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.search-select-title {
|
|
90
|
-
font-size: 16px;
|
|
91
|
-
font-weight: bold;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/*修改单选多选的滚动条样式*/
|
|
95
|
-
/deep/ .van-radio-group {
|
|
96
|
-
position: relative;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/*修改单选多选的滚动条样式*/
|
|
100
|
-
/deep/ .van-cell-group {
|
|
101
|
-
padding-top: 44px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/*修改单选多选的滚动条样式*/
|
|
105
|
-
/deep/ .van-cell:first-child {
|
|
106
|
-
padding-top: 10px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
/*滚动条样式*/
|
|
111
|
-
/deep/ ::-webkit-scrollbar {
|
|
112
|
-
width: 6px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/*滚动条样式*/
|
|
116
|
-
/deep/ ::-webkit-scrollbar-thumb {
|
|
117
|
-
border-radius: var(--ind-border-radius-xl);
|
|
118
|
-
background: rgba(45, 140, 240, 0.6);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/*滚动条样式*/
|
|
122
|
-
/deep/ ::-webkit-scrollbar-track {
|
|
123
|
-
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
124
|
-
border-radius: var(--ind-border-radius-xl);
|
|
125
|
-
background: rgba(231, 242, 250, 0.4);
|
|
1
|
+
.search-top-pop {
|
|
2
|
+
min-height: 145px;
|
|
3
|
+
max-height: 320px;
|
|
4
|
+
background-color: var(--scl-white-1)
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.search-body {
|
|
8
|
+
border-top: none;
|
|
9
|
+
min-height: 70px;
|
|
10
|
+
max-height: 245px;
|
|
11
|
+
overflow: auto;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.search-bottom-btn {
|
|
15
|
+
padding: 18px 14px 14px 14px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
/*日期选择*/
|
|
20
|
+
.search-row {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: row;
|
|
23
|
+
justify-content: flex-start;
|
|
24
|
+
flex-wrap: nowrap;
|
|
25
|
+
align-items: center;
|
|
26
|
+
align-content: center;
|
|
27
|
+
height: 70px;
|
|
28
|
+
padding: 18px 0;
|
|
29
|
+
margin: 0 14px;
|
|
30
|
+
border-bottom: 1px solid var(--scl-white-2);
|
|
31
|
+
border-top: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.search-input-title {
|
|
35
|
+
height: 16px;
|
|
36
|
+
font-size: 12px;
|
|
37
|
+
color: var(--scl-gray-2);
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: flex-start;
|
|
40
|
+
align-items: center;
|
|
41
|
+
margin-left: 12px;
|
|
42
|
+
width: 76px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.search-lambo-input {
|
|
46
|
+
border: none;
|
|
47
|
+
outline: none;
|
|
48
|
+
background: none;
|
|
49
|
+
height: 16px;
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
color: var(--scl-gray-1);
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: flex-start;
|
|
54
|
+
align-items: center;
|
|
55
|
+
margin-left: 8px;
|
|
56
|
+
flex: 1;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
/*输入框*/
|
|
61
|
+
|
|
62
|
+
.search-lambo-input .van-cell {
|
|
63
|
+
padding: 10px 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
/*多选*/
|
|
68
|
+
|
|
69
|
+
.search-top-div {
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
height: 44px;
|
|
73
|
+
line-height: 44px;
|
|
74
|
+
width: 100%;
|
|
75
|
+
position: fixed;
|
|
76
|
+
z-index: 300;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.search-cancel-btn {
|
|
80
|
+
border: none;
|
|
81
|
+
color: var(--scl-gray-3);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.search-confirm-btn {
|
|
85
|
+
border: none;
|
|
86
|
+
color: var(--scl-blue);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.search-select-title {
|
|
90
|
+
font-size: 16px;
|
|
91
|
+
font-weight: bold;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/*修改单选多选的滚动条样式*/
|
|
95
|
+
/deep/ .van-radio-group {
|
|
96
|
+
position: relative;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/*修改单选多选的滚动条样式*/
|
|
100
|
+
/deep/ .van-cell-group {
|
|
101
|
+
padding-top: 44px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/*修改单选多选的滚动条样式*/
|
|
105
|
+
/deep/ .van-cell:first-child {
|
|
106
|
+
padding-top: 10px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
/*滚动条样式*/
|
|
111
|
+
/deep/ ::-webkit-scrollbar {
|
|
112
|
+
width: 6px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/*滚动条样式*/
|
|
116
|
+
/deep/ ::-webkit-scrollbar-thumb {
|
|
117
|
+
border-radius: var(--ind-border-radius-xl);
|
|
118
|
+
background: rgba(45, 140, 240, 0.6);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/*滚动条样式*/
|
|
122
|
+
/deep/ ::-webkit-scrollbar-track {
|
|
123
|
+
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
124
|
+
border-radius: var(--ind-border-radius-xl);
|
|
125
|
+
background: rgba(231, 242, 250, 0.4);
|
|
126
126
|
}
|
package/util/assist.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
// 深拷贝
|
|
2
|
-
export function deepCopy(data) {
|
|
3
|
-
let i;
|
|
4
|
-
const t = typeOf(data);
|
|
5
|
-
let o;
|
|
6
|
-
|
|
7
|
-
if (t === 'array') {
|
|
8
|
-
o = [];
|
|
9
|
-
} else if (t === 'object') {
|
|
10
|
-
o = {};
|
|
11
|
-
} else {
|
|
12
|
-
return data;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
if (t === 'array') {
|
|
16
|
-
for (i = 0; i < data.length; i++) {
|
|
17
|
-
o.push(deepCopy(data[i]));
|
|
18
|
-
}
|
|
19
|
-
} else if (t === 'object') {
|
|
20
|
-
for (i in data) {
|
|
21
|
-
o[i] = deepCopy(data[i]);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return o;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// 判断对象类型
|
|
28
|
-
export function typeOf(obj) {
|
|
29
|
-
const toString = Object.prototype.toString;
|
|
30
|
-
const map = {
|
|
31
|
-
'[object Boolean]': 'boolean',
|
|
32
|
-
'[object Number]': 'number',
|
|
33
|
-
'[object String]': 'string',
|
|
34
|
-
'[object Function]': 'function',
|
|
35
|
-
'[object Array]': 'array',
|
|
36
|
-
'[object Date]': 'date',
|
|
37
|
-
'[object RegExp]': 'regExp',
|
|
38
|
-
'[object Undefined]': 'undefined',
|
|
39
|
-
'[object Null]': 'null',
|
|
40
|
-
'[object Object]': 'object'
|
|
41
|
-
};
|
|
42
|
-
return map[toString.call(obj)];
|
|
43
|
-
}
|
|
1
|
+
// 深拷贝
|
|
2
|
+
export function deepCopy(data) {
|
|
3
|
+
let i;
|
|
4
|
+
const t = typeOf(data);
|
|
5
|
+
let o;
|
|
6
|
+
|
|
7
|
+
if (t === 'array') {
|
|
8
|
+
o = [];
|
|
9
|
+
} else if (t === 'object') {
|
|
10
|
+
o = {};
|
|
11
|
+
} else {
|
|
12
|
+
return data;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (t === 'array') {
|
|
16
|
+
for (i = 0; i < data.length; i++) {
|
|
17
|
+
o.push(deepCopy(data[i]));
|
|
18
|
+
}
|
|
19
|
+
} else if (t === 'object') {
|
|
20
|
+
for (i in data) {
|
|
21
|
+
o[i] = deepCopy(data[i]);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return o;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// 判断对象类型
|
|
28
|
+
export function typeOf(obj) {
|
|
29
|
+
const toString = Object.prototype.toString;
|
|
30
|
+
const map = {
|
|
31
|
+
'[object Boolean]': 'boolean',
|
|
32
|
+
'[object Number]': 'number',
|
|
33
|
+
'[object String]': 'string',
|
|
34
|
+
'[object Function]': 'function',
|
|
35
|
+
'[object Array]': 'array',
|
|
36
|
+
'[object Date]': 'date',
|
|
37
|
+
'[object RegExp]': 'regExp',
|
|
38
|
+
'[object Undefined]': 'undefined',
|
|
39
|
+
'[object Null]': 'null',
|
|
40
|
+
'[object Object]': 'object'
|
|
41
|
+
};
|
|
42
|
+
return map[toString.call(obj)];
|
|
43
|
+
}
|
package/util/bus.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import Vue from 'vue'
|
|
2
|
-
|
|
3
|
-
const Bus = new Vue();
|
|
4
|
-
export default Bus;
|
|
1
|
+
import Vue from 'vue'
|
|
2
|
+
|
|
3
|
+
const Bus = new Vue();
|
|
4
|
+
export default Bus;
|