mali-applet-ui 0.0.21 → 0.0.22
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/components/ml-amount-input/ml-amount-input.vue +1 -0
- package/components/ml-button/ml-button.vue +6 -5
- package/components/ml-icon/ml-icon.vue +3 -2
- package/components/ml-input/ml-input.vue +47 -6
- package/components/ml-number-input/ml-number-input.vue +1 -0
- package/components/ml-radio-button/ml-radio-button.vue +40 -0
- package/components/ml-table/ml-table.vue +7 -22
- package/components/ml-tabs/ml-tabs.vue +37 -0
- package/components/ml-textarea/ml-textarea.vue +1 -0
- package/package.json +1 -1
|
@@ -29,21 +29,22 @@ export default {
|
|
|
29
29
|
|
|
30
30
|
<style lang="scss">
|
|
31
31
|
.ml-button {
|
|
32
|
-
|
|
32
|
+
width: 100%;
|
|
33
33
|
&.type-button {
|
|
34
34
|
line-height: 80rpx;
|
|
35
35
|
border: 1px solid #e5e5e5;
|
|
36
|
+
border-radius: 10rpx;
|
|
36
37
|
}
|
|
37
38
|
&.is-round {
|
|
38
39
|
border-radius: 40rpx;
|
|
39
40
|
}
|
|
40
41
|
&.status-primary {
|
|
41
42
|
color: #ffffff;
|
|
42
|
-
background:
|
|
43
|
+
background: $uni-color-primary;
|
|
43
44
|
}
|
|
44
45
|
&.status-success {
|
|
45
46
|
color: #ffffff;
|
|
46
|
-
background:
|
|
47
|
+
background: $uni-color-success;
|
|
47
48
|
}
|
|
48
49
|
&.status-info {
|
|
49
50
|
color: #ffffff;
|
|
@@ -51,11 +52,11 @@ export default {
|
|
|
51
52
|
}
|
|
52
53
|
&.status-warning {
|
|
53
54
|
color: #ffffff;
|
|
54
|
-
background:
|
|
55
|
+
background: $uni-color-warning;
|
|
55
56
|
}
|
|
56
57
|
&.status-danger {
|
|
57
58
|
color: #ffffff;
|
|
58
|
-
background:
|
|
59
|
+
background: $uni-color-error;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
</style>
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<text class="ml-icon" :class="[`${prefix}${name}`]" @click="clickEvent"></text>
|
|
2
|
+
<text class="ml-icon" :class="[name ? `${prefix}${name}` : '', className]" @click="clickEvent"></text>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
6
6
|
export default {
|
|
7
7
|
name: 'ml-icon',
|
|
8
8
|
props: {
|
|
9
|
-
name: String
|
|
9
|
+
name: String,
|
|
10
|
+
className: String
|
|
10
11
|
},
|
|
11
12
|
data () {
|
|
12
13
|
return {
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-input" :class="{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled}">
|
|
2
|
+
<view class="ml-input" :class="{'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}">
|
|
3
|
+
<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
|
|
4
|
+
<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
|
|
5
|
+
<ml-icon v-else name="search"></ml-icon>
|
|
6
|
+
</view>
|
|
3
7
|
<input
|
|
4
8
|
v-model="inpVal"
|
|
5
9
|
type="text"
|
|
6
|
-
class="input-inp"
|
|
10
|
+
class="ml-input-inp"
|
|
7
11
|
:placeholder="placeholder"
|
|
8
12
|
@input="inputEvent" />
|
|
13
|
+
<view v-if="suffixIcon" class="ml-input-suffix-icon">
|
|
14
|
+
<ml-icon :className="suffixIcon"></ml-icon>
|
|
15
|
+
</view>
|
|
9
16
|
</view>
|
|
10
17
|
</template>
|
|
11
18
|
|
|
@@ -14,9 +21,12 @@ export default {
|
|
|
14
21
|
name: 'ml-input',
|
|
15
22
|
props: {
|
|
16
23
|
value: [Number, String],
|
|
24
|
+
type: String,
|
|
17
25
|
align: String,
|
|
18
26
|
border: Boolean,
|
|
19
27
|
disabled: Boolean,
|
|
28
|
+
prefixIcon: String,
|
|
29
|
+
suffixIcon: String,
|
|
20
30
|
placeholder: {
|
|
21
31
|
type: String,
|
|
22
32
|
default: '请输入'
|
|
@@ -47,19 +57,50 @@ export default {
|
|
|
47
57
|
|
|
48
58
|
<style lang="scss">
|
|
49
59
|
.ml-input {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: row;
|
|
50
62
|
font-size: $uni-font-size-base;
|
|
51
|
-
.input-inp {
|
|
52
|
-
padding: 0
|
|
63
|
+
.ml-input-inp {
|
|
64
|
+
padding: 0 20rpx;
|
|
53
65
|
height: 70rpx;
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
.ml-input-prefix-icon,
|
|
69
|
+
.ml-input-suffix-icon {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
align-items: center;
|
|
73
|
+
border: 1px solid #e5e5e5;
|
|
74
|
+
}
|
|
75
|
+
.ml-input-prefix-icon {
|
|
76
|
+
padding-left: 20rpx;
|
|
77
|
+
border-right: 0;
|
|
78
|
+
}
|
|
79
|
+
.ml-input-suffix-icon {
|
|
80
|
+
padding-right: 20rpx;
|
|
81
|
+
border-left: 0;
|
|
54
82
|
}
|
|
55
83
|
&.is-right {
|
|
56
|
-
.input-inp {
|
|
84
|
+
.ml-input-inp {
|
|
57
85
|
text-align: right;
|
|
58
86
|
}
|
|
59
87
|
}
|
|
88
|
+
&.is-prefix,
|
|
89
|
+
&.is-suffix,
|
|
60
90
|
&.is-border {
|
|
61
|
-
.input-inp {
|
|
91
|
+
.ml-input-inp {
|
|
62
92
|
border: 1px solid #e5e5e5;
|
|
93
|
+
border-radius: 10rpx;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
&.is-prefix {
|
|
97
|
+
.ml-input-inp {
|
|
98
|
+
border-left: 0;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
&.is-suffix {
|
|
102
|
+
.ml-input-inp {
|
|
103
|
+
border-right: 0;
|
|
63
104
|
}
|
|
64
105
|
}
|
|
65
106
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-radio-button" :class="{'is-disabled': disabled}">
|
|
3
|
+
<view class="ml-radio-button-item" v-for="(item, index) in options" :class="{'is-active': value === item.value}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
|
|
4
|
+
</view>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
name: 'MlRadioButton',
|
|
10
|
+
props: {
|
|
11
|
+
value: [Boolean, Number, String],
|
|
12
|
+
options: Array,
|
|
13
|
+
disabled: Boolean
|
|
14
|
+
},
|
|
15
|
+
methods: {
|
|
16
|
+
changeEvent (item) {
|
|
17
|
+
const value = item.value
|
|
18
|
+
this.$emit('input', value)
|
|
19
|
+
this.$emit('change', { value })
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<style lang="scss">
|
|
26
|
+
.ml-radio-button {
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
border: 1px solid $uni-color-primary;
|
|
29
|
+
border-right: 0;
|
|
30
|
+
color: $uni-color-primary;
|
|
31
|
+
.ml-radio-button-item {
|
|
32
|
+
border-right: 1px solid $uni-color-primary;
|
|
33
|
+
padding: 8rpx 24rpx;
|
|
34
|
+
&.is-active {
|
|
35
|
+
color: #ffffff;
|
|
36
|
+
background-color: $uni-color-primary;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
@@ -247,16 +247,16 @@ export default {
|
|
|
247
247
|
|
|
248
248
|
.table-th {
|
|
249
249
|
display: inline-block;
|
|
250
|
-
height:
|
|
251
|
-
line-height:
|
|
250
|
+
height: 70rpx;
|
|
251
|
+
line-height: 70rpx;
|
|
252
252
|
color: #000000;
|
|
253
253
|
text-align: center;
|
|
254
254
|
overflow: hidden;
|
|
255
255
|
text-overflow: ellipsis;
|
|
256
256
|
white-space: nowrap;
|
|
257
|
-
|
|
258
|
-
background:
|
|
259
|
-
border-bottom: 1rpx solid rgba(
|
|
257
|
+
color: #fff;
|
|
258
|
+
background: $uni-color-primary;
|
|
259
|
+
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
260
260
|
box-sizing: border-box;
|
|
261
261
|
&.is-sort {
|
|
262
262
|
.th-title {
|
|
@@ -270,21 +270,6 @@ export default {
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
.table-body {
|
|
274
|
-
// .table-tr:nth-child(even) {
|
|
275
|
-
// background-color: #364775;
|
|
276
|
-
// display: inline-block;
|
|
277
|
-
// color: #FFFFFF;
|
|
278
|
-
// text-align: center;
|
|
279
|
-
// overflow: hidden;
|
|
280
|
-
// text-overflow: ellipsis;
|
|
281
|
-
// white-space: nowrap;
|
|
282
|
-
// }
|
|
283
|
-
// background-color: #999999;
|
|
284
|
-
// box-shadow: 0rpx 0rpx 10rpx -3rpx rgba(0, 0, 0, 0.2);
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
|
|
288
273
|
.table-tr {
|
|
289
274
|
display: block;
|
|
290
275
|
white-space: nowrap;
|
|
@@ -312,10 +297,10 @@ export default {
|
|
|
312
297
|
|
|
313
298
|
.table-td {
|
|
314
299
|
display: inline-block;
|
|
315
|
-
padding:
|
|
300
|
+
padding: 20rpx 10rpx;
|
|
316
301
|
text-align: center;
|
|
317
302
|
color: rgba(39, 42, 48, 0.65);
|
|
318
|
-
border-bottom: 1rpx solid rgba(
|
|
303
|
+
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
319
304
|
box-sizing: border-box;
|
|
320
305
|
}
|
|
321
306
|
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-tabs">
|
|
3
|
+
<scroll-view class="ml-tabs-navs">
|
|
4
|
+
<view class="ml-tabs-nav-item" v-for="(item, index) in options" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
|
|
5
|
+
</scroll-view>
|
|
6
|
+
</view>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
props: {
|
|
12
|
+
value: [String, Number],
|
|
13
|
+
options: Array
|
|
14
|
+
},
|
|
15
|
+
data () {
|
|
16
|
+
return {}
|
|
17
|
+
},
|
|
18
|
+
methods: {
|
|
19
|
+
changeEvent (item) {
|
|
20
|
+
const value = item.value
|
|
21
|
+
this.$emit('input', value)
|
|
22
|
+
this.$emit('change', { value })
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<style lang="scss">
|
|
29
|
+
.ml-tabs {
|
|
30
|
+
.ml-tabs-navs {
|
|
31
|
+
display: flex;
|
|
32
|
+
}
|
|
33
|
+
.ml-tabs-nav-item {
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</style>
|