uview-plus 3.4.49 → 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
CHANGED
|
@@ -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