uview-plus 3.3.13 → 3.3.14
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/changelog.md +6 -0
- package/components/u-box/props.js +27 -0
- package/components/u-box/u-box.vue +92 -0
- package/components/u-card/props.js +140 -0
- package/components/u-card/u-card.vue +186 -0
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { defineMixin } from '../../libs/vue'
|
|
2
|
+
import defProps from '../../libs/config/props.js'
|
|
3
|
+
|
|
4
|
+
export const propsBox = defineMixin({
|
|
5
|
+
props: {
|
|
6
|
+
// 背景色
|
|
7
|
+
bgColors: {
|
|
8
|
+
type: [Array],
|
|
9
|
+
default: ['#EEFCFF', '#FCF8FF', '#FDF8F2']
|
|
10
|
+
},
|
|
11
|
+
// 高度
|
|
12
|
+
height: {
|
|
13
|
+
type: [String],
|
|
14
|
+
default: "160px"
|
|
15
|
+
},
|
|
16
|
+
// 圆角
|
|
17
|
+
borderRadius: {
|
|
18
|
+
type: [String],
|
|
19
|
+
default: "6px"
|
|
20
|
+
},
|
|
21
|
+
// 间隔
|
|
22
|
+
gap: {
|
|
23
|
+
type: [String],
|
|
24
|
+
default: "15px"
|
|
25
|
+
},
|
|
26
|
+
}
|
|
27
|
+
})
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-box" :style="[{height: height}, addStyle(customStyle)]">
|
|
3
|
+
<view class="u-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
|
|
4
|
+
<slot name="left">左</slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="u-box__gap" :style="{width: gap, height: height}"></view>
|
|
7
|
+
<view class="u-box__right">
|
|
8
|
+
<view class="u-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
|
|
9
|
+
<slot name="rightTop">右上</slot>
|
|
10
|
+
</view>
|
|
11
|
+
<view class="u-box__right-gap" :style="{height: gap}"></view>
|
|
12
|
+
<view class="u-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
|
|
13
|
+
<slot name="rightBottom">右下</slot>
|
|
14
|
+
</view>
|
|
15
|
+
</view>
|
|
16
|
+
</view>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
import { propsBox } from './props';
|
|
21
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
22
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
23
|
+
import { addStyle } from '../../libs/function/index';
|
|
24
|
+
import test from '../../libs/function/test';
|
|
25
|
+
/**
|
|
26
|
+
* box 盒子
|
|
27
|
+
* @description box盒子一般为左边一个盒子，右侧两个等高的半盒组成，常用于App首页座位重点突出。
|
|
28
|
+
* @tutorial https://uview-plus.jiangruyi.com/components/box.html
|
|
29
|
+
* @property {Array} bgColors 背景色
|
|
30
|
+
* @property {String} height 高度
|
|
31
|
+
* @property {String} borderRadius 圆角
|
|
32
|
+
* @property {Object} customStyle 定义需要用到的外部样式
|
|
33
|
+
*
|
|
34
|
+
* @event {Function} click 点击cell列表时触发
|
|
35
|
+
* @example <up-box colors=['blue', 'red', 'yellow'] height="200px"></up-box>
|
|
36
|
+
*/
|
|
37
|
+
export default {
|
|
38
|
+
name: 'up-box',
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
mixins: [mpMixin, mixin, propsBox],
|
|
44
|
+
computed: {
|
|
45
|
+
},
|
|
46
|
+
emits: [],
|
|
47
|
+
methods: {
|
|
48
|
+
addStyle,
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style lang="scss" scoped>
|
|
54
|
+
@import "../../libs/css/components.scss";
|
|
55
|
+
|
|
56
|
+
.u-box {
|
|
57
|
+
/* #ifndef APP-NVUE */
|
|
58
|
+
/* #endif */
|
|
59
|
+
@include flex();
|
|
60
|
+
flex: 1;
|
|
61
|
+
|
|
62
|
+
&__left {
|
|
63
|
+
@include flex();
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
flex: 1;
|
|
67
|
+
}
|
|
68
|
+
&__gap {
|
|
69
|
+
@include flex();
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
}
|
|
72
|
+
&__right {
|
|
73
|
+
@include flex();
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
flex: 1;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&__right-top {
|
|
79
|
+
@include flex();
|
|
80
|
+
flex: 1;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
align-items: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&__right-bottom {
|
|
86
|
+
@include flex();
|
|
87
|
+
flex: 1;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
align-items: center;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { defineMixin } from '../../libs/vue'
|
|
2
|
+
import defProps from '../../libs/config/props.js'
|
|
3
|
+
|
|
4
|
+
export const propsCard = defineMixin({
|
|
5
|
+
props: {
|
|
6
|
+
// 与屏幕两侧是否留空隙
|
|
7
|
+
full: {
|
|
8
|
+
type: Boolean,
|
|
9
|
+
default: false
|
|
10
|
+
},
|
|
11
|
+
// 标题
|
|
12
|
+
title: {
|
|
13
|
+
type: String,
|
|
14
|
+
default: ''
|
|
15
|
+
},
|
|
16
|
+
// 标题颜色
|
|
17
|
+
titleColor: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: '#303133'
|
|
20
|
+
},
|
|
21
|
+
// 标题字体大小
|
|
22
|
+
titleSize: {
|
|
23
|
+
type: [Number, String],
|
|
24
|
+
default: '15px'
|
|
25
|
+
},
|
|
26
|
+
// 副标题
|
|
27
|
+
subTitle: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: ''
|
|
30
|
+
},
|
|
31
|
+
// 副标题颜色
|
|
32
|
+
subTitleColor: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: '#909399'
|
|
35
|
+
},
|
|
36
|
+
// 副标题字体大小
|
|
37
|
+
subTitleSize: {
|
|
38
|
+
type: [Number, String],
|
|
39
|
+
default: '13'
|
|
40
|
+
},
|
|
41
|
+
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
|
|
42
|
+
border: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true
|
|
45
|
+
},
|
|
46
|
+
// 用于标识点击了第几个
|
|
47
|
+
index: {
|
|
48
|
+
type: [Number, String, Object],
|
|
49
|
+
default: ''
|
|
50
|
+
},
|
|
51
|
+
// 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px"
|
|
52
|
+
margin: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: '15px'
|
|
55
|
+
},
|
|
56
|
+
// card卡片的圆角
|
|
57
|
+
borderRadius: {
|
|
58
|
+
type: [Number, String],
|
|
59
|
+
default: '8px'
|
|
60
|
+
},
|
|
61
|
+
// 头部自定义样式，对象形式
|
|
62
|
+
headStyle: {
|
|
63
|
+
type: Object,
|
|
64
|
+
default() {
|
|
65
|
+
return {};
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
// 主体自定义样式，对象形式
|
|
69
|
+
bodyStyle: {
|
|
70
|
+
type: Object,
|
|
71
|
+
default() {
|
|
72
|
+
return {};
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
// 底部自定义样式，对象形式
|
|
76
|
+
footStyle: {
|
|
77
|
+
type: Object,
|
|
78
|
+
default() {
|
|
79
|
+
return {};
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
// 头部是否下边框
|
|
83
|
+
headBorderBottom: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
default: true
|
|
86
|
+
},
|
|
87
|
+
// 底部是否有上边框
|
|
88
|
+
footBorderTop: {
|
|
89
|
+
type: Boolean,
|
|
90
|
+
default: true
|
|
91
|
+
},
|
|
92
|
+
// 标题左边的缩略图
|
|
93
|
+
thumb: {
|
|
94
|
+
type: String,
|
|
95
|
+
default: ''
|
|
96
|
+
},
|
|
97
|
+
// 缩略图宽高
|
|
98
|
+
thumbWidth: {
|
|
99
|
+
type: [String, Number],
|
|
100
|
+
default: '30px'
|
|
101
|
+
},
|
|
102
|
+
// 缩略图是否为圆形
|
|
103
|
+
thumbCircle: {
|
|
104
|
+
type: Boolean,
|
|
105
|
+
default: false
|
|
106
|
+
},
|
|
107
|
+
// 给head，body，foot的内边距
|
|
108
|
+
padding: {
|
|
109
|
+
type: [String, Number],
|
|
110
|
+
default: '15px'
|
|
111
|
+
},
|
|
112
|
+
paddingHead: {
|
|
113
|
+
type: [String, Number],
|
|
114
|
+
default: ''
|
|
115
|
+
},
|
|
116
|
+
paddingBody: {
|
|
117
|
+
type: [String, Number],
|
|
118
|
+
default: ''
|
|
119
|
+
},
|
|
120
|
+
paddingFoot: {
|
|
121
|
+
type: [String, Number],
|
|
122
|
+
default: ''
|
|
123
|
+
},
|
|
124
|
+
// 是否显示头部
|
|
125
|
+
showHead: {
|
|
126
|
+
type: Boolean,
|
|
127
|
+
default: true
|
|
128
|
+
},
|
|
129
|
+
// 是否显示尾部
|
|
130
|
+
showFoot: {
|
|
131
|
+
type: Boolean,
|
|
132
|
+
default: true
|
|
133
|
+
},
|
|
134
|
+
// 卡片外围阴影，字符串形式
|
|
135
|
+
boxShadow: {
|
|
136
|
+
type: String,
|
|
137
|
+
default: 'none'
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
})
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view
|
|
3
|
+
class="u-card"
|
|
4
|
+
@tap.stop="click"
|
|
5
|
+
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
|
|
6
|
+
:style="{
|
|
7
|
+
borderRadius: addUnit(borderRadius),
|
|
8
|
+
margin: margin,
|
|
9
|
+
boxShadow: boxShadow
|
|
10
|
+
}"
|
|
11
|
+
>
|
|
12
|
+
<view
|
|
13
|
+
v-if="showHead"
|
|
14
|
+
class="u-card__head"
|
|
15
|
+
:style="[{padding: addUnit(paddingHead || padding)}, headStyle]"
|
|
16
|
+
:class="{
|
|
17
|
+
'u-border-bottom': headBorderBottom
|
|
18
|
+
}"
|
|
19
|
+
@tap="headClick"
|
|
20
|
+
>
|
|
21
|
+
<view v-if="!$slots.head" class="u-flex u-row-between">
|
|
22
|
+
<view class="u-card__head--left u-flex u-line-1" v-if="title">
|
|
23
|
+
<image
|
|
24
|
+
:src="thumb"
|
|
25
|
+
class="u-card__head--left__thumb"
|
|
26
|
+
mode="aspectFill"
|
|
27
|
+
v-if="thumb"
|
|
28
|
+
:style="{
|
|
29
|
+
height: addUnit(thumbWidth),
|
|
30
|
+
width: addUnit(thumbWidth),
|
|
31
|
+
borderRadius: thumbCircle ? '50px' : '4px'
|
|
32
|
+
}"
|
|
33
|
+
></image>
|
|
34
|
+
<text
|
|
35
|
+
class="u-card__head--left__title u-line-1"
|
|
36
|
+
:style="{
|
|
37
|
+
fontSize: addUnit(titleSize),
|
|
38
|
+
color: titleColor
|
|
39
|
+
}"
|
|
40
|
+
>
|
|
41
|
+
{{ title }}
|
|
42
|
+
</text>
|
|
43
|
+
</view>
|
|
44
|
+
<view class="u-card__head--right u-line-1" v-if="subTitle">
|
|
45
|
+
<text
|
|
46
|
+
class="u-card__head__title__text"
|
|
47
|
+
:style="{
|
|
48
|
+
fontSize: addUnit(subTitleSize),
|
|
49
|
+
color: subTitleColor
|
|
50
|
+
}"
|
|
51
|
+
>
|
|
52
|
+
{{ subTitle }}
|
|
53
|
+
</text>
|
|
54
|
+
</view>
|
|
55
|
+
</view>
|
|
56
|
+
<slot name="head" v-else />
|
|
57
|
+
</view>
|
|
58
|
+
<view @tap="bodyClick" class="u-card__body"
|
|
59
|
+
:style="[{padding: addUnit(paddingBody || padding)}, bodyStyle]"><slot name="body" /></view>
|
|
60
|
+
<view
|
|
61
|
+
v-if="showFoot"
|
|
62
|
+
class="u-card__foot"
|
|
63
|
+
@tap="footClick"
|
|
64
|
+
:style="[{padding: $slots.foot ? addUnit(paddingFoot || padding) : 0}, footStyle]"
|
|
65
|
+
:class="{
|
|
66
|
+
'u-border-top': footBorderTop
|
|
67
|
+
}"
|
|
68
|
+
>
|
|
69
|
+
<slot name="foot" />
|
|
70
|
+
</view>
|
|
71
|
+
</view>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
import { propsCard } from './props';
|
|
76
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
77
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
78
|
+
import { addStyle, addUnit, getPx } from '../../libs/function/index';
|
|
79
|
+
/**
|
|
80
|
+
* card 卡片
|
|
81
|
+
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
|
|
82
|
+
* @tutorial https://uview-plus.jiangruyi.com/components/card.html
|
|
83
|
+
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
|
|
84
|
+
* @property {String} title 头部左边的标题
|
|
85
|
+
* @property {String} title-color 标题颜色（默认#303133）
|
|
86
|
+
* @property {String | Number} title-size 标题字体大小，单位rpx（默认15px）
|
|
87
|
+
* @property {String} sub-title 头部右边的副标题
|
|
88
|
+
* @property {String} sub-title-color 副标题颜色（默认#909399）
|
|
89
|
+
* @property {String | Number} sub-title-size 副标题字体大小（默认13px
|
|
90
|
+
* @property {Boolean} border 是否显示边框（默认true）
|
|
91
|
+
* @property {String | Number} index 用于标识点击了第几个卡片
|
|
92
|
+
* @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
|
|
93
|
+
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
|
|
94
|
+
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认8px）
|
|
95
|
+
* @property {Object} head-style 头部自定义样式，对象形式
|
|
96
|
+
* @property {Object} body-style 中部自定义样式，对象形式
|
|
97
|
+
* @property {Object} foot-style 底部自定义样式，对象形式
|
|
98
|
+
* @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
|
|
99
|
+
* @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
|
|
100
|
+
* @property {Boolean} show-head 是否显示头部（默认true）
|
|
101
|
+
* @property {Boolean} show-foot 是否显示尾部（默认true）
|
|
102
|
+
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
|
|
103
|
+
* @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位px（默认30px）
|
|
104
|
+
* @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
|
|
105
|
+
* @event {Function} click 整个卡片任意位置被点击时触发
|
|
106
|
+
* @event {Function} head-click 卡片头部被点击时触发
|
|
107
|
+
* @event {Function} body-click 卡片主体部分被点击时触发
|
|
108
|
+
* @event {Function} foot-click 卡片底部部分被点击时触发
|
|
109
|
+
* @example <u-card paddingFoot="2px 15px" title="card"></u-card>
|
|
110
|
+
*/
|
|
111
|
+
export default {
|
|
112
|
+
name: 'up-card',
|
|
113
|
+
data() {
|
|
114
|
+
return {};
|
|
115
|
+
},
|
|
116
|
+
mixins: [mpMixin, mixin, propsCard],
|
|
117
|
+
emits: ['click', 'head-click', 'body-click', 'foot-click'],
|
|
118
|
+
methods: {
|
|
119
|
+
addStyle,
|
|
120
|
+
addUnit,
|
|
121
|
+
getPx,
|
|
122
|
+
click() {
|
|
123
|
+
this.$emit('click', this.index);
|
|
124
|
+
},
|
|
125
|
+
headClick() {
|
|
126
|
+
this.$emit('head-click', this.index);
|
|
127
|
+
},
|
|
128
|
+
bodyClick() {
|
|
129
|
+
this.$emit('body-click', this.index);
|
|
130
|
+
},
|
|
131
|
+
footClick() {
|
|
132
|
+
this.$emit('foot-click', this.index);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
</script>
|
|
137
|
+
|
|
138
|
+
<style lang="scss" scoped>
|
|
139
|
+
@import "../../libs/css/components.scss";
|
|
140
|
+
|
|
141
|
+
.u-card {
|
|
142
|
+
position: relative;
|
|
143
|
+
overflow: hidden;
|
|
144
|
+
font-size: 28rpx;
|
|
145
|
+
background-color: #ffffff;
|
|
146
|
+
box-sizing: border-box;
|
|
147
|
+
|
|
148
|
+
&-full {
|
|
149
|
+
// 如果是与屏幕之间不留空隙，应该设置左右边距为0
|
|
150
|
+
margin-left: 0 !important;
|
|
151
|
+
margin-right: 0 !important;
|
|
152
|
+
width: 100%;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&--border:after {
|
|
156
|
+
border-radius: 16rpx;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&__head {
|
|
160
|
+
&--left {
|
|
161
|
+
color: $u-main-color;
|
|
162
|
+
|
|
163
|
+
&__thumb {
|
|
164
|
+
margin-right: 16rpx;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&__title {
|
|
168
|
+
max-width: 400rpx;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&--right {
|
|
173
|
+
color: $u-tips-color;
|
|
174
|
+
margin-left: 6rpx;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&__body {
|
|
179
|
+
color: $u-content-color;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&__foot {
|
|
183
|
+
color: $u-tips-color;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
</style>
|