mali-applet-ui 0.0.37 → 0.0.38
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-button/ml-button.vue +13 -0
- package/components/ml-chunk-item/ml-chunk-item.vue +1 -1
- package/components/ml-col/ml-col.vue +15 -1
- package/components/ml-input/ml-input.vue +8 -2
- package/components/ml-select-picker/ml-select-picker.vue +21 -18
- package/components/ml-status-tag/ml-status-tag.vue +52 -0
- package/package.json +1 -1
|
@@ -18,10 +18,23 @@ export default {
|
|
|
18
18
|
type: String,
|
|
19
19
|
default: 'button'
|
|
20
20
|
},
|
|
21
|
+
redirect: Boolean,
|
|
22
|
+
url: String,
|
|
21
23
|
className: String
|
|
22
24
|
},
|
|
23
25
|
methods: {
|
|
24
26
|
tapEvent () {
|
|
27
|
+
if (this.url) {
|
|
28
|
+
if (this.redirect) {
|
|
29
|
+
uni.redirectTo({
|
|
30
|
+
url: this.url
|
|
31
|
+
})
|
|
32
|
+
} else {
|
|
33
|
+
uni.navigateTo({
|
|
34
|
+
url: this.url
|
|
35
|
+
})
|
|
36
|
+
}
|
|
37
|
+
}
|
|
25
38
|
this.$emit('tap', {})
|
|
26
39
|
},
|
|
27
40
|
clickEvent () {
|
|
@@ -45,7 +45,7 @@ export default {
|
|
|
45
45
|
.ml-chunk-item {
|
|
46
46
|
display: flex;
|
|
47
47
|
flex-direction: column;
|
|
48
|
-
padding: 10rpx;
|
|
48
|
+
padding: 20rpx 10rpx;
|
|
49
49
|
line-height: 50rpx;
|
|
50
50
|
$spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
|
|
51
51
|
37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width || shrink}]" :style="styles">
|
|
2
|
+
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-flex': flex,'is-fixed': width || shrink}]" :style="styles">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</view>
|
|
5
5
|
</template>
|
|
@@ -12,6 +12,7 @@ export default {
|
|
|
12
12
|
},
|
|
13
13
|
props: {
|
|
14
14
|
span: [String, Number],
|
|
15
|
+
flex: Boolean,
|
|
15
16
|
shrink: Boolean,
|
|
16
17
|
align: String,
|
|
17
18
|
width: String,
|
|
@@ -30,6 +31,19 @@ export default {
|
|
|
30
31
|
$spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
|
|
31
32
|
37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
|
|
32
33
|
70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
|
|
34
|
+
&.is-flex {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: row;
|
|
37
|
+
&.align-left {
|
|
38
|
+
justify-content: left;
|
|
39
|
+
}
|
|
40
|
+
&.align-center {
|
|
41
|
+
justify-content: center;
|
|
42
|
+
}
|
|
43
|
+
&.align-right {
|
|
44
|
+
justify-content: right;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
33
47
|
&.align-left {
|
|
34
48
|
text-align: left;
|
|
35
49
|
}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
class="ml-input-inp"
|
|
11
11
|
autocomplete="off"
|
|
12
12
|
:placeholder="placeholder"
|
|
13
|
-
@input="inputEvent"
|
|
13
|
+
@input="inputEvent"
|
|
14
|
+
@confirm="confirmEvent"/>
|
|
14
15
|
<view v-if="suffixIcon" class="ml-input-suffix-icon">
|
|
15
16
|
<ml-icon :class="suffixIcon"></ml-icon>
|
|
16
17
|
</view>
|
|
@@ -55,6 +56,10 @@ export default {
|
|
|
55
56
|
const value = this.inpVal
|
|
56
57
|
this.$emit('input', value)
|
|
57
58
|
this.$emit('change', { value })
|
|
59
|
+
},
|
|
60
|
+
confirmEvent () {
|
|
61
|
+
const value = this.inpVal
|
|
62
|
+
this.$emit('confirm', { value })
|
|
58
63
|
}
|
|
59
64
|
}
|
|
60
65
|
}
|
|
@@ -64,11 +69,11 @@ export default {
|
|
|
64
69
|
.ml-input {
|
|
65
70
|
display: flex;
|
|
66
71
|
flex-direction: row;
|
|
67
|
-
font-size: $uni-font-size-base;
|
|
68
72
|
.ml-input-inp {
|
|
69
73
|
padding: 0 20rpx;
|
|
70
74
|
height: 70rpx;
|
|
71
75
|
width: 100%;
|
|
76
|
+
font-size: $uni-font-size-base;
|
|
72
77
|
}
|
|
73
78
|
.ml-input-prefix-icon,
|
|
74
79
|
.ml-input-suffix-icon {
|
|
@@ -76,6 +81,7 @@ export default {
|
|
|
76
81
|
flex-shrink: 0;
|
|
77
82
|
align-items: center;
|
|
78
83
|
border: 1px solid #e5e5e5;
|
|
84
|
+
font-size: 30rpx;
|
|
79
85
|
}
|
|
80
86
|
.ml-input-prefix-icon {
|
|
81
87
|
padding-left: 20rpx;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<picker class="ml-select-picker" :class="[className || '', {'is-border': border}]" :range="optionList" :range-key="optLabelField" @change="changeEvent">
|
|
3
|
-
<view class="picker-warpper" :style="{width: width || '160rpx'}">
|
|
4
|
-
<view class="picker-text">
|
|
3
|
+
<view class="ml-select-picker-warpper" :style="{width: width || '160rpx'}">
|
|
4
|
+
<view class="ml-select-picker-text">
|
|
5
5
|
<text v-if="value !== null">{{ selectName }}</text>
|
|
6
6
|
<text v-else class="picker-placeholder">{{ placeholder }}</text>
|
|
7
7
|
</view>
|
|
8
|
-
<
|
|
8
|
+
<view class="ml-select-picker-icon">
|
|
9
|
+
<ml-icon name="arrow-down" />
|
|
10
|
+
</view>
|
|
9
11
|
</view>
|
|
10
12
|
</picker>
|
|
11
13
|
</template>
|
|
@@ -91,20 +93,21 @@ export default {
|
|
|
91
93
|
&.is-border {
|
|
92
94
|
border: 1px solid #e5e5e5;
|
|
93
95
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
96
|
+
}
|
|
97
|
+
.ml-select-picker-warpper {
|
|
98
|
+
position: relative;
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
align-items: center;
|
|
102
|
+
}
|
|
103
|
+
.ml-select-picker-text {
|
|
104
|
+
flex-grow: 1;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
text-overflow: ellipsis;
|
|
107
|
+
white-space: nowrap;
|
|
108
|
+
}
|
|
109
|
+
.ml-select-picker-icon {
|
|
110
|
+
display: inline;
|
|
111
|
+
color: #6a6a6a;
|
|
109
112
|
}
|
|
110
113
|
</style>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-status-tag" :class="[className, status ? `status-${status}` : '']" :style="styles">
|
|
3
|
+
<slot>
|
|
4
|
+
<text>{{ content }}</text>
|
|
5
|
+
</slot>
|
|
6
|
+
</view>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
name: 'MlStatusTag',
|
|
12
|
+
options: {
|
|
13
|
+
virtualHost: true
|
|
14
|
+
},
|
|
15
|
+
props: {
|
|
16
|
+
color: String,
|
|
17
|
+
content: String,
|
|
18
|
+
status: String,
|
|
19
|
+
className: String
|
|
20
|
+
},
|
|
21
|
+
computed: {
|
|
22
|
+
styles () {
|
|
23
|
+
return this.color ? `background:${this.color};` : ''
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<style lang="scss">
|
|
30
|
+
.ml-status-tag {
|
|
31
|
+
display: inline-block;
|
|
32
|
+
color: #ffffff;
|
|
33
|
+
padding: 6rpx 18rpx;
|
|
34
|
+
border-radius: 10rpx;
|
|
35
|
+
font-size: 24rpx;
|
|
36
|
+
&.status-primary {
|
|
37
|
+
background: $uni-color-primary;
|
|
38
|
+
}
|
|
39
|
+
&.status-success {
|
|
40
|
+
background: $uni-color-success;
|
|
41
|
+
}
|
|
42
|
+
&.status-info {
|
|
43
|
+
background: #909399;
|
|
44
|
+
}
|
|
45
|
+
&.status-warning {
|
|
46
|
+
background: $uni-color-warning;
|
|
47
|
+
}
|
|
48
|
+
&.status-danger {
|
|
49
|
+
background: $uni-color-error;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</style>
|