uview-plus 3.4.48 → 3.4.50
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-icon/util.js +73 -0
- package/components/u-picker/picker.js +4 -0
- package/components/u-picker/props.js +20 -0
- package/components/u-picker/u-picker.vue +8 -0
- package/components/u-popup/u-popup.vue +1 -0
- package/components/u-subsection/props.js +5 -0
- package/components/u-subsection/subsection.js +1 -0
- package/components/u-subsection/u-subsection.vue +70 -10
- package/package.json +1 -1
- package/types/comps/subsection.d.ts +5 -0
package/changelog.md
CHANGED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import config from '../../libs/config/config';
|
|
2
|
+
// 定义高阶函数
|
|
3
|
+
function once(fn) {
|
|
4
|
+
let called = false;
|
|
5
|
+
let result;
|
|
6
|
+
|
|
7
|
+
return function(...args) {
|
|
8
|
+
if (!called) {
|
|
9
|
+
result = fn.apply(this, args);
|
|
10
|
+
// called = true;
|
|
11
|
+
}
|
|
12
|
+
return result;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// 使用高阶函数
|
|
17
|
+
const loadFont = once(() => {
|
|
18
|
+
console.log('这个函数只能执行一次');
|
|
19
|
+
// #ifdef APP-NVUE
|
|
20
|
+
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
|
21
|
+
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
|
22
|
+
const domModule = weex.requireModule('dom');
|
|
23
|
+
domModule.addRule('fontFace', {
|
|
24
|
+
'fontFamily': "uicon-iconfont",
|
|
25
|
+
'src': `url('${config.iconUrl}')`
|
|
26
|
+
});
|
|
27
|
+
if (config.customIcon.family) {
|
|
28
|
+
domModule.addRule('fontFace', {
|
|
29
|
+
'fontFamily': config.customIcon.family,
|
|
30
|
+
'src': `url('${config.customIcon.url}')`
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
// #endif
|
|
34
|
+
// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
|
|
35
|
+
uni.loadFontFace({
|
|
36
|
+
family: 'uicon-iconfont',
|
|
37
|
+
source: 'url("' + config.iconUrl + '")',
|
|
38
|
+
success() {
|
|
39
|
+
// console.log('内置字体图标加载成功');
|
|
40
|
+
},
|
|
41
|
+
fail() {
|
|
42
|
+
// console.error('内置字体图标加载出错');
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
if (config.customIcon.family) {
|
|
46
|
+
uni.loadFontFace({
|
|
47
|
+
family: config.customIcon.family,
|
|
48
|
+
source: 'url("' + config.customIcon.url + '")',
|
|
49
|
+
success() {
|
|
50
|
+
// console.log('扩展字体图标加载成功');
|
|
51
|
+
},
|
|
52
|
+
fail() {
|
|
53
|
+
// console.error('扩展字体图标加载出错');
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
// #endif
|
|
58
|
+
// #ifdef APP-NVUE
|
|
59
|
+
if (this.customFontFamily) {
|
|
60
|
+
domModule.addRule('fontFace', {
|
|
61
|
+
'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
|
|
62
|
+
'src': `url('${this.customFontUrl}')`
|
|
63
|
+
})
|
|
64
|
+
}
|
|
65
|
+
// #endif
|
|
66
|
+
return true;
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
let util = {
|
|
70
|
+
loadFont
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export default util
|
|
@@ -123,5 +123,25 @@ export const props = defineMixin({
|
|
|
123
123
|
type: [String, Number],
|
|
124
124
|
default: () => defProps.picker.zIndex
|
|
125
125
|
},
|
|
126
|
+
// 弹窗背景色，设置为transparent可去除白色背景
|
|
127
|
+
bgColor: {
|
|
128
|
+
type: String,
|
|
129
|
+
default: () => defProps.picker.bgColor
|
|
130
|
+
},
|
|
131
|
+
// 是否显示圆角
|
|
132
|
+
round: {
|
|
133
|
+
type: [Boolean, String, Number],
|
|
134
|
+
default: () => defProps.picker.round
|
|
135
|
+
},
|
|
136
|
+
// 动画时长，单位ms
|
|
137
|
+
duration: {
|
|
138
|
+
type: [String, Number],
|
|
139
|
+
default: () => defProps.picker.duration
|
|
140
|
+
},
|
|
141
|
+
// 遮罩的透明度，0-1之间
|
|
142
|
+
overlayOpacity: {
|
|
143
|
+
type: [Number, String],
|
|
144
|
+
default: () => defProps.picker.overlayOpacity
|
|
145
|
+
}
|
|
126
146
|
}
|
|
127
147
|
})
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
:show="show || (hasInput && showByClickInput)"
|
|
18
18
|
:mode="popupMode"
|
|
19
19
|
:zIndex="zIndex"
|
|
20
|
+
:bgColor="bgColor"
|
|
21
|
+
:round="round"
|
|
22
|
+
:duration="duration"
|
|
23
|
+
:overlayOpacity="overlayOpacity"
|
|
20
24
|
@close="closeHandler"
|
|
21
25
|
>
|
|
22
26
|
<view class="u-picker">
|
|
@@ -96,6 +100,10 @@
|
|
|
96
100
|
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
|
97
101
|
* @property {Array} defaultIndex 各列的默认索引
|
|
98
102
|
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 true ）
|
|
103
|
+
* @property {String | Number} round 圆角值（默认 0）
|
|
104
|
+
* @property {String } bgColor 背景色值（默认 '' ）
|
|
105
|
+
* @property {String | Number} duration 动画时长，单位ms （默认 300 ）
|
|
106
|
+
* @property {String | Number} overlayDuration 遮罩层动画时长，单位ms （默认 350 ）
|
|
99
107
|
* @event {Function} close 关闭选择器时触发
|
|
100
108
|
* @event {Function} cancel 点击取消按钮触发
|
|
101
109
|
* @event {Function} change 当选择值变化时触发
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离（状态栏高度） （默认 false ）
|
|
80
80
|
* @property {String} closeIconPos 自定义关闭图标位置（默认 'top-right' ）
|
|
81
81
|
* @property {String | Number} round 圆角值（默认 0）
|
|
82
|
+
* @property {String } bgColor 背景色值（默认 '' ）
|
|
82
83
|
* @property {Boolean} zoom 当mode=center时 是否开启缩放（默认 true ）
|
|
83
84
|
* @property {Object} customStyle 组件的样式，对象形式
|
|
84
85
|
* @event {Function} open 弹出层打开
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
'u-subsection__item--no-border-right',
|
|
32
32
|
index === 0 && 'u-subsection__item--first',
|
|
33
33
|
index === list.length - 1 && 'u-subsection__item--last',
|
|
34
|
+
getTextViewDisableClass(index),
|
|
34
35
|
]"
|
|
35
36
|
:ref="`u-subsection__item--${index}`"
|
|
36
37
|
:style="[itemStyle(index)]"
|
|
@@ -40,6 +41,7 @@
|
|
|
40
41
|
>
|
|
41
42
|
<text
|
|
42
43
|
class="u-subsection__item__text"
|
|
44
|
+
:class="[disabled ? 'u-subsection--disabled' : '']"
|
|
43
45
|
:style="[textStyle(index,item)]"
|
|
44
46
|
>{{ getText(item) }}</text
|
|
45
47
|
>
|
|
@@ -60,16 +62,19 @@ import { addStyle, addUnit, sleep } from '../../libs/function/index';
|
|
|
60
62
|
* Subsection 分段器
|
|
61
63
|
* @description 该分段器一般用于用户从几个选项中选择某一个的场景
|
|
62
64
|
* @tutorial https://ijry.github.io/uview-plus/components/subsection.html
|
|
63
|
-
* @property {Array} list
|
|
64
|
-
* @property {String ｜ Number} current
|
|
65
|
-
* @property {String} activeColor
|
|
66
|
-
* @property {String} inactiveColor
|
|
67
|
-
* @property {String} mode
|
|
68
|
-
* @property {String ｜ Number} fontSize
|
|
69
|
-
* @property {Boolean} bold
|
|
70
|
-
* @property {String} bgColor
|
|
71
|
-
* @property {Object} customStyle
|
|
72
|
-
* @property {String} keyName
|
|
65
|
+
* @property {Array} list tab的数据
|
|
66
|
+
* @property {String ｜ Number} current 当前活动的tab的index（默认 0 ）
|
|
67
|
+
* @property {String} activeColor 激活时的颜色（默认 '#3c9cff' ）
|
|
68
|
+
* @property {String} inactiveColor 未激活时的颜色（默认 '#303133' ）
|
|
69
|
+
* @property {String} mode 模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
|
|
70
|
+
* @property {String ｜ Number} fontSize 字体大小，单位px（默认 12 ）
|
|
71
|
+
* @property {Boolean} bold 激活选项的字体是否加粗（默认 true ）
|
|
72
|
+
* @property {String} bgColor 组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
|
|
73
|
+
* @property {Object} customStyle 定义需要用到的外部样式
|
|
74
|
+
* @property {String} keyName 从`list`元素对象中读取的键名（默认 'name' ）
|
|
75
|
+
* @property {String} activeColorKeyName 从`list`元素对象中读取激活时的颜色（默认 'activeColorKey' ） 如果存在字段 优先级大于 activeColor
|
|
76
|
+
* @property {String} inactiveColorKeyName 从`list`元素对象中读取未激活时的颜色 （默认 'inactiveColorKey' ）如果存在字段 优先级大于 inactiveColor
|
|
77
|
+
* @property {Boolean} disabled 是否禁用分段器 （默认 false ）
|
|
73
78
|
*
|
|
74
79
|
* @event {Function} change 分段器选项发生改变时触发 回调 index：选项的index索引值，从0开始
|
|
75
80
|
* @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
|
|
@@ -241,10 +246,31 @@ export default {
|
|
|
241
246
|
// #endif
|
|
242
247
|
},
|
|
243
248
|
clickHandler(index) {
|
|
249
|
+
// 防止某些平台 css 无法阻止点击事件 在此处拦截
|
|
250
|
+
if(this.disabled){
|
|
251
|
+
return
|
|
252
|
+
}
|
|
244
253
|
this.innerCurrent = index;
|
|
245
254
|
this.$emit('update:current', index);
|
|
246
255
|
this.$emit("change", index);
|
|
247
256
|
},
|
|
257
|
+
/**
|
|
258
|
+
* 获取当前文字区域的 class禁用样式
|
|
259
|
+
* @param index
|
|
260
|
+
*/
|
|
261
|
+
getTextViewDisableClass(index){
|
|
262
|
+
// 禁用状态下
|
|
263
|
+
if(this.disabled){
|
|
264
|
+
// 判断模式
|
|
265
|
+
if(this.mode === 'button'){
|
|
266
|
+
return 'item-button--disabled'
|
|
267
|
+
}
|
|
268
|
+
else{
|
|
269
|
+
return 'item-subsection--disabled'
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
return '';
|
|
273
|
+
}
|
|
248
274
|
},
|
|
249
275
|
};
|
|
250
276
|
</script>
|
|
@@ -337,5 +363,39 @@ export default {
|
|
|
337
363
|
transition-duration: 0.3s;
|
|
338
364
|
}
|
|
339
365
|
}
|
|
366
|
+
|
|
367
|
+
// 禁用标志
|
|
368
|
+
//
|
|
369
|
+
//&--subsectio--disabled{
|
|
370
|
+
// cursor: no-drop;
|
|
371
|
+
// background: #FFFFFF !important;
|
|
372
|
+
// color: #BDBDBD !important;
|
|
373
|
+
// border-color: #BDBDBD !important;
|
|
374
|
+
//}
|
|
375
|
+
//
|
|
376
|
+
//&--button--disabled{
|
|
377
|
+
// cursor: no-drop;
|
|
378
|
+
// color: #BDBDBD !important;
|
|
379
|
+
// border-color: #BDBDBD !important;
|
|
380
|
+
//}
|
|
381
|
+
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.item-button--disabled{
|
|
385
|
+
cursor: no-drop;
|
|
386
|
+
color: #BDBDBD !important;
|
|
387
|
+
border-color: #BDBDBD !important;
|
|
388
|
+
text{
|
|
389
|
+
color: #BDBDBD !important;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
.item-subsection--disabled{
|
|
393
|
+
cursor: no-drop;
|
|
394
|
+
background: #FFFFFF !important;
|
|
395
|
+
color: #BDBDBD !important;
|
|
396
|
+
border-color: #BDBDBD !important;
|
|
397
|
+
text{
|
|
398
|
+
color: #BDBDBD !important;
|
|
399
|
+
}
|
|
340
400
|
}
|
|
341
401
|
</style>
|
package/package.json
CHANGED