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
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
v-if="isImg"
|
|
10
10
|
:src="name"
|
|
11
11
|
:mode="imgMode"
|
|
12
|
-
:style="[imgStyle,
|
|
12
|
+
:style="[imgStyle, addStyle(customStyle)]"
|
|
13
13
|
></image>
|
|
14
14
|
<text
|
|
15
15
|
v-else
|
|
16
16
|
class="u-icon__icon"
|
|
17
17
|
:class="uClasses"
|
|
18
|
-
:style="[iconStyle,
|
|
18
|
+
:style="[iconStyle, addStyle(customStyle)]"
|
|
19
19
|
:hover-class="hoverClass"
|
|
20
20
|
>{{icon}}</text>
|
|
21
21
|
<!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
class="u-icon__label"
|
|
25
25
|
:style="{
|
|
26
26
|
color: labelColor,
|
|
27
|
-
fontSize:
|
|
28
|
-
marginLeft: labelPos == 'right' ?
|
|
29
|
-
marginTop: labelPos == 'bottom' ?
|
|
30
|
-
marginRight: labelPos == 'left' ?
|
|
31
|
-
marginBottom: labelPos == 'top' ?
|
|
27
|
+
fontSize: addUnit(labelSize),
|
|
28
|
+
marginLeft: labelPos == 'right' ? addUnit(space) : 0,
|
|
29
|
+
marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
|
|
30
|
+
marginRight: labelPos == 'left' ? addUnit(space) : 0,
|
|
31
|
+
marginBottom: labelPos == 'top' ? addUnit(space) : 0,
|
|
32
32
|
}"
|
|
33
33
|
>{{ label }}</text>
|
|
34
34
|
</view>
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
|
|
49
49
|
// 引入图标名称,已经对应的unicode
|
|
50
50
|
import icons from './icons'
|
|
51
|
-
|
|
52
|
-
import
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
|
|
51
|
+
import props from './props';
|
|
52
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
53
|
+
import mixin from '../../libs/mixin/mixin';
|
|
54
|
+
import { addUnit, addStyle } from '../../libs/function/index';
|
|
55
|
+
import config from '../../libs/config/config';
|
|
56
56
|
/**
|
|
57
57
|
* icon 图标
|
|
58
58
|
* @description 基于字体的图标集,包含了大多数常见场景的图标。
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
classes.push(this.customPrefix)
|
|
101
101
|
}
|
|
102
102
|
// 主题色,通过类配置
|
|
103
|
-
if (this.color &&
|
|
103
|
+
if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
|
104
104
|
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
|
|
105
105
|
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
|
|
106
106
|
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
iconStyle() {
|
|
112
112
|
let style = {}
|
|
113
113
|
style = {
|
|
114
|
-
fontSize:
|
|
115
|
-
lineHeight:
|
|
114
|
+
fontSize: addUnit(this.size),
|
|
115
|
+
lineHeight: addUnit(this.size),
|
|
116
116
|
fontWeight: this.bold ? 'bold' : 'normal',
|
|
117
117
|
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
|
|
118
|
-
top:
|
|
118
|
+
top: addUnit(this.top)
|
|
119
119
|
}
|
|
120
120
|
// 非主题色值时,才当作颜色值
|
|
121
|
-
if (this.color && !
|
|
121
|
+
if (this.color && !config.type.includes(this.color)) style.color = this.color
|
|
122
122
|
|
|
123
123
|
return style
|
|
124
124
|
},
|
|
@@ -129,8 +129,8 @@
|
|
|
129
129
|
imgStyle() {
|
|
130
130
|
let style = {}
|
|
131
131
|
// 如果设置width和height属性,则优先使用,否则使用size属性
|
|
132
|
-
style.width = this.width ?
|
|
133
|
-
style.height = this.height ?
|
|
132
|
+
style.width = this.width ? addUnit(this.width) : addUnit(this.size)
|
|
133
|
+
style.height = this.height ? addUnit(this.height) : addUnit(this.size)
|
|
134
134
|
return style
|
|
135
135
|
},
|
|
136
136
|
// 通过图标名,查找对应的图标
|
|
@@ -142,6 +142,8 @@
|
|
|
142
142
|
}
|
|
143
143
|
},
|
|
144
144
|
methods: {
|
|
145
|
+
addStyle,
|
|
146
|
+
addUnit,
|
|
145
147
|
clickHandler(e) {
|
|
146
148
|
this.$emit('click', this.index)
|
|
147
149
|
// 是否阻止事件冒泡
|
|
@@ -19,19 +19,19 @@
|
|
|
19
19
|
:lazy-load="lazyLoad"
|
|
20
20
|
class="u-image__image"
|
|
21
21
|
:style="{
|
|
22
|
-
borderRadius: shape == 'circle' ? '10000px' :
|
|
23
|
-
width:
|
|
24
|
-
height:
|
|
22
|
+
borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
|
|
23
|
+
width: addUnit(width),
|
|
24
|
+
height: addUnit(height)
|
|
25
25
|
}"
|
|
26
26
|
></image>
|
|
27
27
|
<view
|
|
28
28
|
v-if="showLoading && loading"
|
|
29
29
|
class="u-image__loading"
|
|
30
30
|
:style="{
|
|
31
|
-
borderRadius: shape == 'circle' ? '50%' :
|
|
31
|
+
borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
|
|
32
32
|
backgroundColor: this.bgColor,
|
|
33
|
-
width:
|
|
34
|
-
height:
|
|
33
|
+
width: addUnit(width),
|
|
34
|
+
height: addUnit(height)
|
|
35
35
|
}"
|
|
36
36
|
>
|
|
37
37
|
<slot name="loading">
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
v-if="showError && isError && !loading"
|
|
47
47
|
class="u-image__error"
|
|
48
48
|
:style="{
|
|
49
|
-
borderRadius: shape == 'circle' ? '50%' :
|
|
50
|
-
width:
|
|
51
|
-
height:
|
|
49
|
+
borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
|
|
50
|
+
width: addUnit(width),
|
|
51
|
+
height: addUnit(height)
|
|
52
52
|
}"
|
|
53
53
|
>
|
|
54
54
|
<slot name="error">
|
|
@@ -64,9 +64,10 @@
|
|
|
64
64
|
</template>
|
|
65
65
|
|
|
66
66
|
<script>
|
|
67
|
-
import props from './props
|
|
68
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
69
|
-
import mixin from '../../libs/mixin/mixin
|
|
67
|
+
import props from './props';
|
|
68
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
69
|
+
import mixin from '../../libs/mixin/mixin';
|
|
70
|
+
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
|
|
70
71
|
/**
|
|
71
72
|
* Image 图片
|
|
72
73
|
* @description 此组件为uni-app的image组件的加强版,在继承了原有功能外,还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
|
|
@@ -131,10 +132,10 @@
|
|
|
131
132
|
wrapStyle() {
|
|
132
133
|
let style = {};
|
|
133
134
|
// 通过调用addUnit()方法,如果有单位,如百分比,px单位等,直接返回,如果是纯粹的数值,则加上rpx单位
|
|
134
|
-
style.width =
|
|
135
|
-
style.height =
|
|
135
|
+
style.width = addUnit(this.width);
|
|
136
|
+
style.height = addUnit(this.height);
|
|
136
137
|
// 如果是显示圆形,设置一个很多的半径值即可
|
|
137
|
-
style.borderRadius = this.shape == 'circle' ? '10000px' :
|
|
138
|
+
style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius)
|
|
138
139
|
// 如果设置圆角,必须要有hidden,否则可能圆角无效
|
|
139
140
|
style.overflow = this.radius > 0 ? 'hidden' : 'visible'
|
|
140
141
|
// if (this.fade) {
|
|
@@ -144,7 +145,7 @@
|
|
|
144
145
|
// style.transitionTimingFunction = 'ease-in-out'
|
|
145
146
|
// style.transitionProperty = 'opacity'
|
|
146
147
|
// }
|
|
147
|
-
return
|
|
148
|
+
return deepMerge(style, addStyle(this.customStyle));
|
|
148
149
|
|
|
149
150
|
}
|
|
150
151
|
},
|
|
@@ -153,6 +154,7 @@
|
|
|
153
154
|
},
|
|
154
155
|
emits: ['click', 'error', 'load'],
|
|
155
156
|
methods: {
|
|
157
|
+
addUnit,
|
|
156
158
|
// 点击图片
|
|
157
159
|
onClick() {
|
|
158
160
|
this.$emit('click')
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
class="u-index-anchor u-border-bottom"
|
|
7
7
|
:ref="`u-index-anchor-${text}`"
|
|
8
8
|
:style="{
|
|
9
|
-
height:
|
|
9
|
+
height: addUnit(height),
|
|
10
10
|
backgroundColor: bgColor
|
|
11
11
|
}"
|
|
12
12
|
>
|
|
13
13
|
<text
|
|
14
14
|
class="u-index-anchor__text"
|
|
15
15
|
:style="{
|
|
16
|
-
fontSize:
|
|
16
|
+
fontSize: addUnit(size),
|
|
17
17
|
color: color
|
|
18
18
|
}"
|
|
19
19
|
>{{ text }}</text>
|
|
@@ -24,9 +24,10 @@
|
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script>
|
|
27
|
-
import props from './props
|
|
28
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
29
|
-
import mixin from '../../libs/mixin/mixin
|
|
27
|
+
import props from './props';
|
|
28
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
29
|
+
import mixin from '../../libs/mixin/mixin';
|
|
30
|
+
import { addUnit, $parent, error } from '../../libs/function/index';
|
|
30
31
|
// #ifdef APP-NVUE
|
|
31
32
|
const dom = uni.requireNativePlugin('dom')
|
|
32
33
|
// #endif
|
|
@@ -52,19 +53,20 @@
|
|
|
52
53
|
this.init()
|
|
53
54
|
},
|
|
54
55
|
methods: {
|
|
56
|
+
addUnit,
|
|
55
57
|
init() {
|
|
56
58
|
// 此处会活动父组件实例,并赋值给实例的parent属性
|
|
57
|
-
const indexList =
|
|
59
|
+
const indexList = $parent.call(this, 'u-index-list')
|
|
58
60
|
if (!indexList) {
|
|
59
|
-
return
|
|
61
|
+
return error('u-index-anchor必须要搭配u-index-list组件使用')
|
|
60
62
|
}
|
|
61
63
|
// 将当前实例放入到u-index-list中
|
|
62
64
|
indexList.anchors.push(this)
|
|
63
|
-
const indexListItem =
|
|
65
|
+
const indexListItem = $parent.call(this, 'u-index-item')
|
|
64
66
|
// #ifndef APP-NVUE
|
|
65
67
|
// 只有在非nvue下,u-index-anchor才是嵌套在u-index-item中的
|
|
66
68
|
if (!indexListItem) {
|
|
67
|
-
return
|
|
69
|
+
return error('u-index-anchor必须要搭配u-index-item组件使用')
|
|
68
70
|
}
|
|
69
71
|
// 设置u-index-item的id为anchor的text标识符,因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
|
|
70
72
|
indexListItem.id = this.text.charCodeAt(0)
|
|
@@ -15,9 +15,10 @@
|
|
|
15
15
|
</template>
|
|
16
16
|
|
|
17
17
|
<script>
|
|
18
|
-
import props from './props
|
|
19
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
20
|
-
import mixin from '../../libs/mixin/mixin
|
|
18
|
+
import props from './props';
|
|
19
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
20
|
+
import mixin from '../../libs/mixin/mixin';
|
|
21
|
+
import { sleep, error } from '../../libs/function/index';
|
|
21
22
|
// #ifdef APP-NVUE
|
|
22
23
|
// 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
|
|
23
24
|
const dom = uni.requireNativePlugin('dom')
|
|
@@ -53,9 +54,9 @@
|
|
|
53
54
|
// 此处会活动父组件实例,并赋值给实例的parent属性
|
|
54
55
|
this.getParentData('u-index-list')
|
|
55
56
|
if (!this.parent) {
|
|
56
|
-
return
|
|
57
|
+
return error('u-index-item必须要搭配u-index-list组件使用')
|
|
57
58
|
}
|
|
58
|
-
|
|
59
|
+
sleep().then(() =>{
|
|
59
60
|
this.getIndexItemRect().then(size => {
|
|
60
61
|
// 由于对象的引用特性,此处会同时生效到父组件的children数组的本实例的top属性中,供父组件判断读取
|
|
61
62
|
this.top = Math.ceil(size.top)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
enable-back-to-top
|
|
7
7
|
:offset-accuracy="1"
|
|
8
8
|
:style="{
|
|
9
|
-
maxHeight:
|
|
9
|
+
maxHeight: addUnit(scrollViewHeight)
|
|
10
10
|
}"
|
|
11
11
|
@scroll="scrollHandler"
|
|
12
12
|
ref="uList"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
:scrollIntoView="scrollIntoView"
|
|
30
30
|
:offset-accuracy="1"
|
|
31
31
|
:style="{
|
|
32
|
-
maxHeight:
|
|
32
|
+
maxHeight: addUnit(scrollViewHeight)
|
|
33
33
|
}"
|
|
34
34
|
scroll-y
|
|
35
35
|
@scroll="scrollHandler"
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
<view
|
|
48
48
|
class="u-index-list__letter"
|
|
49
49
|
ref="u-index-list__letter"
|
|
50
|
-
:style="{ top:
|
|
50
|
+
:style="{ top: addUnit(letterInfo.top || 100) }"
|
|
51
51
|
@touchstart.prevent="touchStart"
|
|
52
52
|
@touchmove.prevent="touchMove"
|
|
53
53
|
@touchend.prevent="touchEnd"
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
:customStyle="{
|
|
74
74
|
position: 'fixed',
|
|
75
75
|
right: '50px',
|
|
76
|
-
top:
|
|
76
|
+
top: addUnit(indicatorTop),
|
|
77
77
|
zIndex: 2
|
|
78
78
|
}"
|
|
79
79
|
>
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
class="u-index-list__indicator"
|
|
82
82
|
:class="['u-index-list__indicator--show']"
|
|
83
83
|
:style="{
|
|
84
|
-
height:
|
|
85
|
-
width:
|
|
84
|
+
height: addUnit(indicatorHeight),
|
|
85
|
+
width: addUnit(indicatorHeight)
|
|
86
86
|
}"
|
|
87
87
|
>
|
|
88
88
|
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
|
|
@@ -100,9 +100,10 @@
|
|
|
100
100
|
}
|
|
101
101
|
return indexList;
|
|
102
102
|
}
|
|
103
|
-
import props from './props
|
|
104
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
105
|
-
import mixin from '../../libs/mixin/mixin
|
|
103
|
+
import props from './props';
|
|
104
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
105
|
+
import mixin from '../../libs/mixin/mixin';
|
|
106
|
+
import { addUnit, sys, sleep, getPx } from '../../libs/function/index';
|
|
106
107
|
// #ifdef APP-NVUE
|
|
107
108
|
// 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
|
|
108
109
|
const dom = uni.requireNativePlugin('dom')
|
|
@@ -148,7 +149,7 @@
|
|
|
148
149
|
// scroll-view的高度
|
|
149
150
|
scrollViewHeight: 0,
|
|
150
151
|
// 系统信息
|
|
151
|
-
sys:
|
|
152
|
+
sys: sys(),
|
|
152
153
|
scrolling: false,
|
|
153
154
|
scrollIntoView: '',
|
|
154
155
|
}
|
|
@@ -172,7 +173,7 @@
|
|
|
172
173
|
uIndexList: {
|
|
173
174
|
immediate: true,
|
|
174
175
|
handler() {
|
|
175
|
-
|
|
176
|
+
sleep().then(() => {
|
|
176
177
|
this.setIndexListLetterInfo()
|
|
177
178
|
})
|
|
178
179
|
}
|
|
@@ -187,11 +188,12 @@
|
|
|
187
188
|
this.setIndexListLetterInfo()
|
|
188
189
|
},
|
|
189
190
|
methods: {
|
|
191
|
+
addUnit,
|
|
190
192
|
init() {
|
|
191
193
|
// 设置列表的高度为整个屏幕的高度
|
|
192
194
|
//减去this.customNavHeight,并将this.scrollViewHeight设置为maxHeight
|
|
193
195
|
//解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时,还能滚动
|
|
194
|
-
let customNavHeight =
|
|
196
|
+
let customNavHeight = getPx(this.customNavHeight)
|
|
195
197
|
this.scrollViewHeight = this.sys.windowHeight - customNavHeight
|
|
196
198
|
},
|
|
197
199
|
// 索引列表被触摸
|
|
@@ -226,7 +228,7 @@
|
|
|
226
228
|
// 触摸结束
|
|
227
229
|
touchEnd(e) {
|
|
228
230
|
// 延时一定时间后再隐藏指示器,为了让用户看的更直观,同时也是为了消除快速切换u-transition的show带来的影响
|
|
229
|
-
|
|
231
|
+
sleep(300).then(() => {
|
|
230
232
|
this.touching = false
|
|
231
233
|
})
|
|
232
234
|
},
|
|
@@ -254,7 +256,7 @@
|
|
|
254
256
|
const {
|
|
255
257
|
height
|
|
256
258
|
} = size
|
|
257
|
-
const sys =
|
|
259
|
+
const sys = sys()
|
|
258
260
|
const windowHeight = sys.windowHeight
|
|
259
261
|
let customNavHeight = 0
|
|
260
262
|
// 消除各端导航栏非原生和原生导致的差异,让索引列表字母对屏幕垂直居中
|
|
@@ -267,7 +269,7 @@
|
|
|
267
269
|
customNavHeight = -(sys.statusBarHeight + 44)
|
|
268
270
|
// #endif
|
|
269
271
|
} else {
|
|
270
|
-
customNavHeight =
|
|
272
|
+
customNavHeight = getPx(this.customNavHeight)
|
|
271
273
|
}
|
|
272
274
|
this.letterInfo = {
|
|
273
275
|
height,
|
|
@@ -286,7 +288,7 @@
|
|
|
286
288
|
} = this.letterInfo
|
|
287
289
|
// 对H5的pageY进行修正,这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
|
|
288
290
|
// #ifdef H5
|
|
289
|
-
pageY +=
|
|
291
|
+
pageY += sys().windowTop
|
|
290
292
|
// #endif
|
|
291
293
|
// 对第一和最后一个字母做边界处理,因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
|
|
292
294
|
if (pageY < top) {
|
|
@@ -311,7 +313,7 @@
|
|
|
311
313
|
// #ifdef MP-WEIXIN
|
|
312
314
|
// 微信小程序下,scroll-view的scroll-into-view属性无法对slot中的内容的id生效,只能通过设置scrollTop的形式去移动滚动条
|
|
313
315
|
const customNavHeight = this.customNavHeight
|
|
314
|
-
this.scrollTop = this.children[currentIndex].top -
|
|
316
|
+
this.scrollTop = this.children[currentIndex].top - getPx(customNavHeight)
|
|
315
317
|
// #endif
|
|
316
318
|
// #ifdef APP-NVUE
|
|
317
319
|
// 在nvue中,由于cell和header为同级元素,所以实际是需要对header(anchor)进行偏移
|
|
@@ -335,7 +337,7 @@
|
|
|
335
337
|
if (this.touching || this.scrolling) return
|
|
336
338
|
// 每过一定时间取样一次,减少资源损耗以及可能带来的卡顿
|
|
337
339
|
this.scrolling = true
|
|
338
|
-
|
|
340
|
+
sleep(10).then(() => {
|
|
339
341
|
this.scrolling = false
|
|
340
342
|
})
|
|
341
343
|
let scrollTop = 0
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
@focus="onFocus"
|
|
45
45
|
@confirm="onConfirm"
|
|
46
46
|
@keyboardheightchange="onkeyboardheightchange"
|
|
47
|
-
@change="onInput"
|
|
48
47
|
/>
|
|
49
48
|
</view>
|
|
50
49
|
<view
|
|
@@ -77,8 +76,9 @@
|
|
|
77
76
|
|
|
78
77
|
<script>
|
|
79
78
|
import props from "./props.js";
|
|
80
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
81
|
-
import mixin from '../../libs/mixin/mixin
|
|
79
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
80
|
+
import mixin from '../../libs/mixin/mixin';
|
|
81
|
+
import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '../../libs/function/index';
|
|
82
82
|
/**
|
|
83
83
|
* Input 输入框
|
|
84
84
|
* @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
|
|
@@ -126,6 +126,8 @@ export default {
|
|
|
126
126
|
mixins: [mpMixin, mixin, props],
|
|
127
127
|
data() {
|
|
128
128
|
return {
|
|
129
|
+
// 清除操作
|
|
130
|
+
clearInput: false,
|
|
129
131
|
// 输入框的值
|
|
130
132
|
innerValue: "",
|
|
131
133
|
// 是否处于获得焦点状态
|
|
@@ -153,7 +155,7 @@ export default {
|
|
|
153
155
|
this.valueChange();
|
|
154
156
|
} else {
|
|
155
157
|
// 尝试调用u-form的验证方法
|
|
156
|
-
|
|
158
|
+
formValidate(this, "change");
|
|
157
159
|
}
|
|
158
160
|
/* #endif */
|
|
159
161
|
this.firstChange = false;
|
|
@@ -176,7 +178,7 @@ export default {
|
|
|
176
178
|
this.valueChange();
|
|
177
179
|
} else {
|
|
178
180
|
// 尝试调用u-form的验证方法
|
|
179
|
-
|
|
181
|
+
formValidate(this, "change");
|
|
180
182
|
}
|
|
181
183
|
/* #endif */
|
|
182
184
|
this.firstChange = false;
|
|
@@ -223,13 +225,13 @@ export default {
|
|
|
223
225
|
style.paddingLeft = "9px";
|
|
224
226
|
style.paddingRight = "9px";
|
|
225
227
|
}
|
|
226
|
-
return
|
|
228
|
+
return deepMerge(style, addStyle(this.customStyle));
|
|
227
229
|
},
|
|
228
230
|
// 输入框的样式
|
|
229
231
|
inputStyle() {
|
|
230
232
|
const style = {
|
|
231
233
|
color: this.color,
|
|
232
|
-
fontSize:
|
|
234
|
+
fontSize: addUnit(this.fontSize),
|
|
233
235
|
textAlign: this.inputAlign
|
|
234
236
|
};
|
|
235
237
|
return style;
|
|
@@ -261,11 +263,11 @@ export default {
|
|
|
261
263
|
this.$emit("blur", event.detail.value);
|
|
262
264
|
// H5端的blur会先于点击清除控件的点击click事件触发,导致focused
|
|
263
265
|
// 瞬间为false,从而隐藏了清除控件而无法被点击到
|
|
264
|
-
|
|
266
|
+
sleep(150).then(() => {
|
|
265
267
|
this.focused = false;
|
|
266
268
|
});
|
|
267
269
|
// 尝试调用u-form的验证方法
|
|
268
|
-
|
|
270
|
+
formValidate(this, "blur");
|
|
269
271
|
},
|
|
270
272
|
// 输入框聚焦时触发
|
|
271
273
|
onFocus(event) {
|
|
@@ -283,6 +285,10 @@ export default {
|
|
|
283
285
|
},
|
|
284
286
|
// 内容发生变化,进行处理
|
|
285
287
|
valueChange() {
|
|
288
|
+
if(this.clearInput) {
|
|
289
|
+
this.innerValue = '';
|
|
290
|
+
this.clearInput = false;
|
|
291
|
+
}
|
|
286
292
|
const value = this.innerValue;
|
|
287
293
|
this.$nextTick(() => {
|
|
288
294
|
// #ifdef VUE3
|
|
@@ -295,11 +301,12 @@ export default {
|
|
|
295
301
|
this.changeFromInner = true;
|
|
296
302
|
this.$emit("change", value);
|
|
297
303
|
// 尝试调用u-form的验证方法
|
|
298
|
-
|
|
304
|
+
formValidate(this, "change");
|
|
299
305
|
});
|
|
300
306
|
},
|
|
301
307
|
// 点击清除控件
|
|
302
308
|
onClear() {
|
|
309
|
+
this.clearInput = true;
|
|
303
310
|
this.innerValue = "";
|
|
304
311
|
this.$nextTick(() => {
|
|
305
312
|
this.valueChange();
|
|
@@ -313,8 +320,8 @@ export default {
|
|
|
313
320
|
*/
|
|
314
321
|
clickHandler() {
|
|
315
322
|
// #ifdef APP-NVUE
|
|
316
|
-
if (
|
|
317
|
-
const formItem =
|
|
323
|
+
if (os() === "android") {
|
|
324
|
+
const formItem = $parent.call(this, "u-form-item");
|
|
318
325
|
if (formItem) {
|
|
319
326
|
formItem.clickHandler();
|
|
320
327
|
}
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
</template>
|
|
69
69
|
|
|
70
70
|
<script>
|
|
71
|
-
import props from './props
|
|
72
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
73
|
-
import mixin from '../../libs/mixin/mixin
|
|
71
|
+
import props from './props';
|
|
72
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
73
|
+
import mixin from '../../libs/mixin/mixin';
|
|
74
74
|
|
|
75
75
|
/**
|
|
76
76
|
* keyboard 键盘
|
|
@@ -8,9 +8,10 @@
|
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script>
|
|
11
|
-
import props from './props
|
|
12
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
13
|
-
import mixin from '../../libs/mixin/mixin
|
|
11
|
+
import props from './props';
|
|
12
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
13
|
+
import mixin from '../../libs/mixin/mixin';
|
|
14
|
+
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
|
|
14
15
|
/**
|
|
15
16
|
* line 线条
|
|
16
17
|
* @description 此组件一般用于显示一根线条,用于分隔内容块,有横向和竖向两种模式,且能设置0.5px线条,使用也很简单
|
|
@@ -36,18 +37,18 @@
|
|
|
36
37
|
// 此处采用兼容分开写,兼容nvue的写法
|
|
37
38
|
style.borderBottomWidth = '1px'
|
|
38
39
|
style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
|
|
39
|
-
style.width =
|
|
40
|
+
style.width = addUnit(this.length)
|
|
40
41
|
if (this.hairline) style.transform = 'scaleY(0.5)'
|
|
41
42
|
} else {
|
|
42
43
|
// 如果是竖向线条,边框宽度为1px,再通过transform缩小一半,就是0.5px了
|
|
43
44
|
style.borderLeftWidth = '1px'
|
|
44
45
|
style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
|
|
45
|
-
style.height =
|
|
46
|
+
style.height = addUnit(this.length)
|
|
46
47
|
if (this.hairline) style.transform = 'scaleX(0.5)'
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
style.borderColor = this.color
|
|
50
|
-
return
|
|
51
|
+
return deepMerge(style, addStyle(this.customStyle))
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view
|
|
3
3
|
class="u-line-progress"
|
|
4
|
-
:style="[
|
|
4
|
+
:style="[addStyle(customStyle)]"
|
|
5
5
|
>
|
|
6
6
|
<view
|
|
7
7
|
class="u-line-progress__background"
|
|
8
8
|
ref="u-line-progress__background"
|
|
9
9
|
:style="[{
|
|
10
10
|
backgroundColor: inactiveColor,
|
|
11
|
-
height:
|
|
11
|
+
height: addUnit(height),
|
|
12
12
|
}]"
|
|
13
13
|
>
|
|
14
14
|
</view>
|
|
@@ -24,9 +24,10 @@
|
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script>
|
|
27
|
-
import props from './props
|
|
28
|
-
import mpMixin from '../../libs/mixin/mpMixin
|
|
29
|
-
import mixin from '../../libs/mixin/mixin
|
|
27
|
+
import props from './props';
|
|
28
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
29
|
+
import mixin from '../../libs/mixin/mixin';
|
|
30
|
+
import { addUnit, addStyle, sleep, range } from '../../libs/function/index';
|
|
30
31
|
// #ifdef APP-NVUE
|
|
31
32
|
const dom = uni.requireNativePlugin('dom')
|
|
32
33
|
// #endif
|
|
@@ -60,20 +61,22 @@
|
|
|
60
61
|
let style = {}
|
|
61
62
|
style.width = this.lineWidth
|
|
62
63
|
style.backgroundColor = this.activeColor
|
|
63
|
-
style.height =
|
|
64
|
+
style.height = addUnit(this.height)
|
|
64
65
|
return style
|
|
65
66
|
},
|
|
66
67
|
innserPercentage() {
|
|
67
68
|
// 控制范围在0-100之间
|
|
68
|
-
return
|
|
69
|
+
return range(0, 100, this.percentage)
|
|
69
70
|
}
|
|
70
71
|
},
|
|
71
72
|
mounted() {
|
|
72
73
|
this.init()
|
|
73
74
|
},
|
|
74
75
|
methods: {
|
|
76
|
+
addStyle,
|
|
77
|
+
addUnit,
|
|
75
78
|
init() {
|
|
76
|
-
|
|
79
|
+
sleep(20).then(() => {
|
|
77
80
|
this.resizeProgressWidth()
|
|
78
81
|
})
|
|
79
82
|
},
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
<text
|
|
3
3
|
class="u-link"
|
|
4
4
|
@tap.stop="openLink"
|
|
5
|
-
:style="[linkStyle,
|
|
5
|
+
:style="[linkStyle, addStyle(customStyle)]"
|
|
6
6
|
>{{text}}</text>
|
|
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
|
|
13
|
-
|
|
10
|
+
import props from './props';
|
|
11
|
+
import mpMixin from '../../libs/mixin/mpMixin';
|
|
12
|
+
import mixin from '../../libs/mixin/mixin';
|
|
13
|
+
import { addStyle, addUnit, getPx, toast } from '../../libs/function/index';
|
|
14
14
|
/**
|
|
15
15
|
* link 超链接
|
|
16
16
|
* @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
linkStyle() {
|
|
34
34
|
const style = {
|
|
35
35
|
color: this.color,
|
|
36
|
-
fontSize:
|
|
36
|
+
fontSize: addUnit(this.fontSize),
|
|
37
37
|
// line-height设置为比字体大小多2px
|
|
38
|
-
lineHeight:
|
|
38
|
+
lineHeight: addUnit(getPx(this.fontSize) + 2),
|
|
39
39
|
textDecoration: this.underLine ? 'underline' : 'none'
|
|
40
40
|
}
|
|
41
41
|
// if (this.underLine) {
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
emits: ["click"],
|
|
49
49
|
methods: {
|
|
50
|
+
addStyle,
|
|
50
51
|
openLink() {
|
|
51
52
|
// #ifdef APP-PLUS
|
|
52
53
|
plus.runtime.openURL(this.href)
|
|
@@ -60,7 +61,7 @@
|
|
|
60
61
|
success: () => {
|
|
61
62
|
uni.hideToast();
|
|
62
63
|
this.$nextTick(() => {
|
|
63
|
-
|
|
64
|
+
toast(this.mpTips);
|
|
64
65
|
})
|
|
65
66
|
}
|
|
66
67
|
});
|