mali-applet-ui 0.0.36 → 0.0.37
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-approval-type/ml-approval-type.vue +50 -0
- package/components/ml-checkbox/ml-checkbox.vue +5 -3
- package/components/ml-chunk-group/ml-chunk-group.vue +1 -1
- package/components/ml-chunk-item/ml-chunk-item.vue +9 -1
- package/components/ml-col/ml-col.vue +2 -1
- package/components/ml-list-group/ml-list-group.vue +32 -0
- package/components/ml-list-item/ml-list-item.vue +88 -0
- package/components/ml-radio/ml-radio.vue +5 -3
- package/components/ml-row/ml-row.vue +1 -0
- package/components/ml-switch/ml-switch.vue +27 -0
- package/components/ml-tab-pane/ml-tab-pane.vue +35 -0
- package/components/ml-tabs/ml-tabs.vue +35 -11
- package/package.json +1 -1
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-approval-type" :class="className" :style="styles">{{ currLabel }}</view>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
name: 'MlApprovalType',
|
|
8
|
+
options: {
|
|
9
|
+
virtualHost: true
|
|
10
|
+
},
|
|
11
|
+
props: {
|
|
12
|
+
value: [String, Number],
|
|
13
|
+
className: String
|
|
14
|
+
},
|
|
15
|
+
data () {
|
|
16
|
+
return {
|
|
17
|
+
statusList: [
|
|
18
|
+
{ value: 0, label: '起草中', color: '' },
|
|
19
|
+
{ value: 1, label: '审批中', color: '#09B2FE' },
|
|
20
|
+
{ value: 2, label: '已通过', color: '#42E38D' },
|
|
21
|
+
{ value: 3, label: '已驳回', color: '#FF4A4A' },
|
|
22
|
+
{ value: 4, label: '会签中', color: '#F4788E' },
|
|
23
|
+
{ value: 5, label: '处理中', color: '#FFA500' },
|
|
24
|
+
{ value: 6, label: '已完成', color: '#2497FF' }
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
computed: {
|
|
29
|
+
selectItem () {
|
|
30
|
+
return this.statusList.find(item => String(item.value) === String(this.value))
|
|
31
|
+
},
|
|
32
|
+
currLabel () {
|
|
33
|
+
return this.selectItem ? this.selectItem.label : ''
|
|
34
|
+
},
|
|
35
|
+
styles () {
|
|
36
|
+
return this.selectItem && this.selectItem.color? `background:${this.selectItem.color};` : ''
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<style lang="scss">
|
|
43
|
+
.ml-approval-type {
|
|
44
|
+
display: inline-block;
|
|
45
|
+
color: #ffffff;
|
|
46
|
+
padding: 6rpx 18rpx;
|
|
47
|
+
border-radius: 10rpx;
|
|
48
|
+
font-size: 24rpx;
|
|
49
|
+
}
|
|
50
|
+
</style>
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="ml-checkbox" :class="[className || '', {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
|
|
3
|
-
<
|
|
4
|
-
|
|
3
|
+
<text class="ml-checkbox-icon">
|
|
4
|
+
<ml-icon :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
|
|
5
|
+
</text>
|
|
6
|
+
<text class="ml-checkbox-content">
|
|
5
7
|
<slot>
|
|
6
8
|
<text>{{ content }}</text>
|
|
7
9
|
</slot>
|
|
@@ -56,7 +58,7 @@ export default {
|
|
|
56
58
|
&.is-checked {
|
|
57
59
|
color: $uni-color-primary;
|
|
58
60
|
}
|
|
59
|
-
.checkbox-icon {
|
|
61
|
+
.ml-checkbox-icon {
|
|
60
62
|
display: inline-block;
|
|
61
63
|
width: 40rpx;
|
|
62
64
|
margin-right: 5rpx;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles">
|
|
2
|
+
<view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles" @click="clickEvent" @tap="tapEvent">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</view>
|
|
5
5
|
</template>
|
|
@@ -29,6 +29,14 @@ export default {
|
|
|
29
29
|
styles () {
|
|
30
30
|
return this.width ? `width: ${this.width};` : ''
|
|
31
31
|
}
|
|
32
|
+
},
|
|
33
|
+
methods: {
|
|
34
|
+
clickEvent () {
|
|
35
|
+
this.$emit('click', {})
|
|
36
|
+
},
|
|
37
|
+
tapEvent () {
|
|
38
|
+
this.$emit('tap', {})
|
|
39
|
+
}
|
|
32
40
|
}
|
|
33
41
|
}
|
|
34
42
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '',
|
|
2
|
+
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'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
|
+
shrink: Boolean,
|
|
15
16
|
align: String,
|
|
16
17
|
width: String,
|
|
17
18
|
className: String
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-list-group" :class="className">
|
|
3
|
+
<view class="ml-list-group-content">
|
|
4
|
+
<scroll-view scroll-y>
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</scroll-view>
|
|
7
|
+
</view>
|
|
8
|
+
</view>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: 'MlListGroup',
|
|
14
|
+
options: {
|
|
15
|
+
virtualHost: true
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
title: String,
|
|
19
|
+
className: String
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style lang="scss">
|
|
25
|
+
.ml-list-group {
|
|
26
|
+
padding: 0 10rpx;
|
|
27
|
+
.ml-list-group-content {
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-list-item" :class="className" @click="clickEvent" @tap="tapEvent">
|
|
3
|
+
<view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-item-left-icon">
|
|
4
|
+
<ml-icon :className="prefixIcon"></ml-icon>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-list-item-content">
|
|
7
|
+
<slot>
|
|
8
|
+
<text>{{ name }}</text>
|
|
9
|
+
</slot>
|
|
10
|
+
</view>
|
|
11
|
+
<view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-list-item-right-icon">
|
|
12
|
+
<ml-icon :className="suffixIcon"></ml-icon>
|
|
13
|
+
</view>
|
|
14
|
+
</view>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
export default {
|
|
19
|
+
name: 'MlListItem',
|
|
20
|
+
options: {
|
|
21
|
+
virtualHost: true
|
|
22
|
+
},
|
|
23
|
+
props: {
|
|
24
|
+
name: String,
|
|
25
|
+
prefixIcon: String,
|
|
26
|
+
suffixIcon: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: 'mlicon-arrow-right'
|
|
29
|
+
},
|
|
30
|
+
url: String,
|
|
31
|
+
redirect: Boolean,
|
|
32
|
+
className: String
|
|
33
|
+
},
|
|
34
|
+
methods: {
|
|
35
|
+
clickEvent () {
|
|
36
|
+
this.$emit('click', {})
|
|
37
|
+
},
|
|
38
|
+
tapEvent () {
|
|
39
|
+
if (this.url) {
|
|
40
|
+
if (this.redirect) {
|
|
41
|
+
uni.redirectTo({
|
|
42
|
+
url: this.url
|
|
43
|
+
})
|
|
44
|
+
} else {
|
|
45
|
+
uni.navigateTo({
|
|
46
|
+
url: this.url
|
|
47
|
+
})
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
this.$emit('tap', {})
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
<style lang="scss">
|
|
58
|
+
.ml-list-item {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: row;
|
|
61
|
+
padding: 20rpx;
|
|
62
|
+
margin: 10rpx 0;
|
|
63
|
+
border-radius: 10rpx;
|
|
64
|
+
background: #ffffff;
|
|
65
|
+
.ml-list-item-content {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
flex-grow: 1;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
text-overflow: ellipsis;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
}
|
|
73
|
+
.ml-list-item-left-icon,
|
|
74
|
+
.ml-list-item-right-icon {
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: row;
|
|
77
|
+
align-items: center;
|
|
78
|
+
flex-shrink: 0;
|
|
79
|
+
padding: 0 10rpx;
|
|
80
|
+
}
|
|
81
|
+
.ml-list-item-left-icon {
|
|
82
|
+
font-size: 38rpx;
|
|
83
|
+
}
|
|
84
|
+
.ml-list-item-right-icon {
|
|
85
|
+
font-size: 30rpx;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
</style>
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="ml-radio" :class="[className || '', {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
|
|
3
|
-
<
|
|
4
|
-
|
|
3
|
+
<text class="ml-radio-icon">
|
|
4
|
+
<ml-icon :name="checked ? 'radio-checked' : 'radio-unchecked'"></ml-icon>
|
|
5
|
+
</text>
|
|
6
|
+
<text class="ml-radio-content">
|
|
5
7
|
<slot>
|
|
6
8
|
<text>{{ content }}</text>
|
|
7
9
|
</slot>
|
|
@@ -47,7 +49,7 @@ export default {
|
|
|
47
49
|
&.is-checked {
|
|
48
50
|
color: $uni-color-primary;
|
|
49
51
|
}
|
|
50
|
-
.radio-icon {
|
|
52
|
+
.ml-radio-icon {
|
|
51
53
|
font-size: 1.1em;
|
|
52
54
|
margin-right: 10rpx;
|
|
53
55
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<switch class="ml-switch" :class="className" :checked="value" :color="color" @change="changeEvent"></switch>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
name: 'MlSwitch',
|
|
8
|
+
options: {
|
|
9
|
+
virtualHost: true
|
|
10
|
+
},
|
|
11
|
+
props: {
|
|
12
|
+
value: Boolean,
|
|
13
|
+
color: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: '#007aff'
|
|
16
|
+
},
|
|
17
|
+
className: String
|
|
18
|
+
},
|
|
19
|
+
methods: {
|
|
20
|
+
changeEvent (e) {
|
|
21
|
+
const value = e.detail.value
|
|
22
|
+
this.$emit('input', value)
|
|
23
|
+
this.$emit('change', { value })
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view v-if="selectTab === name" class="ml-tab-pane" :class="className">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</view>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
name: 'MlTabPane',
|
|
10
|
+
options: {
|
|
11
|
+
virtualHost: true
|
|
12
|
+
},
|
|
13
|
+
props: {
|
|
14
|
+
name: [String, Number],
|
|
15
|
+
className: String
|
|
16
|
+
},
|
|
17
|
+
inject: {
|
|
18
|
+
tabs: {
|
|
19
|
+
from: 'mlTabs',
|
|
20
|
+
default: null
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
computed: {
|
|
24
|
+
selectTab () {
|
|
25
|
+
return this.tabs ? this.tabs.value : null
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<style lang="scss">
|
|
32
|
+
.ml-tab-pane {
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="ml-tabs" :class="className">
|
|
3
|
-
<
|
|
4
|
-
<view
|
|
5
|
-
<view class="ml-tabs-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
<view class="ml-tabs-header">
|
|
4
|
+
<scroll-view scroll-x>
|
|
5
|
+
<view class="ml-tabs-navs">
|
|
6
|
+
<view class="ml-tabs-nav-item" v-for="(item, index) in options" :key="index" :class="{'is-active': value === item.value}" :style="itemStyles" @tap="changeEvent(item)">
|
|
7
|
+
<view class="ml-tabs-nav-title">{{ item.label }}</view>
|
|
8
|
+
</view>
|
|
9
|
+
</view>
|
|
10
|
+
</scroll-view>
|
|
11
|
+
</view>
|
|
12
|
+
<view class="ml-tabs-content">
|
|
13
|
+
<scroll-view scroll-y>
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</scroll-view>
|
|
16
|
+
</view>
|
|
8
17
|
</view>
|
|
9
18
|
</template>
|
|
10
19
|
|
|
@@ -17,11 +26,22 @@ export default {
|
|
|
17
26
|
props: {
|
|
18
27
|
value: [String, Number],
|
|
19
28
|
options: Array,
|
|
20
|
-
className: String
|
|
29
|
+
className: String,
|
|
30
|
+
itemWidth: String
|
|
31
|
+
},
|
|
32
|
+
provide() {
|
|
33
|
+
return {
|
|
34
|
+
mlTabs: this
|
|
35
|
+
}
|
|
21
36
|
},
|
|
22
37
|
data () {
|
|
23
38
|
return {}
|
|
24
39
|
},
|
|
40
|
+
computed: {
|
|
41
|
+
itemStyles () {
|
|
42
|
+
return this.itemWidth ? `width:${this.itemWidth};` : ''
|
|
43
|
+
}
|
|
44
|
+
},
|
|
25
45
|
methods: {
|
|
26
46
|
changeEvent (item) {
|
|
27
47
|
const value = item.value
|
|
@@ -35,17 +55,21 @@ export default {
|
|
|
35
55
|
<style lang="scss">
|
|
36
56
|
.ml-tabs {
|
|
37
57
|
.ml-tabs-navs {
|
|
38
|
-
display: inline-block;
|
|
39
58
|
white-space: nowrap;
|
|
40
59
|
}
|
|
41
60
|
.ml-tabs-nav-item {
|
|
42
61
|
position: relative;
|
|
43
62
|
display: inline-block;
|
|
44
|
-
padding: 10rpx 20rpx;
|
|
45
|
-
|
|
63
|
+
padding: 10rpx 20rpx 0 20rpx;
|
|
64
|
+
text-align: center;
|
|
65
|
+
.ml-tabs-nav-title {
|
|
66
|
+
padding: 10rpx 20rpx;
|
|
67
|
+
}
|
|
46
68
|
&.is-active {
|
|
47
|
-
|
|
48
|
-
|
|
69
|
+
.ml-tabs-nav-title {
|
|
70
|
+
color: $uni-color-primary;
|
|
71
|
+
border-bottom: 2px solid $uni-color-primary;
|
|
72
|
+
}
|
|
49
73
|
}
|
|
50
74
|
}
|
|
51
75
|
}
|