uview-plus 3.2.8 → 3.2.9
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 +5 -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 +10 -8
- 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 +15 -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 +12 -11
- 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view
|
|
3
3
|
class="u-loading-icon"
|
|
4
|
-
:style="[
|
|
4
|
+
:style="[addStyle(customStyle)]"
|
|
5
5
|
:class="[vertical && 'u-loading-icon--vertical']"
|
|
6
6
|
v-if="show"
|
|
7
7
|
>
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
ref="ani"
|
|
13
13
|
:style="{
|
|
14
14
|
color: color,
|
|
15
|
-
width:
|
|
16
|
-
height:
|
|
15
|
+
width: addUnit(size),
|
|
16
|
+
height: addUnit(size),
|
|
17
17
|
borderTopColor: color,
|
|
18
18
|
borderBottomColor: otherBorderColor,
|
|
19
19
|
borderLeftColor: otherBorderColor,
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
:animating="true"
|
|
40
40
|
:style="{
|
|
41
41
|
color: color,
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
42
|
+
width: addUnit(size),
|
|
43
|
+
height: addUnit(size)
|
|
44
44
|
}"
|
|
45
45
|
/>
|
|
46
46
|
<!-- #endif -->
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
v-if="text"
|
|
51
51
|
class="u-loading-icon__text"
|
|
52
52
|
:style="{
|
|
53
|
-
fontSize:
|
|
53
|
+
fontSize: addUnit(textSize),
|
|
54
54
|
color: textColor,
|
|
55
55
|
}"
|
|
56
56
|
>{{text}}</text>
|
|
@@ -58,9 +58,11 @@
|
|
|
58
58
|
</template>
|
|
59
59
|
|
|
60
60
|
<script>
|
|
61
|
-
import props from './props
|
|
62
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
63
|
-
import mixin from '../../libs/mixin/mixin
|
|
61
|
+
import props from './props';
|
|
62
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
63
|
+
import mixin from '../../libs/mixin/mixin';
|
|
64
|
+
import { addUnit, addStyle } from '../../libs/function/index';
|
|
65
|
+
import { colorGradient } from '../../libs/function/colorGradient';
|
|
64
66
|
// #ifdef APP-NVUE
|
|
65
67
|
const animation = weex.requireModule('animation');
|
|
66
68
|
// #endif
|
|
@@ -104,7 +106,7 @@
|
|
|
104
106
|
// 之所以需要这么做的原因是,比如父组件传了color为红色,那么需要另外的三个边为浅红色
|
|
105
107
|
// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝,导致效果没有那么细腻良好)
|
|
106
108
|
otherBorderColor() {
|
|
107
|
-
const lightColor =
|
|
109
|
+
const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
|
|
108
110
|
if (this.mode === 'circle') {
|
|
109
111
|
return this.inactiveColor ? this.inactiveColor : lightColor
|
|
110
112
|
} else {
|
|
@@ -129,6 +131,8 @@
|
|
|
129
131
|
this.init()
|
|
130
132
|
},
|
|
131
133
|
methods: {
|
|
134
|
+
addUnit,
|
|
135
|
+
addStyle,
|
|
132
136
|
init() {
|
|
133
137
|
setTimeout(() => {
|
|
134
138
|
// #ifdef APP-NVUE
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
class="u-loading-page__warpper__loading-icon__img"
|
|
21
21
|
mode="widthFit"
|
|
22
22
|
:style="{
|
|
23
|
-
width:
|
|
24
|
-
height:
|
|
23
|
+
width: addUnit(iconSize),
|
|
24
|
+
height: addUnit(iconSize)
|
|
25
25
|
}"
|
|
26
26
|
></image>
|
|
27
27
|
<u-loading-icon
|
|
28
28
|
v-else
|
|
29
29
|
:mode="loadingMode"
|
|
30
|
-
:size="
|
|
30
|
+
:size="addUnit(iconSize)"
|
|
31
31
|
:color="loadingColor"
|
|
32
32
|
></u-loading-icon>
|
|
33
33
|
</view>
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<text
|
|
36
36
|
class="u-loading-page__warpper__text"
|
|
37
37
|
:style="{
|
|
38
|
-
fontSize:
|
|
38
|
+
fontSize: addUnit(fontSize),
|
|
39
39
|
color: color,
|
|
40
40
|
}"
|
|
41
41
|
>{{ loadingText }}</text
|
|
@@ -48,8 +48,9 @@
|
|
|
48
48
|
|
|
49
49
|
<script>
|
|
50
50
|
import props from "./props.js";
|
|
51
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
52
|
-
import mixin from '../../libs/mixin/mixin
|
|
51
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
52
|
+
import mixin from '../../libs/mixin/mixin';
|
|
53
|
+
import { addUnit } from '../../libs/function/index';
|
|
53
54
|
/**
|
|
54
55
|
* loadingPage 加载动画
|
|
55
56
|
* @description 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
|
|
@@ -72,7 +73,9 @@ export default {
|
|
|
72
73
|
data() {
|
|
73
74
|
return {};
|
|
74
75
|
},
|
|
75
|
-
methods: {
|
|
76
|
+
methods: {
|
|
77
|
+
addUnit
|
|
78
|
+
}
|
|
76
79
|
};
|
|
77
80
|
</script>
|
|
78
81
|
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<view
|
|
3
3
|
class="u-loadmore"
|
|
4
4
|
:style="[
|
|
5
|
-
|
|
5
|
+
addStyle(customStyle),
|
|
6
6
|
{
|
|
7
7
|
backgroundColor: bgColor,
|
|
8
|
-
marginBottom:
|
|
9
|
-
marginTop:
|
|
10
|
-
height:
|
|
8
|
+
marginBottom: addUnit(marginBottom),
|
|
9
|
+
marginTop: addUnit(marginTop),
|
|
10
|
+
height: addUnit(height),
|
|
11
11
|
},
|
|
12
12
|
]"
|
|
13
13
|
>
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
</template>
|
|
53
53
|
|
|
54
54
|
<script>
|
|
55
|
-
import props from './props
|
|
56
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
57
|
-
import mixin from '../../libs/mixin/mixin
|
|
58
|
-
|
|
55
|
+
import props from './props';
|
|
56
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
57
|
+
import mixin from '../../libs/mixin/mixin';
|
|
58
|
+
import { addUnit, addStyle } from '../../libs/function/index';
|
|
59
59
|
/**
|
|
60
60
|
* loadmore 加载更多
|
|
61
61
|
* @description 此组件一般用于标识页面底部加载数据时的状态。
|
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
loadTextStyle() {
|
|
96
96
|
return {
|
|
97
97
|
color: this.color,
|
|
98
|
-
fontSize:
|
|
99
|
-
lineHeight:
|
|
98
|
+
fontSize: addUnit(this.fontSize),
|
|
99
|
+
lineHeight: addUnit(this.fontSize),
|
|
100
100
|
backgroundColor: this.bgColor,
|
|
101
101
|
}
|
|
102
102
|
},
|
|
@@ -112,6 +112,8 @@
|
|
|
112
112
|
},
|
|
113
113
|
emits: ["loadmore"],
|
|
114
114
|
methods: {
|
|
115
|
+
addStyle,
|
|
116
|
+
addUnit,
|
|
115
117
|
loadMore() {
|
|
116
118
|
// 只有在“加载更多”的状态下才发送点击事件,内容不满一屏时无法触发底部上拉事件,所以需要点击来触发
|
|
117
119
|
if (this.status == 'loadmore') this.$emit('loadmore');
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
:customStyle="{
|
|
7
7
|
borderRadius: '6px',
|
|
8
8
|
overflow: 'hidden',
|
|
9
|
-
marginTop: `-${
|
|
9
|
+
marginTop: `-${addUnit(negativeTop)}`
|
|
10
10
|
}"
|
|
11
11
|
:closeOnClickOverlay="closeOnClickOverlay"
|
|
12
12
|
:safeAreaInsetBottom="false"
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<view
|
|
17
17
|
class="u-modal"
|
|
18
18
|
:style="{
|
|
19
|
-
width:
|
|
19
|
+
width: addUnit(width),
|
|
20
20
|
}"
|
|
21
21
|
>
|
|
22
22
|
<text
|
|
@@ -90,9 +90,10 @@
|
|
|
90
90
|
</template>
|
|
91
91
|
|
|
92
92
|
<script>
|
|
93
|
-
import props from './props
|
|
94
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
95
|
-
import mixin from '../../libs/mixin/mixin
|
|
93
|
+
import props from './props';
|
|
94
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
95
|
+
import mixin from '../../libs/mixin/mixin';
|
|
96
|
+
import { addUnit } from '../../libs/function/index';
|
|
96
97
|
/**
|
|
97
98
|
* Modal 模态框
|
|
98
99
|
* @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
|
|
@@ -135,6 +136,7 @@
|
|
|
135
136
|
},
|
|
136
137
|
emits: ["confirm", "cancel", "close"],
|
|
137
138
|
methods: {
|
|
139
|
+
addUnit,
|
|
138
140
|
// 点击确定按钮
|
|
139
141
|
confirmHandler() {
|
|
140
142
|
// 如果配置了异步关闭,将按钮值为loading状态
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
class="u-navbar__placeholder"
|
|
5
5
|
v-if="fixed && placeholder"
|
|
6
6
|
:style="{
|
|
7
|
-
height:
|
|
7
|
+
height: addUnit(getPx(height) + sys().statusBarHeight,'px'),
|
|
8
8
|
}"
|
|
9
9
|
></view>
|
|
10
10
|
<view :class="[fixed && 'u-navbar--fixed']">
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
class="u-navbar__content"
|
|
17
17
|
:class="[border && 'u-border-bottom']"
|
|
18
18
|
:style="{
|
|
19
|
-
height:
|
|
19
|
+
height: addUnit(height),
|
|
20
20
|
backgroundColor: bgColor,
|
|
21
21
|
}"
|
|
22
22
|
>
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
<text
|
|
47
47
|
class="u-line-1 u-navbar__content__title"
|
|
48
48
|
:style="[{
|
|
49
|
-
width:
|
|
50
|
-
},
|
|
49
|
+
width: addUnit(titleWidth),
|
|
50
|
+
}, addStyle(titleStyle)]"
|
|
51
51
|
>{{ title }}</text>
|
|
52
52
|
</slot>
|
|
53
53
|
<view
|
|
@@ -73,9 +73,10 @@
|
|
|
73
73
|
</template>
|
|
74
74
|
|
|
75
75
|
<script>
|
|
76
|
-
import props from './props
|
|
77
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
78
|
-
import mixin from '../../libs/mixin/mixin
|
|
76
|
+
import props from './props';
|
|
77
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
78
|
+
import mixin from '../../libs/mixin/mixin';
|
|
79
|
+
import { addUnit, addStyle, getPx, sys } from '../../libs/function/index';
|
|
79
80
|
/**
|
|
80
81
|
* Navbar 自定义导航栏
|
|
81
82
|
* @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uni-app带的导航栏。
|
|
@@ -109,6 +110,10 @@
|
|
|
109
110
|
},
|
|
110
111
|
emits: ["leftClick", "rightClick"],
|
|
111
112
|
methods: {
|
|
113
|
+
addStyle,
|
|
114
|
+
addUnit,
|
|
115
|
+
sys,
|
|
116
|
+
getPx,
|
|
112
117
|
// 点击左侧区域
|
|
113
118
|
leftClick() {
|
|
114
119
|
// 如果配置了autoBack,自动返回上一页
|
|
@@ -43,10 +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
|
|
49
|
-
|
|
46
|
+
import props from './props';
|
|
47
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
48
|
+
import mixin from '../../libs/mixin/mixin';
|
|
49
|
+
import { toast } from '../../libs/function/index';
|
|
50
50
|
/**
|
|
51
51
|
* noNetwork 无网络提示
|
|
52
52
|
* @description 该组件无需任何配置,引入即可,内部自动处理所有功能和事件。
|
|
@@ -94,10 +94,10 @@
|
|
|
94
94
|
this.networkType = res.networkType
|
|
95
95
|
this.emitEvent(this.networkType)
|
|
96
96
|
if (res.networkType == 'none') {
|
|
97
|
-
|
|
97
|
+
toast('无网络连接')
|
|
98
98
|
this.isConnected = false
|
|
99
99
|
} else {
|
|
100
|
-
|
|
100
|
+
toast('网络已连接')
|
|
101
101
|
this.isConnected = true
|
|
102
102
|
}
|
|
103
103
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
v-if="show"
|
|
5
5
|
:style="[{
|
|
6
6
|
backgroundColor: bgColor
|
|
7
|
-
},
|
|
7
|
+
}, addStyle(customStyle)]"
|
|
8
8
|
>
|
|
9
9
|
<template v-if="direction === 'column' || (direction === 'row' && step)">
|
|
10
10
|
<u-column-notice
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
</view>
|
|
40
40
|
</template>
|
|
41
41
|
<script>
|
|
42
|
-
import props from './props
|
|
43
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
44
|
-
import mixin from '../../libs/mixin/mixin
|
|
45
|
-
|
|
42
|
+
import props from './props';
|
|
43
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
44
|
+
import mixin from '../../libs/mixin/mixin';
|
|
45
|
+
import { addStyle } from '../../libs/function/index';
|
|
46
46
|
/**
|
|
47
47
|
* noticeBar 滚动通知
|
|
48
48
|
* @description 该组件用于滚动通告场景,有多种模式可供选择
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
},
|
|
77
77
|
emits: ["click", "close"],
|
|
78
78
|
methods: {
|
|
79
|
+
addStyle,
|
|
79
80
|
// 点击通告栏
|
|
80
81
|
click(index) {
|
|
81
82
|
this.$emit('click', index)
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<view
|
|
8
8
|
class="u-notify"
|
|
9
9
|
:class="[`u-notify--${tmpConfig.type}`]"
|
|
10
|
-
:style="[backgroundColor,
|
|
10
|
+
:style="[backgroundColor, addStyle(customStyle)]"
|
|
11
11
|
>
|
|
12
12
|
<u-status-bar v-if="tmpConfig.safeAreaInsetTop"></u-status-bar>
|
|
13
13
|
<view class="u-notify__warpper">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<text
|
|
24
24
|
class="u-notify__warpper__text"
|
|
25
25
|
:style="{
|
|
26
|
-
fontSize:
|
|
26
|
+
fontSize: addUnit(tmpConfig.fontSize),
|
|
27
27
|
color: tmpConfig.color
|
|
28
28
|
}"
|
|
29
29
|
>{{ tmpConfig.message }}</text>
|
|
@@ -33,9 +33,11 @@
|
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
35
|
<script>
|
|
36
|
-
import props from './props
|
|
37
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
38
|
-
import mixin from '../../libs/mixin/mixin
|
|
36
|
+
import props from './props';
|
|
37
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
38
|
+
import mixin from '../../libs/mixin/mixin';
|
|
39
|
+
import defProps from '../../libs/config/props.js';
|
|
40
|
+
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
|
|
39
41
|
/**
|
|
40
42
|
* notify 顶部提示
|
|
41
43
|
* @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景
|
|
@@ -63,21 +65,21 @@
|
|
|
63
65
|
timer: null,
|
|
64
66
|
config: {
|
|
65
67
|
// 到顶部的距离
|
|
66
|
-
top:
|
|
68
|
+
top: defProps.notify.top,
|
|
67
69
|
// type主题,primary,success,warning,error
|
|
68
|
-
type:
|
|
70
|
+
type: defProps.notify.type,
|
|
69
71
|
// 字体颜色
|
|
70
|
-
color:
|
|
72
|
+
color: defProps.notify.color,
|
|
71
73
|
// 背景颜色
|
|
72
|
-
bgColor:
|
|
74
|
+
bgColor: defProps.notify.bgColor,
|
|
73
75
|
// 展示的文字内容
|
|
74
|
-
message:
|
|
76
|
+
message: defProps.notify.message,
|
|
75
77
|
// 展示时长,为0时不消失,单位ms
|
|
76
|
-
duration:
|
|
78
|
+
duration: defProps.notify.duration,
|
|
77
79
|
// 字体大小
|
|
78
|
-
fontSize:
|
|
80
|
+
fontSize: defProps.notify.fontSize,
|
|
79
81
|
// 是否留出顶部安全距离(状态栏高度)
|
|
80
|
-
safeAreaInsetTop:
|
|
82
|
+
safeAreaInsetTop: defProps.notify.safeAreaInsetTop
|
|
81
83
|
},
|
|
82
84
|
// 合并后的配置,避免多次调用组件后,可能会复用之前使用的配置参数
|
|
83
85
|
tmpConfig: {}
|
|
@@ -94,7 +96,7 @@
|
|
|
94
96
|
// #endif
|
|
95
97
|
}
|
|
96
98
|
const style = {
|
|
97
|
-
top:
|
|
99
|
+
top: addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
|
|
98
100
|
// 因为组件底层为u-transition组件,必须将其设置为fixed定位
|
|
99
101
|
// 让其出现在导航栏底部
|
|
100
102
|
position: 'fixed',
|
|
@@ -135,9 +137,11 @@
|
|
|
135
137
|
})
|
|
136
138
|
},
|
|
137
139
|
methods: {
|
|
140
|
+
addStyle,
|
|
141
|
+
addUnit,
|
|
138
142
|
show(options) {
|
|
139
143
|
// 不将结果合并到this.config变量,避免多次调用u-toast,前后的配置造成混乱
|
|
140
|
-
this.tmpConfig =
|
|
144
|
+
this.tmpConfig = deepMerge(this.config, options)
|
|
141
145
|
// 任何定时器初始化之前,都要执行清除操作,否则可能会造成混乱
|
|
142
146
|
this.clearTimer()
|
|
143
147
|
this.open = true
|
|
@@ -91,9 +91,10 @@
|
|
|
91
91
|
</template>
|
|
92
92
|
|
|
93
93
|
<script>
|
|
94
|
-
import props from './props
|
|
95
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
96
|
-
import mixin from '../../libs/mixin/mixin
|
|
94
|
+
import props from './props';
|
|
95
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
96
|
+
import mixin from '../../libs/mixin/mixin';
|
|
97
|
+
import { getPx, addUnit } from '../../libs/function/index';
|
|
97
98
|
/**
|
|
98
99
|
* numberBox 步进器
|
|
99
100
|
* @description 该组件一般用于商城购物选择物品数量的场景。
|
|
@@ -165,14 +166,14 @@
|
|
|
165
166
|
computed: {
|
|
166
167
|
getCursorSpacing() {
|
|
167
168
|
// 判断传入的单位,如果为px单位,需要转成px
|
|
168
|
-
return
|
|
169
|
+
return getPx(this.cursorSpacing)
|
|
169
170
|
},
|
|
170
171
|
// 按钮的样式
|
|
171
172
|
buttonStyle() {
|
|
172
173
|
return (type) => {
|
|
173
174
|
const style = {
|
|
174
175
|
backgroundColor: this.bgColor,
|
|
175
|
-
height:
|
|
176
|
+
height: addUnit(this.buttonSize),
|
|
176
177
|
color: this.color
|
|
177
178
|
}
|
|
178
179
|
if (this.isDisabled(type)) {
|
|
@@ -187,8 +188,8 @@
|
|
|
187
188
|
const style = {
|
|
188
189
|
color: this.color,
|
|
189
190
|
backgroundColor: this.bgColor,
|
|
190
|
-
height:
|
|
191
|
-
width:
|
|
191
|
+
height: addUnit(this.buttonSize),
|
|
192
|
+
width: addUnit(this.inputWidth)
|
|
192
193
|
}
|
|
193
194
|
return style
|
|
194
195
|
},
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
</template>
|
|
40
40
|
|
|
41
41
|
<script>
|
|
42
|
-
import props from './props
|
|
43
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
44
|
-
import mixin from '../../libs/mixin/mixin
|
|
45
|
-
|
|
42
|
+
import props from './props';
|
|
43
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
44
|
+
import mixin from '../../libs/mixin/mixin';
|
|
45
|
+
import { randomArray } from '../../libs/function/index';
|
|
46
46
|
/**
|
|
47
47
|
* keyboard 键盘组件
|
|
48
48
|
* @description
|
|
@@ -72,19 +72,19 @@
|
|
|
72
72
|
if (!this.random) {
|
|
73
73
|
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
|
|
74
74
|
} else {
|
|
75
|
-
return
|
|
75
|
+
return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
|
|
76
76
|
}
|
|
77
77
|
} else if (!this.dotDisabled && this.mode == 'number') {
|
|
78
78
|
if (!this.random) {
|
|
79
79
|
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
|
|
80
80
|
} else {
|
|
81
|
-
return
|
|
81
|
+
return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
|
|
82
82
|
}
|
|
83
83
|
} else if (this.mode == 'card') {
|
|
84
84
|
if (!this.random) {
|
|
85
85
|
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
|
|
86
86
|
} else {
|
|
87
|
-
return
|
|
87
|
+
return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
},
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script>
|
|
14
|
-
import props from './props
|
|
15
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
16
|
-
import mixin from '../../libs/mixin/mixin
|
|
17
|
-
|
|
14
|
+
import props from './props';
|
|
15
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
16
|
+
import mixin from '../../libs/mixin/mixin';
|
|
17
|
+
import { addStyle, deepMerge } from '../../libs/function/index';
|
|
18
18
|
/**
|
|
19
19
|
* overlay 遮罩
|
|
20
20
|
* @description 创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
bottom: 0,
|
|
42
42
|
'background-color': `rgba(0, 0, 0, ${this.opacity})`
|
|
43
43
|
}
|
|
44
|
-
return
|
|
44
|
+
return deepMerge(style, addStyle(this.customStyle))
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
emits: ["click"],
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
></u-toolbar>
|
|
18
18
|
<picker-view
|
|
19
19
|
class="u-picker__view"
|
|
20
|
-
:indicatorStyle="`height: ${
|
|
20
|
+
:indicatorStyle="`height: ${addUnit(itemHeight)}`"
|
|
21
21
|
:value="innerIndex"
|
|
22
22
|
:immediateChange="true"
|
|
23
23
|
:style="{
|
|
24
|
-
height: `${
|
|
24
|
+
height: `${addUnit(visibleItemCount * itemHeight)}`
|
|
25
25
|
}"
|
|
26
26
|
@change="changeHandler"
|
|
27
27
|
>
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
class="u-picker__view__column"
|
|
32
32
|
>
|
|
33
33
|
<view
|
|
34
|
-
v-if="
|
|
34
|
+
v-if="testArray(item)"
|
|
35
35
|
class="u-picker__view__column__item u-line-1"
|
|
36
36
|
v-for="(item1, index1) in item"
|
|
37
37
|
:key="index1"
|
|
38
38
|
:style="{
|
|
39
|
-
height:
|
|
40
|
-
lineHeight:
|
|
39
|
+
height: addUnit(itemHeight),
|
|
40
|
+
lineHeight: addUnit(itemHeight),
|
|
41
41
|
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
|
|
42
42
|
display: 'block'
|
|
43
43
|
}"
|
|
@@ -78,9 +78,11 @@
|
|
|
78
78
|
* @event {Function} change 当选择值变化时触发
|
|
79
79
|
* @event {Function} confirm 点击确定按钮,返回当前选择的值
|
|
80
80
|
*/
|
|
81
|
-
import props from './props
|
|
82
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
83
|
-
import mixin from '../../libs/mixin/mixin
|
|
81
|
+
import props from './props';
|
|
82
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
83
|
+
import mixin from '../../libs/mixin/mixin';
|
|
84
|
+
import { addUnit, deepClone, sleep } from '../../libs/function/index';
|
|
85
|
+
import test from '../../libs/function/test';
|
|
84
86
|
export default {
|
|
85
87
|
name: 'u-picker',
|
|
86
88
|
mixins: [mpMixin, mixin, props],
|
|
@@ -115,9 +117,11 @@ export default {
|
|
|
115
117
|
},
|
|
116
118
|
emits: ['close', 'cancel', 'confirm', 'change'],
|
|
117
119
|
methods: {
|
|
120
|
+
addUnit,
|
|
121
|
+
testArray: test.array,
|
|
118
122
|
// 获取item需要显示的文字,判别为对象还是文本
|
|
119
123
|
getItemText(item) {
|
|
120
|
-
if (
|
|
124
|
+
if (test.object(item)) {
|
|
121
125
|
return item[this.keyName]
|
|
122
126
|
} else {
|
|
123
127
|
return item
|
|
@@ -180,7 +184,7 @@ export default {
|
|
|
180
184
|
},
|
|
181
185
|
// 设置index索引,此方法可被外部调用设置
|
|
182
186
|
setIndexs(index, setLastIndex) {
|
|
183
|
-
this.innerIndex =
|
|
187
|
+
this.innerIndex = deepClone(index)
|
|
184
188
|
if (setLastIndex) {
|
|
185
189
|
this.setLastIndex(index)
|
|
186
190
|
}
|
|
@@ -189,7 +193,7 @@ export default {
|
|
|
189
193
|
setLastIndex(index) {
|
|
190
194
|
// 当能进入此方法,意味着当前设置的各列默认索引,即为“上一次”的选中值,需要记录,是因为changeHandler中
|
|
191
195
|
// 需要拿前后的变化值进行对比,得出当前发生改变的是哪一列
|
|
192
|
-
this.lastIndex =
|
|
196
|
+
this.lastIndex = deepClone(index)
|
|
193
197
|
},
|
|
194
198
|
// 设置对应列选项的所有值
|
|
195
199
|
setColumnValues(columnIndex, values) {
|
|
@@ -198,7 +202,7 @@ export default {
|
|
|
198
202
|
// 替换完成之后将修改列之后的已选值置空
|
|
199
203
|
this.setLastIndex(this.innerIndex.slice(0, columnIndex))
|
|
200
204
|
// 拷贝一份原有的innerIndex做临时变量,将大于当前变化列的所有的列的默认索引设置为0
|
|
201
|
-
let tmpIndex =
|
|
205
|
+
let tmpIndex = deepClone(this.innerIndex)
|
|
202
206
|
for (let i = 0; i < this.innerColumns.length; i++) {
|
|
203
207
|
if (i > this.columnIndex) {
|
|
204
208
|
tmpIndex[i] = 0
|
|
@@ -212,14 +216,14 @@ export default {
|
|
|
212
216
|
// 进行同步阻塞,因为外部得到change事件之后,可能需要执行setColumnValues更新列的值
|
|
213
217
|
// 索引如果在外部change的回调中调用getColumnValues的话,可能无法得到变更后的列值,这里进行一定延时,保证值的准确性
|
|
214
218
|
(async () => {
|
|
215
|
-
await
|
|
219
|
+
await sleep()
|
|
216
220
|
})()
|
|
217
221
|
return this.innerColumns[columnIndex]
|
|
218
222
|
},
|
|
219
223
|
// 设置整体各列的columns的值
|
|
220
224
|
setColumns(columns) {
|
|
221
225
|
// console.log(columns)
|
|
222
|
-
this.innerColumns =
|
|
226
|
+
this.innerColumns = deepClone(columns)
|
|
223
227
|
// 如果在设置各列数据时,没有被设置默认的各列索引defaultIndex,那么用0去填充它,数组长度为列的数量
|
|
224
228
|
if (this.innerIndex.length === 0) {
|
|
225
229
|
this.innerIndex = new Array(columns.length).fill(0)
|
|
@@ -234,7 +238,7 @@ export default {
|
|
|
234
238
|
// 进行同步阻塞,因为外部得到change事件之后,可能需要执行setColumnValues更新列的值
|
|
235
239
|
// 索引如果在外部change的回调中调用getValues的话,可能无法得到变更后的列值,这里进行一定延时,保证值的准确性
|
|
236
240
|
(async () => {
|
|
237
|
-
await
|
|
241
|
+
await sleep()
|
|
238
242
|
})()
|
|
239
243
|
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
|
240
244
|
}
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
</template>
|
|
8
8
|
|
|
9
9
|
<script>
|
|
10
|
-
import props from './props
|
|
11
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
12
|
-
import mixin from '../../libs/mixin/mixin
|
|
10
|
+
import props from './props';
|
|
11
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
12
|
+
import mixin from '../../libs/mixin/mixin';
|
|
13
13
|
/**
|
|
14
14
|
* PickerColumn
|
|
15
15
|
* @description
|