uview-plus 3.2.8 → 3.2.10
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 +10 -0
- package/components/u--form/u--form.vue +7 -7
- package/components/u--image/u--image.vue +3 -3
- package/components/u--input/u--input.vue +9 -9
- package/components/u--textarea/u--textarea.vue +3 -3
- package/components/u-action-sheet/u-action-sheet.vue +5 -4
- package/components/u-album/u-album.vue +9 -7
- package/components/u-alert/u-alert.vue +9 -6
- package/components/u-avatar/props.js +2 -1
- package/components/u-avatar/u-avatar.vue +15 -11
- package/components/u-avatar-group/u-avatar-group.vue +9 -5
- package/components/u-back-top/u-back-top.vue +9 -8
- package/components/u-badge/u-badge.vue +10 -6
- package/components/u-button/u-button.vue +13 -9
- package/components/u-calendar/header.vue +3 -3
- package/components/u-calendar/month.vue +17 -15
- package/components/u-calendar/u-calendar.vue +26 -10
- package/components/u-car-keyboard/u-car-keyboard.vue +7 -6
- package/components/u-cell/u-cell.vue +9 -6
- package/components/u-cell-group/u-cell-group.vue +8 -4
- package/components/u-checkbox/u-checkbox.vue +13 -11
- package/components/u-checkbox-group/u-checkbox-group.vue +3 -3
- package/components/u-circle-progress/u-circle-progress.vue +5 -4
- package/components/u-code/u-code.vue +3 -3
- package/components/u-code-input/u-code-input.vue +9 -8
- package/components/u-col/u-col.vue +9 -8
- package/components/u-collapse/u-collapse.vue +3 -3
- package/components/u-collapse-item/u-collapse-item.vue +32 -15
- package/components/u-column-notice/u-column-notice.vue +8 -6
- package/components/u-count-down/u-count-down.vue +3 -3
- package/components/u-count-to/u-count-to.vue +6 -4
- package/components/u-datetime-picker/u-datetime-picker.vue +16 -15
- package/components/u-divider/u-divider.vue +7 -5
- package/components/u-dropdown/u-dropdown.vue +12 -10
- package/components/u-dropdown-item/u-dropdown-item.vue +7 -5
- package/components/u-empty/u-empty.vue +12 -8
- package/components/u-form/u-form.vue +12 -10
- package/components/u-form-item/u-form-item.vue +17 -11
- package/components/u-gap/u-gap.vue +3 -3
- package/components/u-grid/u-grid.vue +18 -7
- package/components/u-grid-item/u-grid-item.vue +14 -9
- package/components/u-icon/u-icon.vue +21 -19
- package/components/u-image/u-image.vue +18 -16
- package/components/u-index-anchor/u-index-anchor.vue +11 -9
- package/components/u-index-item/u-index-item.vue +6 -5
- package/components/u-index-list/u-index-list.vue +20 -18
- package/components/u-input/u-input.vue +19 -12
- package/components/u-keyboard/u-keyboard.vue +3 -3
- package/components/u-line/u-line.vue +7 -6
- package/components/u-line-progress/u-line-progress.vue +11 -8
- package/components/u-link/u-link.vue +9 -8
- package/components/u-list/u-list.vue +9 -9
- package/components/u-list-item/u-list-item.vue +5 -4
- package/components/u-loading-icon/u-loading-icon.vue +14 -10
- package/components/u-loading-page/u-loading-page.vue +10 -7
- package/components/u-loadmore/u-loadmore.vue +12 -10
- package/components/u-modal/u-modal.vue +7 -5
- package/components/u-navbar/u-navbar.vue +12 -7
- package/components/u-no-network/u-no-network.vue +6 -6
- package/components/u-notice-bar/u-notice-bar.vue +6 -5
- package/components/u-notify/u-notify.vue +19 -15
- package/components/u-number-box/u-number-box.vue +8 -7
- package/components/u-number-keyboard/u-number-keyboard.vue +7 -7
- package/components/u-overlay/u-overlay.vue +5 -5
- package/components/u-picker/u-picker.vue +19 -15
- package/components/u-picker-column/u-picker-column.vue +3 -3
- package/components/u-popup/u-popup.vue +13 -13
- package/components/u-radio/u-radio.vue +12 -12
- package/components/u-radio-group/u-radio-group.vue +3 -3
- package/components/u-rate/u-rate.vue +16 -14
- package/components/u-read-more/u-read-more.vue +9 -7
- package/components/u-row/u-row.vue +8 -7
- package/components/u-row-notice/u-row-notice.vue +14 -12
- package/components/u-safe-bottom/u-safe-bottom.vue +5 -4
- package/components/u-scroll-list/nvue.js +4 -4
- package/components/u-scroll-list/u-scroll-list.vue +13 -10
- package/components/u-search/u-search.vue +8 -6
- package/components/u-skeleton/u-skeleton.vue +20 -17
- package/components/u-slider/mpwxs.js +3 -2
- package/components/u-slider/nvue - /345/211/257/346/234/254.js" +2 -2
- package/components/u-slider/nvue.js +2 -2
- package/components/u-slider/u-slider.vue +8 -5
- package/components/u-status-bar/u-status-bar.vue +6 -5
- package/components/u-steps/u-steps.vue +5 -4
- package/components/u-steps-item/u-steps-item.vue +9 -7
- package/components/u-sticky/u-sticky.vue +12 -10
- package/components/u-subsection/u-subsection.vue +8 -6
- package/components/u-swipe-action/u-swipe-action.vue +3 -3
- package/components/u-swipe-action-item/nvue - backup.js +3 -3
- package/components/u-swipe-action-item/nvue.js +3 -3
- package/components/u-swipe-action-item/u-swipe-action-item.vue +8 -5
- package/components/u-swiper/u-swiper.vue +35 -24
- package/components/u-swiper-indicator/u-swiper-indicator.vue +10 -7
- package/components/u-switch/u-switch.vue +15 -13
- package/components/u-tabbar/u-tabbar.vue +6 -5
- package/components/u-tabbar-item/u-tabbar-item.vue +7 -5
- package/components/u-table/u-table.vue +3 -3
- package/components/u-tabs/u-tabs.vue +18 -14
- package/components/u-tabs-item/u-tabs-item.vue +3 -3
- package/components/u-tag/u-tag.vue +6 -4
- package/components/u-td/u-td.vue +3 -3
- package/components/u-text/u-text.vue +12 -10
- package/components/u-text/value.js +14 -12
- package/components/u-textarea/u-textarea.vue +11 -8
- package/components/u-toast/u-toast.vue +12 -9
- package/components/u-toolbar/u-toolbar.vue +3 -3
- package/components/u-tooltip/u-tooltip.vue +18 -17
- package/components/u-tr/u-tr.vue +3 -3
- package/components/u-transition/transition.js +2 -2
- package/components/u-transition/u-transition.vue +6 -5
- package/components/u-upload/mixin.js +4 -3
- package/components/u-upload/u-upload.vue +20 -17
- package/index.js +0 -5
- package/libs/function/index.js +27 -20
- package/libs/function/throttle.js +2 -2
- package/libs/mixin/mixin.js +14 -6
- package/libs/mixin/style.js +23 -4
- package/libs/util/route.js +6 -6
- package/package.json +1 -1
- package/types/index.d.ts +0 -1
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
<view
|
|
3
3
|
class="u-swiper"
|
|
4
4
|
:style="{
|
|
5
|
-
backgroundColor: bgColor,
|
|
6
|
-
height:
|
|
7
|
-
borderRadius:
|
|
5
|
+
backgroundColor: bgColor,
|
|
6
|
+
height: addUnit(height),
|
|
7
|
+
borderRadius: addUnit(radius)
|
|
8
8
|
}"
|
|
9
9
|
>
|
|
10
10
|
<view
|
|
@@ -13,10 +13,12 @@
|
|
|
13
13
|
>
|
|
14
14
|
<u-loading-icon mode="circle"></u-loading-icon>
|
|
15
15
|
</view>
|
|
16
|
-
<swiper
|
|
16
|
+
<swiper
|
|
17
|
+
v-else
|
|
17
18
|
class="u-swiper__wrapper"
|
|
18
|
-
:style="{
|
|
19
|
-
|
|
19
|
+
:style="{
|
|
20
|
+
flex: '1',
|
|
21
|
+
height: addUnit(height)
|
|
20
22
|
}"
|
|
21
23
|
@change="change"
|
|
22
24
|
:circular="circular"
|
|
@@ -25,8 +27,8 @@
|
|
|
25
27
|
:autoplay="autoplay"
|
|
26
28
|
:current="current"
|
|
27
29
|
:currentItemId="currentItemId"
|
|
28
|
-
:previousMargin="
|
|
29
|
-
:nextMargin="
|
|
30
|
+
:previousMargin="addUnit(previousMargin)"
|
|
31
|
+
:nextMargin="addUnit(nextMargin)"
|
|
30
32
|
:acceleration="acceleration"
|
|
31
33
|
:displayMultipleItems="displayMultipleItems"
|
|
32
34
|
:easingFunction="easingFunction"
|
|
@@ -48,8 +50,8 @@
|
|
|
48
50
|
:mode="imgMode"
|
|
49
51
|
@tap="clickHandler(index)"
|
|
50
52
|
:style="{
|
|
51
|
-
height:
|
|
52
|
-
borderRadius:
|
|
53
|
+
height: addUnit(height),
|
|
54
|
+
borderRadius: addUnit(radius)
|
|
53
55
|
}"
|
|
54
56
|
></image>
|
|
55
57
|
<video
|
|
@@ -59,21 +61,21 @@
|
|
|
59
61
|
:enable-progress-gesture="false"
|
|
60
62
|
:src="getSource(item)"
|
|
61
63
|
:poster="getPoster(item)"
|
|
62
|
-
:title="showTitle &&
|
|
64
|
+
:title="showTitle && testObject(item) && item.title ? item.title : ''"
|
|
63
65
|
:style="{
|
|
64
|
-
height:
|
|
66
|
+
height: addUnit(height)
|
|
65
67
|
}"
|
|
66
68
|
controls
|
|
67
69
|
@tap="clickHandler(index)"
|
|
68
70
|
></video>
|
|
69
71
|
<text
|
|
70
|
-
v-if="showTitle &&
|
|
72
|
+
v-if="showTitle && testObject(item) && item.title && testImage(getSource(item))"
|
|
71
73
|
class="u-swiper__wrapper__item__wrapper__title u-line-1"
|
|
72
74
|
>{{ item.title }}</text>
|
|
73
75
|
</view>
|
|
74
76
|
</swiper-item>
|
|
75
77
|
</swiper>
|
|
76
|
-
<view class="u-swiper__indicator" :style="[
|
|
78
|
+
<view class="u-swiper__indicator" :style="[addStyle(indicatorStyle)]">
|
|
77
79
|
<slot name="indicator">
|
|
78
80
|
<u-swiper-indicator
|
|
79
81
|
v-if="!loading && indicator && !showTitle"
|
|
@@ -87,11 +89,12 @@
|
|
|
87
89
|
</view>
|
|
88
90
|
</view>
|
|
89
91
|
</template>
|
|
90
|
-
|
|
91
92
|
<script>
|
|
92
93
|
import props from './props.js';
|
|
93
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
94
|
-
import mixin from '../../libs/mixin/mixin
|
|
94
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
95
|
+
import mixin from '../../libs/mixin/mixin';
|
|
96
|
+
import { addUnit, addStyle, error } from '../../libs/function/index';
|
|
97
|
+
import test from '../../libs/function/test';
|
|
95
98
|
/**
|
|
96
99
|
* Swiper 轮播图
|
|
97
100
|
* @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用,
|
|
@@ -147,7 +150,7 @@
|
|
|
147
150
|
// 左右流出空间的写法不支持nvue和头条
|
|
148
151
|
// 只有配置了此二值,才加上对应的圆角,以及缩放
|
|
149
152
|
if (this.nextMargin && this.previousMargin) {
|
|
150
|
-
style.borderRadius =
|
|
153
|
+
style.borderRadius = addUnit(this.radius)
|
|
151
154
|
if (index !== this.currentIndex) style.transform = 'scale(0.92)'
|
|
152
155
|
}
|
|
153
156
|
// #endif
|
|
@@ -156,10 +159,14 @@
|
|
|
156
159
|
}
|
|
157
160
|
},
|
|
158
161
|
methods: {
|
|
162
|
+
addStyle,
|
|
163
|
+
addUnit,
|
|
164
|
+
testObject: test.object,
|
|
165
|
+
testImage: test.image,
|
|
159
166
|
getItemType(item) {
|
|
160
|
-
if (typeof item === 'string') return
|
|
167
|
+
if (typeof item === 'string') return test.video(this.getSource(item)) ? 'video' : 'image'
|
|
161
168
|
if (typeof item === 'object' && this.keyName) {
|
|
162
|
-
if (!item.type) return
|
|
169
|
+
if (!item.type) return test.video(this.getSource(item)) ? 'video' : 'image'
|
|
163
170
|
if (item.type === 'image') return 'image'
|
|
164
171
|
if (item.type === 'video') return 'video'
|
|
165
172
|
return 'image'
|
|
@@ -169,7 +176,7 @@
|
|
|
169
176
|
getSource(item) {
|
|
170
177
|
if (typeof item === 'string') return item
|
|
171
178
|
if (typeof item === 'object' && this.keyName) return item[this.keyName]
|
|
172
|
-
else
|
|
179
|
+
else error('请按格式传递列表参数')
|
|
173
180
|
return ''
|
|
174
181
|
},
|
|
175
182
|
// 轮播切换事件
|
|
@@ -185,7 +192,7 @@
|
|
|
185
192
|
// 切换轮播时,暂停视频播放
|
|
186
193
|
pauseVideo(index) {
|
|
187
194
|
const lastItem = this.getSource(this.list[index])
|
|
188
|
-
if (
|
|
195
|
+
if (test.video(lastItem)) {
|
|
189
196
|
// 当视频隐藏时,暂停播放
|
|
190
197
|
const video = uni.createVideoContext(`video-${index}`, this)
|
|
191
198
|
video.pause()
|
|
@@ -205,7 +212,10 @@
|
|
|
205
212
|
|
|
206
213
|
<style lang="scss" scoped>
|
|
207
214
|
@import "../../libs/css/components.scss";
|
|
208
|
-
|
|
215
|
+
|
|
216
|
+
.u-swiper__wrapper {
|
|
217
|
+
flex: 1;
|
|
218
|
+
}
|
|
209
219
|
.u-swiper {
|
|
210
220
|
@include flex;
|
|
211
221
|
justify-content: center;
|
|
@@ -213,7 +223,8 @@
|
|
|
213
223
|
position: relative;
|
|
214
224
|
overflow: hidden;
|
|
215
225
|
|
|
216
|
-
&__wrapper {
|
|
226
|
+
&__wrapper {
|
|
227
|
+
flex: 1;
|
|
217
228
|
|
|
218
229
|
&__item {
|
|
219
230
|
flex: 1;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
v-if="indicatorMode === 'line'"
|
|
6
6
|
:class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
|
|
7
7
|
:style="{
|
|
8
|
-
width:
|
|
8
|
+
width: addUnit(lineWidth * length),
|
|
9
9
|
backgroundColor: indicatorInactiveColor
|
|
10
10
|
}"
|
|
11
11
|
>
|
|
@@ -25,16 +25,16 @@
|
|
|
25
25
|
:class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
|
|
26
26
|
:style="[dotStyle(index)]"
|
|
27
27
|
>
|
|
28
|
-
|
|
29
28
|
</view>
|
|
30
29
|
</view>
|
|
31
30
|
</view>
|
|
32
31
|
</template>
|
|
33
32
|
|
|
34
33
|
<script>
|
|
35
|
-
import props from './props
|
|
36
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
37
|
-
import mixin from '../../libs/mixin/mixin
|
|
34
|
+
import props from './props';
|
|
35
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
36
|
+
import mixin from '../../libs/mixin/mixin';
|
|
37
|
+
import { addUnit } from '../../libs/function/index';
|
|
38
38
|
/**
|
|
39
39
|
* SwiperIndicator 轮播图指示器
|
|
40
40
|
* @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用,
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
// 指示器为线型的样式
|
|
59
59
|
lineStyle() {
|
|
60
60
|
let style = {}
|
|
61
|
-
style.width =
|
|
62
|
-
style.transform = `translateX(${
|
|
61
|
+
style.width = addUnit(this.lineWidth)
|
|
62
|
+
style.transform = `translateX(${ addUnit(this.current * this.lineWidth) })`
|
|
63
63
|
style.backgroundColor = this.indicatorActiveColor
|
|
64
64
|
return style
|
|
65
65
|
},
|
|
@@ -72,6 +72,9 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
|
+
methods: {
|
|
76
|
+
addUnit
|
|
77
|
+
}
|
|
75
78
|
}
|
|
76
79
|
</script>
|
|
77
80
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<view
|
|
3
3
|
class="u-switch cursor-pointer"
|
|
4
4
|
:class="[disabled && 'u-switch--disabled']"
|
|
5
|
-
:style="[switchStyle,
|
|
5
|
+
:style="[switchStyle, addStyle(customStyle)]"
|
|
6
6
|
@tap="clickHandler"
|
|
7
7
|
>
|
|
8
8
|
<view
|
|
@@ -38,9 +38,10 @@
|
|
|
38
38
|
</template>
|
|
39
39
|
|
|
40
40
|
<script>
|
|
41
|
-
import props from './props
|
|
42
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
43
|
-
import mixin from '../../libs/mixin/mixin
|
|
41
|
+
import props from './props';
|
|
42
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
43
|
+
import mixin from '../../libs/mixin/mixin';
|
|
44
|
+
import { addStyle, addUnit, error } from '../../libs/function/index';
|
|
44
45
|
/**
|
|
45
46
|
* switch 开关选择器
|
|
46
47
|
* @description 选择开关一般用于只有两个选择,且只能选其一的场景。
|
|
@@ -69,7 +70,7 @@
|
|
|
69
70
|
immediate: true,
|
|
70
71
|
handler(n) {
|
|
71
72
|
if(n !== this.inactiveValue && n !== this.activeValue) {
|
|
72
|
-
|
|
73
|
+
error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
|
73
74
|
}
|
|
74
75
|
}
|
|
75
76
|
},
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
immediate: true,
|
|
80
81
|
handler(n) {
|
|
81
82
|
if(n !== this.inactiveValue && n !== this.activeValue) {
|
|
82
|
-
|
|
83
|
+
error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
}
|
|
@@ -102,8 +103,8 @@
|
|
|
102
103
|
switchStyle() {
|
|
103
104
|
let style = {}
|
|
104
105
|
// 这里需要加2,是为了腾出边框的距离,否则圆点node会和外边框紧贴在一起
|
|
105
|
-
style.width =
|
|
106
|
-
style.height =
|
|
106
|
+
style.width = addUnit(this.size * 2 + 2)
|
|
107
|
+
style.height = addUnit(Number(this.size) + 2)
|
|
107
108
|
// style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
|
|
108
109
|
// 如果自定义了“非激活”演示,name边框颜色设置为透明(跟非激活颜色一致)
|
|
109
110
|
// 这里不能简单的设置为非激活的颜色,否则打开状态时,会有边框,所以需要透明
|
|
@@ -116,17 +117,17 @@
|
|
|
116
117
|
nodeStyle() {
|
|
117
118
|
let style = {}
|
|
118
119
|
// 如果自定义非激活颜色,将node圆点的尺寸减少两个像素,让其与外边框距离更大一点
|
|
119
|
-
style.width =
|
|
120
|
-
style.height =
|
|
121
|
-
const translateX = this.isActive ?
|
|
120
|
+
style.width = addUnit(this.size - this.space)
|
|
121
|
+
style.height = addUnit(this.size - this.space)
|
|
122
|
+
const translateX = this.isActive ? addUnit(this.space) : addUnit(this.size);
|
|
122
123
|
style.transform = `translateX(-${translateX})`
|
|
123
124
|
return style
|
|
124
125
|
},
|
|
125
126
|
bgStyle() {
|
|
126
127
|
let style = {}
|
|
127
128
|
// 这里配置一个多余的元素在HTML中,是为了让switch切换时,有更良好的背景色扩充体验(见实际效果)
|
|
128
|
-
style.width =
|
|
129
|
-
style.height =
|
|
129
|
+
style.width = addUnit(Number(this.size) * 2 - this.size / 2)
|
|
130
|
+
style.height = addUnit(this.size)
|
|
130
131
|
style.backgroundColor = this.inactiveColor
|
|
131
132
|
// 打开时,让此元素收缩,否则反之
|
|
132
133
|
style.transform = `scale(${this.isActive ? 0 : 1})`
|
|
@@ -141,6 +142,7 @@
|
|
|
141
142
|
emits: ['update:modelValue', 'change'],
|
|
142
143
|
// #endif
|
|
143
144
|
methods: {
|
|
145
|
+
addStyle,
|
|
144
146
|
clickHandler() {
|
|
145
147
|
if (!this.disabled && !this.loading) {
|
|
146
148
|
const oldValue = this.isActive ? this.inactiveValue : this.activeValue
|
|
@@ -23,9 +23,10 @@
|
|
|
23
23
|
</template>
|
|
24
24
|
|
|
25
25
|
<script>
|
|
26
|
-
import props from './props
|
|
27
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
28
|
-
import mixin from '../../libs/mixin/mixin
|
|
26
|
+
import props from './props';
|
|
27
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
28
|
+
import mixin from '../../libs/mixin/mixin';
|
|
29
|
+
import { addStyle, deepMerge, sleep } from '../../libs/function/index';
|
|
29
30
|
// #ifdef APP-NVUE
|
|
30
31
|
const dom = uni.requireNativePlugin('dom')
|
|
31
32
|
// #endif
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
zIndex: this.zIndex
|
|
60
61
|
}
|
|
61
62
|
// 合并来自父组件的customStyle样式
|
|
62
|
-
return
|
|
63
|
+
return deepMerge(style, addStyle(this.customStyle))
|
|
63
64
|
},
|
|
64
65
|
// 监听多个参数的变化,通过在computed执行对应的操作
|
|
65
66
|
updateChild() {
|
|
@@ -94,7 +95,7 @@
|
|
|
94
95
|
async setPlaceholderHeight() {
|
|
95
96
|
if (!this.fixed || !this.placeholder) return
|
|
96
97
|
// 延时一定时间
|
|
97
|
-
await
|
|
98
|
+
await sleep(20)
|
|
98
99
|
// #ifndef APP-NVUE
|
|
99
100
|
this.$uGetRect('.u-tabbar__content').then(({height = 50}) => {
|
|
100
101
|
// 修复IOS safearea bottom 未填充高度
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view
|
|
3
3
|
class="u-tabbar-item cursor-pointer"
|
|
4
|
-
:style="[
|
|
4
|
+
:style="[addStyle(customStyle)]"
|
|
5
5
|
@tap="clickHandler"
|
|
6
6
|
>
|
|
7
7
|
<view class="u-tabbar-item__icon">
|
|
@@ -43,9 +43,10 @@
|
|
|
43
43
|
</template>
|
|
44
44
|
|
|
45
45
|
<script>
|
|
46
|
-
import props from './props
|
|
47
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
48
|
-
import mixin from '../../libs/mixin/mixin
|
|
46
|
+
import props from './props';
|
|
47
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
48
|
+
import mixin from '../../libs/mixin/mixin';
|
|
49
|
+
import { addStyle, error } from '../../libs/function/index';
|
|
49
50
|
/**
|
|
50
51
|
* TabbarItem 底部导航栏子组件
|
|
51
52
|
* @description 此组件提供了自定义tabbar的能力。
|
|
@@ -82,11 +83,12 @@
|
|
|
82
83
|
},
|
|
83
84
|
emits: ["click", "change"],
|
|
84
85
|
methods: {
|
|
86
|
+
addStyle,
|
|
85
87
|
init() {
|
|
86
88
|
// 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
|
|
87
89
|
this.updateParentData()
|
|
88
90
|
if (!this.parent) {
|
|
89
|
-
|
|
91
|
+
error('u-tabbar-item必须搭配u-tabbar组件使用')
|
|
90
92
|
}
|
|
91
93
|
// 本子组件在u-tabbar的children数组中的索引
|
|
92
94
|
const index = this.parent.children.indexOf(this)
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script>
|
|
8
|
-
import props from './props
|
|
9
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
10
|
-
import mixin from '../../libs/mixin/mixin
|
|
8
|
+
import props from './props';
|
|
9
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
10
|
+
import mixin from '../../libs/mixin/mixin';
|
|
11
11
|
/**
|
|
12
12
|
* Table 表格
|
|
13
13
|
* @description 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格,由table、tr、th、td四个组件组成
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
:key="index"
|
|
22
22
|
@tap="clickHandler(item, index)"
|
|
23
23
|
:ref="`u-tabs__wrapper__nav__item-${index}`"
|
|
24
|
-
:style="[
|
|
24
|
+
:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
|
|
25
25
|
:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
|
|
26
26
|
>
|
|
27
27
|
<text
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
class="u-tabs__wrapper__nav__line"
|
|
50
50
|
ref="u-tabs__wrapper__nav__line"
|
|
51
51
|
:style="[{
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
52
|
+
width: addUnit(lineWidth),
|
|
53
|
+
height: addUnit(lineHeight),
|
|
54
54
|
background: lineColor,
|
|
55
55
|
backgroundSize: lineBgSize,
|
|
56
56
|
}]"
|
|
@@ -62,10 +62,10 @@
|
|
|
62
62
|
class="u-tabs__wrapper__nav__line"
|
|
63
63
|
ref="u-tabs__wrapper__nav__line"
|
|
64
64
|
:style="[{
|
|
65
|
-
width:
|
|
65
|
+
width: addUnit(lineWidth),
|
|
66
66
|
transform: `translate(${lineOffsetLeft}px)`,
|
|
67
67
|
transitionDuration: `${firstTime ? 0 : duration}ms`,
|
|
68
|
-
height:
|
|
68
|
+
height: addUnit(lineHeight),
|
|
69
69
|
background: lineColor,
|
|
70
70
|
backgroundSize: lineBgSize,
|
|
71
71
|
}]"
|
|
@@ -85,9 +85,11 @@
|
|
|
85
85
|
const animation = uni.requireNativePlugin('animation')
|
|
86
86
|
const dom = uni.requireNativePlugin('dom')
|
|
87
87
|
// #endif
|
|
88
|
-
import props from './props
|
|
89
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
90
|
-
import mixin from '../../libs/mixin/mixin
|
|
88
|
+
import props from './props';
|
|
89
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
90
|
+
import mixin from '../../libs/mixin/mixin';
|
|
91
|
+
import defProps from '../../libs/config/props.js';
|
|
92
|
+
import { addUnit, addStyle, deepMerge, getPx, sleep, sys } from '../../libs/function/index';
|
|
91
93
|
/**
|
|
92
94
|
* Tabs 标签
|
|
93
95
|
* @description tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。
|
|
@@ -140,18 +142,18 @@
|
|
|
140
142
|
return index => {
|
|
141
143
|
const style = {}
|
|
142
144
|
// 取当期是否激活的样式
|
|
143
|
-
const customeStyle = index === this.innerCurrent ?
|
|
145
|
+
const customeStyle = index === this.innerCurrent ? addStyle(this.activeStyle) : uni.$u
|
|
144
146
|
.addStyle(
|
|
145
147
|
this.inactiveStyle)
|
|
146
148
|
// 如果当前菜单被禁用,则加上对应颜色,需要在此做处理,是因为nvue下,无法在style样式中通过!import覆盖标签的内联样式
|
|
147
149
|
if (this.list[index].disabled) {
|
|
148
150
|
style.color = '#c8c9cc'
|
|
149
151
|
}
|
|
150
|
-
return
|
|
152
|
+
return deepMerge(customeStyle, style)
|
|
151
153
|
}
|
|
152
154
|
},
|
|
153
155
|
propsBadge() {
|
|
154
|
-
return
|
|
156
|
+
return defProps.badge
|
|
155
157
|
}
|
|
156
158
|
},
|
|
157
159
|
async mounted() {
|
|
@@ -159,6 +161,8 @@
|
|
|
159
161
|
},
|
|
160
162
|
emits: ['click', 'change'],
|
|
161
163
|
methods: {
|
|
164
|
+
addStyle,
|
|
165
|
+
addUnit,
|
|
162
166
|
setLineLeft() {
|
|
163
167
|
const tabItem = this.list[this.innerCurrent];
|
|
164
168
|
if (!tabItem) {
|
|
@@ -169,7 +173,7 @@
|
|
|
169
173
|
.slice(0, this.innerCurrent)
|
|
170
174
|
.reduce((total, curr) => total + curr.rect.width, 0);
|
|
171
175
|
// 获取下划线的数值px表示法
|
|
172
|
-
const lineWidth =
|
|
176
|
+
const lineWidth = getPx(this.lineWidth);
|
|
173
177
|
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
|
|
174
178
|
// #ifdef APP-NVUE
|
|
175
179
|
// 第一次移动滑块,无需过渡时间
|
|
@@ -213,7 +217,7 @@
|
|
|
213
217
|
})
|
|
214
218
|
},
|
|
215
219
|
init() {
|
|
216
|
-
|
|
220
|
+
sleep().then(() => {
|
|
217
221
|
this.resize()
|
|
218
222
|
})
|
|
219
223
|
},
|
|
@@ -227,7 +231,7 @@
|
|
|
227
231
|
return total + curr.rect.width
|
|
228
232
|
}, 0)
|
|
229
233
|
// 此处为屏幕宽度
|
|
230
|
-
const windowWidth =
|
|
234
|
+
const windowWidth = sys().windowWidth
|
|
231
235
|
// 将活动的tabs-item移动到屏幕正中间,实际上是对scroll-view的移动
|
|
232
236
|
let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
|
|
233
237
|
.right) / 2 + this.tabsRect.left / 2
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script>
|
|
8
|
-
import props from './props
|
|
9
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
10
|
-
import mixin from '../../libs/mixin/mixin
|
|
8
|
+
import props from './props';
|
|
9
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
10
|
+
import mixin from '../../libs/mixin/mixin';
|
|
11
11
|
/**
|
|
12
12
|
* TabsItem tabs标签组件的自组件
|
|
13
13
|
* @description tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
v-if="icon"
|
|
21
21
|
>
|
|
22
22
|
<image
|
|
23
|
-
v-if="
|
|
23
|
+
v-if="testImage(icon)"
|
|
24
24
|
:src="icon"
|
|
25
25
|
:style="[imgStyle]"
|
|
26
26
|
></image>
|
|
@@ -56,9 +56,10 @@
|
|
|
56
56
|
</template>
|
|
57
57
|
|
|
58
58
|
<script>
|
|
59
|
-
import props from './props
|
|
60
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
61
|
-
import mixin from '../../libs/mixin/mixin
|
|
59
|
+
import props from './props';
|
|
60
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
61
|
+
import mixin from '../../libs/mixin/mixin';
|
|
62
|
+
import test from '../../libs/function/test';
|
|
62
63
|
/**
|
|
63
64
|
* Tag 标签
|
|
64
65
|
* @description tag组件一般用于标记和选择,我们提供了更加丰富的表现形式,能够较全面的涵盖您的使用场景
|
|
@@ -136,6 +137,7 @@
|
|
|
136
137
|
},
|
|
137
138
|
emits: ["click", "close"],
|
|
138
139
|
methods: {
|
|
140
|
+
testImage: test.image,
|
|
139
141
|
// 点击关闭按钮
|
|
140
142
|
closeHandler() {
|
|
141
143
|
this.$emit('close', this.name)
|
package/components/u-td/u-td.vue
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script>
|
|
8
|
-
import props from './props
|
|
9
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
10
|
-
import mixin from '../../libs/mixin/mixin
|
|
8
|
+
import props from './props';
|
|
9
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
10
|
+
import mixin from '../../libs/mixin/mixin';
|
|
11
11
|
/**
|
|
12
12
|
* Td 表格中的单元格
|
|
13
13
|
* @description
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<view class="u-text__prefix-icon" v-if="prefixIcon">
|
|
19
19
|
<u-icon
|
|
20
20
|
:name="prefixIcon"
|
|
21
|
-
:customStyle="
|
|
21
|
+
:customStyle="addStyle(iconStyle)"
|
|
22
22
|
></u-icon>
|
|
23
23
|
</view>
|
|
24
24
|
<u-link
|
|
@@ -63,19 +63,20 @@
|
|
|
63
63
|
<view class="u-text__suffix-icon" v-if="suffixIcon">
|
|
64
64
|
<u-icon
|
|
65
65
|
:name="suffixIcon"
|
|
66
|
-
:customStyle="
|
|
66
|
+
:customStyle="addStyle(iconStyle)"
|
|
67
67
|
></u-icon>
|
|
68
68
|
</view>
|
|
69
69
|
</view>
|
|
70
70
|
</template>
|
|
71
71
|
|
|
72
72
|
<script>
|
|
73
|
+
import props from './props'
|
|
73
74
|
import value from './value.js'
|
|
74
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
75
|
-
import mixin from '../../libs/mixin/mixin
|
|
76
|
-
import button from '../../libs/mixin/button
|
|
77
|
-
import openType from '../../libs/mixin/openType
|
|
78
|
-
import
|
|
75
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
76
|
+
import mixin from '../../libs/mixin/mixin';
|
|
77
|
+
import button from '../../libs/mixin/button';
|
|
78
|
+
import openType from '../../libs/mixin/openType';
|
|
79
|
+
import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
|
|
79
80
|
/**
|
|
80
81
|
* Text 文本
|
|
81
82
|
* @description 此组件集成了文本类在项目中的常用功能,包括状态,拨打电话,格式化日期,*替换,超链接...等功能。 您大可不必在使用特殊文本时自己定义,text组件几乎涵盖您能使用的大部分场景。
|
|
@@ -119,14 +120,14 @@ export default {
|
|
|
119
120
|
textDecoration: this.decoration,
|
|
120
121
|
fontWeight: this.bold ? 'bold' : 'normal',
|
|
121
122
|
wordWrap: this.wordWrap,
|
|
122
|
-
fontSize:
|
|
123
|
+
fontSize: addUnit(this.size)
|
|
123
124
|
}
|
|
124
125
|
!this.type && (style.color = this.color)
|
|
125
126
|
this.isNvue && this.lines && (style.lines = this.lines)
|
|
126
127
|
this.lineHeight &&
|
|
127
|
-
(style.lineHeight =
|
|
128
|
+
(style.lineHeight = addUnit(this.lineHeight))
|
|
128
129
|
!this.isNvue && this.block && (style.display = 'block')
|
|
129
|
-
return
|
|
130
|
+
return deepMerge(style, addStyle(this.customStyle))
|
|
130
131
|
},
|
|
131
132
|
isNvue() {
|
|
132
133
|
let nvue = false
|
|
@@ -147,6 +148,7 @@ export default {
|
|
|
147
148
|
return {}
|
|
148
149
|
},
|
|
149
150
|
methods: {
|
|
151
|
+
addStyle,
|
|
150
152
|
clickHandler() {
|
|
151
153
|
// 如果为手机号模式,拨打电话
|
|
152
154
|
if (this.call && this.mode === 'phone') {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { error, priceFormat, timeFormat } from '../../libs/function/index';
|
|
2
|
+
import test from '../../libs/function/test';
|
|
1
3
|
export default {
|
|
2
4
|
computed: {
|
|
3
5
|
// 经处理后需要显示的值
|
|
@@ -12,32 +14,32 @@ export default {
|
|
|
12
14
|
if (mode === 'price') {
|
|
13
15
|
// 如果text不为金额进行提示
|
|
14
16
|
if (!/^\d+(\.\d+)?$/.test(text)) {
|
|
15
|
-
|
|
17
|
+
error('金额模式下,text参数需要为金额格式');
|
|
16
18
|
}
|
|
17
19
|
// 进行格式化,判断用户传入的format参数为正则,或者函数,如果没有传入format,则使用默认的金额格式化处理
|
|
18
|
-
if (
|
|
20
|
+
if (test.func(format)) {
|
|
19
21
|
// 如果用户传入的是函数,使用函数格式化
|
|
20
22
|
return format(text)
|
|
21
23
|
}
|
|
22
24
|
// 如果format非正则,非函数,则使用默认的金额格式化方法进行操作
|
|
23
|
-
return
|
|
25
|
+
return priceFormat(text, 2)
|
|
24
26
|
} if (mode === 'date') {
|
|
25
27
|
// 判断是否合法的日期或者时间戳
|
|
26
|
-
!
|
|
28
|
+
!test.date(text) && error('日期模式下,text参数需要为日期或时间戳格式')
|
|
27
29
|
// 进行格式化,判断用户传入的format参数为正则,或者函数,如果没有传入format,则使用默认的格式化处理
|
|
28
|
-
if (
|
|
30
|
+
if (test.func(format)) {
|
|
29
31
|
// 如果用户传入的是函数,使用函数格式化
|
|
30
32
|
return format(text)
|
|
31
33
|
} if (format) {
|
|
32
34
|
// 如果format非正则,非函数,则使用默认的时间格式化方法进行操作
|
|
33
|
-
return
|
|
35
|
+
return timeFormat(text, format)
|
|
34
36
|
}
|
|
35
37
|
// 如果没有设置format,则设置为默认的时间格式化形式
|
|
36
|
-
return
|
|
38
|
+
return timeFormat(text, 'yyyy-mm-dd')
|
|
37
39
|
} if (mode === 'phone') {
|
|
38
40
|
// 判断是否合法的手机号
|
|
39
|
-
// !
|
|
40
|
-
if (
|
|
41
|
+
// !test.mobile(text) && error('手机号模式下,text参数需要为手机号码格式')
|
|
42
|
+
if (test.func(format)) {
|
|
41
43
|
// 如果用户传入的是函数,使用函数格式化
|
|
42
44
|
return format(text)
|
|
43
45
|
} if (format === 'encrypt') {
|
|
@@ -47,8 +49,8 @@ export default {
|
|
|
47
49
|
return text
|
|
48
50
|
} if (mode === 'name') {
|
|
49
51
|
// 判断是否合法的字符粗
|
|
50
|
-
!(typeof (text) === 'string') &&
|
|
51
|
-
if (
|
|
52
|
+
!(typeof (text) === 'string') && error('姓名模式下,text参数需要为字符串格式')
|
|
53
|
+
if (test.func(format)) {
|
|
52
54
|
// 如果用户传入的是函数,使用函数格式化
|
|
53
55
|
return format(text)
|
|
54
56
|
} if (format === 'encrypt') {
|
|
@@ -58,7 +60,7 @@ export default {
|
|
|
58
60
|
return text
|
|
59
61
|
} if (mode === 'link') {
|
|
60
62
|
// 判断是否合法的字符粗
|
|
61
|
-
!
|
|
63
|
+
!test.url(href) && error('超链接模式下,href参数需要为URL格式')
|
|
62
64
|
return text
|
|
63
65
|
}
|
|
64
66
|
return text
|