Commit 8047adeb authored by wlxuqu's avatar wlxuqu

1. 【优化】配置popup组件的外层元素z-index可动态调整

2. 【优化】select和picker组件在微信小程序上第二次打开,直接点确定返回可能不对的问题
3. 【优化】添加u-col的click事件
4. 【优化】优化table组件在支付宝小程序上报错的问题
5. 【优化】重构steps组件,支持竖向模式,同时兼容了支付宝小程序
6. 【优化】优化checkbox组件,兼容支付宝小程序
7. 【优化】优化swipeAction组件可能会闪烁的情况
8. 【优化】调整cell组件的高度
9. 【优化】重构优化radio组件,全面兼容支付宝小程序,修复每次点击都触发change事件的问题
10. 【优化】优化avatar-cropper头像裁剪组件,全面兼容支付宝小程序
11. 【优化】优化circle-progress组件,全面兼容支付宝小程序
12. 【修复】修复input组件在微信小程序第一次获得焦点时无法清空内容的问题
13. 【修复】修复image组件无需淡入效果时png图片能看到底色的问题
14. 【修复】修复checkbox的lable-disabled参数无效的问题
15. 【修复】修复cell组件在1.5.0版本导致变成了password模式的情况
16. 【修复】修复form-item的label-align无效的问题
17. 【修复】修复alert-tips的border-color和bg-color作用对象颠倒的问题
18. 【修复】修复picker组件时间模式timestamp在iOS上可能返回不正确的问题
parent abfb1216
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.4.8", "versionName" : "1.5.2",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
"easycom": { "easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
"condition": { //模式配置,仅开发期间生效 // "condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项) // "current": 0, //当前激活的模式(list 的索引项)
"list": [{ // "list": [{
"name": "test", //模式名称 // "name": "test", //模式名称
"path": "pages/componentsB/steps/index", //启动页面,必选 // "path": "pages/componentsB/picker/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到 // "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
}] // }]
}, // },
"pages": [ "pages": [
// 演示-组件 // 演示-组件
{ {
......
...@@ -177,7 +177,6 @@ export default { ...@@ -177,7 +177,6 @@ export default {
this.defaultSelector.splice(2, 1, 0) this.defaultSelector.splice(2, 1, 0)
break break
} }
this.$forceUpdate()
} }
} }
}; };
......
...@@ -79,8 +79,8 @@ ...@@ -79,8 +79,8 @@
} }
], ],
disabled: false, disabled: false,
result: '', result: '荔枝',
shape: 'square', shape: 'circle',
value: '荔枝', value: '荔枝',
activeColor: '#2979ff', activeColor: '#2979ff',
size: 34, size: 34,
...@@ -121,12 +121,12 @@ ...@@ -121,12 +121,12 @@
}, },
// 选中某个单选框时,由radio时触发 // 选中某个单选框时,由radio时触发
radioChange(e) { radioChange(e) {
// console.log(e); console.log(e);
}, },
// 选中任一radio时,由radio-group触发 // 选中任一radio时,由radio-group触发
radioGroupChange(e) { radioGroupChange(e) {
this.result = e; this.result = e;
// console.log(e); console.log(e);
}, },
widthChange(index) { widthChange(index) {
this.width = index == 0 ? '50%' : ''; this.width = index == 0 ? '50%' : '';
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-steps :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps> <u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
<view class="u-item-title">模式</view> <view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['number', 'dot']" @change="modeChange"></u-subsection> <u-subsection vibrateShort :list="['number', 'dot']" @change="modeChange"></u-subsection>
</view> </view>
<view class="u-config-item">
<view class="u-item-title">方向</view>
<u-subsection vibrateShort :list="['横向', '竖向']" @change="directionChange"></u-subsection>
</view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">自定义图标</view> <view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort :list="['否', '是']" @change="iconChange"></u-subsection> <u-subsection vibrateShort :list="['否', '是']" @change="iconChange"></u-subsection>
...@@ -41,7 +45,8 @@ ...@@ -41,7 +45,8 @@
}, ], }, ],
current: 0, current: 0,
icon: 'checkmark', icon: 'checkmark',
mode: 'number' mode: 'number',
direction: 'row'
} }
}, },
methods: { methods: {
...@@ -49,10 +54,13 @@ ...@@ -49,10 +54,13 @@
this.mode = index == 0 ? 'number' : 'dot'; this.mode = index == 0 ? 'number' : 'dot';
}, },
stepChange(index) { stepChange(index) {
this.current = index == 0 ? 0 : index == 1 ? 1 : index == 2 ? 2 : 3; this.current = [0, 1, 2, 3][index];
}, },
iconChange(index) { iconChange(index) {
this.icon = index == 0 ? 'checkmark' : 'map-fill'; this.icon = index == 0 ? 'checkmark' : 'map-fill';
},
directionChange(index) {
this.direction = index == 0 ? 'row' : 'column';
} }
} }
} }
......
<template> <template>
<view> <view class="">
<u-field></u-field> <u-checkbox-group>
<u-button @click="password = !password"></u-button> <u-checkbox v-model="checked" active-color="red">光影</u-checkbox>
</u-checkbox-group>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
password: false checked: true
} };
}, },
} };
</script> </script>
\ No newline at end of file
<style>
</style>
\ No newline at end of file
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">时间</view> <view class="u-item-title">时间</view>
<u-subsection vibrateShort :list="timeArr1" @change="timeArr1Change"></u-subsection> <u-subsection vibrateShort :list="timeArr1" @change="timeArr1Change"></u-subsection>
<u-gap></u-gap>
<u-subsection vibrateShort style="margin-top: 40rpx;" :list="timeArr2" @change="timeArr2Change"></u-subsection> <u-subsection vibrateShort style="margin-top: 40rpx;" :list="timeArr2" @change="timeArr2Change"></u-subsection>
</view> </view>
</view> </view>
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
@touchend="touchEnd" @touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" :style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
canvas-id="cropper" canvas-id="cropper"
id="cropper"
></canvas> ></canvas>
<canvas <canvas
class="cropper" class="cropper"
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
height: `${cropperOpt.height * cropperOpt.pixelRatio}` height: `${cropperOpt.height * cropperOpt.pixelRatio}`
}" }"
canvas-id="targetId" canvas-id="targetId"
id="targetId"
></canvas> ></canvas>
</view> </view>
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> <view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
...@@ -181,7 +183,6 @@ export default { ...@@ -181,7 +183,6 @@ export default {
this.cropper.touchEnd(e); this.cropper.touchEnd(e);
}, },
getCropperImage(isPre = false) { getCropperImage(isPre = false) {
console.log(this.src);
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); if(!this.src) return this.$u.toast('请先选择图片再裁剪');
let cropper_opt = { let cropper_opt = {
......
...@@ -215,9 +215,9 @@ export default { ...@@ -215,9 +215,9 @@ export default {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 20rpx 32rpx; padding: 26rpx 32rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 48rpx; line-height: 54rpx;
color: $u-content-color; color: $u-content-color;
background-color: #fff; background-color: #fff;
text-align: left; text-align: left;
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
default: 'auto' default: 'auto'
}, },
// 是否每个checkbox都换行 // 是否每个checkbox都换行
wrap: { wrap: {
type: Boolean, type: Boolean,
default: false default: false
}, },
......
<template> <template>
<view class="u-checkbox" :style="[checkboxStyle]"> <view class="u-checkbox" :style="[checkboxStyle]">
<view class="u-checkbox__icon-wrap" @tap="toggle"> <view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon :class="iconClass" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" /> <u-icon name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
</view> </view>
<view class="u-label-class u-checkbox__label" @tap="onClickLabel" :style="{ <view class="u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx' fontSize: $u.addUnit(labelSize)
}"> }">
<slot /> <slot />
</view> </view>
...@@ -46,12 +46,12 @@ ...@@ -46,12 +46,12 @@
}, },
// 是否禁用 // 是否禁用
disabled: { disabled: {
type: [Boolean, String], type: [String, Boolean],
default: '' default: ''
}, },
// 是否禁止点击提示语选中复选框 // 是否禁止点击提示语选中复选框
labelDisabled: { labelDisabled: {
type: [Boolean, String], type: [String, Boolean],
default: '' default: ''
}, },
// 选中状态下的颜色,如设置此值,将会覆盖checkboxGroup的activeColor值 // 选中状态下的颜色,如设置此值,将会覆盖checkboxGroup的activeColor值
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
let style = {}; let style = {};
// 既要判断是否手动禁用,还要判断用户v-model绑定的值,如果绑定为false,那么也无法选中 // 既要判断是否手动禁用,还要判断用户v-model绑定的值,如果绑定为false,那么也无法选中
if (this.elActiveColor && this.value && !this.isDisabled) { if (this.elActiveColor && this.value && !this.isDisabled) {
style.borderColor = this.elActiveColor; style.borderColor = this.elActiveColor;
style.backgroundColor = this.elActiveColor; style.backgroundColor = this.elActiveColor;
} }
style.width = this.$u.addUnit(this.checkboxSize); style.width = this.$u.addUnit(this.checkboxSize);
...@@ -128,12 +128,13 @@ ...@@ -128,12 +128,13 @@
return this.value ? '#ffffff' : 'transparent'; return this.value ? '#ffffff' : 'transparent';
}, },
iconClass() { iconClass() {
let classs = []; let classes = [];
classs.push('u-checkbox__icon--' + this.elShape); classes.push('u-checkbox__icon-wrap--' + this.elShape);
if (this.value == true) classs.push('u-checkbox__icon--checked'); if (this.value == true) classes.push('u-checkbox__icon-wrap--checked');
if (this.isDisabled) classs.push('u-checkbox__icon--disabled'); if (this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled');
if (this.value && this.isDisabled) classs.push('u-checkbox__icon--disabled--checked'); if (this.value && this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled--checked');
return classs; // 支付宝小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
return classes.join(' ');
}, },
checkboxStyle() { checkboxStyle() {
let style = {}; let style = {};
...@@ -217,69 +218,58 @@ ...@@ -217,69 +218,58 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
line-height: 1.8; line-height: 1.8;
}
&__icon-wrap {
.u-checkbox__icon-wrap, color: $u-content-color;
.u-checkbox__label { flex: none;
color: $u-content-color; display: -webkit-flex;
} display: flex;
align-items: center;
.u-checkbox__icon-wrap { justify-content: center;
flex: none; box-sizing: border-box;
} width: 42rpx;
height: 42rpx;
.u-checkbox__icon { color: transparent;
display: -webkit-flex; text-align: center;
display: flex; transition-property: color, border-color, background-color;
align-items: center; font-size: 20px;
justify-content: center; border: 1px solid #c8c9cc;
box-sizing: border-box; transition-duration: 0.2s;
width: 42rpx;
height: 42rpx; &--circle {
color: transparent; border-radius: 100%;
text-align: center; }
transition-property: color, border-color, background-color;
font-size: 20px; &--square {
border: 1px solid #c8c9cc; border-radius: 6rpx;
transition-duration: 0.2s; }
}
&--checked {
.u-checkbox__icon--circle { color: #fff;
border-radius: 100%; background-color: $u-type-primary;
} border-color: $u-type-primary;
}
.u-checkbox__icon--square {
border-radius: 3px; &--disabled {
} background-color: #ebedf0;
border-color: #c8c9cc;
.u-checkbox__icon--checked { }
color: #fff;
background-color: $u-type-primary; &--disabled--checked {
border-color: $u-type-primary; color: #c8c9cc !important;
} }
}
.u-checkbox__icon--disabled {
background-color: #ebedf0; &__label {
border-color: #c8c9cc; word-wrap: break-word;
} margin-left: 10rpx;
margin-right: 24rpx;
.u-checkbox__icon--disabled--checked { color: $u-content-color;
color: #c8c9cc !important; font-size: 30rpx;
}
&--disabled {
.u-checkbox__label { color: #c8c9cc;
word-wrap: break-word; }
margin-left: 10rpx; }
margin-right: 24rpx;
color: $u-content-color;
font-size: 30rpx;
}
.u-checkbox__label--disabled {
color: #c8c9cc;
}
.u-checkbox__label:empty {
margin: 0;
} }
</style> </style>
...@@ -7,9 +7,11 @@ ...@@ -7,9 +7,11 @@
backgroundColor: bgColor backgroundColor: bgColor
}" }"
> >
<!-- 支付宝小程序不支持canvas-id属性,必须用id属性 -->
<canvas <canvas
class="u-canvas-bg" class="u-canvas-bg"
:canvas-id="elBgId" :canvas-id="elBgId"
:id="elBgId"
:style="{ :style="{
width: widthPx + 'px', width: widthPx + 'px',
height: widthPx + 'px' height: widthPx + 'px'
...@@ -18,6 +20,7 @@ ...@@ -18,6 +20,7 @@
<canvas <canvas
class="u-canvas" class="u-canvas"
:canvas-id="elId" :canvas-id="elId"
:id="elId"
:style="{ :style="{
width: widthPx + 'px', width: widthPx + 'px',
height: widthPx + 'px' height: widthPx + 'px'
......
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
}, },
// 是否显示表单域的下划线边框 // 是否显示表单域的下划线边框
borderBottom: { borderBottom: {
type: [Boolean, String], type: [String, Boolean],
default: '' default: ''
}, },
// label的位置,left-左边,top-上边 // label的位置,left-左边,top-上边
......
...@@ -194,7 +194,6 @@ export default { ...@@ -194,7 +194,6 @@ export default {
validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色 validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色
focused: false, // 当前是否处于获得焦点的状态 focused: false, // 当前是否处于获得焦点的状态
showPassword: false, // 是否预览密码 showPassword: false, // 是否预览密码
marginRight: 0, // 输入框右边的距离,当获得焦点时各一个后面的距离,避免点击右边图标误触输入框
}; };
}, },
watch: { watch: {
...@@ -206,14 +205,7 @@ export default { ...@@ -206,14 +205,7 @@ export default {
value: nVal value: nVal
} }
}) })
// 值变化,且是右对齐时,计算右侧的清除图标的位置尺寸,避免input-align=right时文字与清除图标重合
if(oVal == '' && this.inputAlign == 'right') this.getMarginRight();
}, },
focused(nVal) {
if(this.clearable && this.value) {
this.getMarginRight();
}
}
}, },
computed: { computed: {
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,给用户可以传入字符串数值 // 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,给用户可以传入字符串数值
...@@ -225,7 +217,6 @@ export default { ...@@ -225,7 +217,6 @@ export default {
// 如果没有自定义高度,就根据type为input还是textare来分配一个默认的高度 // 如果没有自定义高度,就根据type为input还是textare来分配一个默认的高度
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ? style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx'; this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
style.marginRight = this.marginRight + 'px';
style = Object.assign(style, this.customStyle); style = Object.assign(style, this.customStyle);
return style; return style;
}, },
...@@ -238,18 +229,7 @@ export default { ...@@ -238,18 +229,7 @@ export default {
// 监听u-form-item发出的错误事件,将输入框边框变红色 // 监听u-form-item发出的错误事件,将输入框边框变红色
this.$on('on-form-item-error', this.onFormItemError); this.$on('on-form-item-error', this.onFormItemError);
}, },
mounted() {
this.getMarginRight();
},
methods: { methods: {
// 计算输入框的右边距
getMarginRight() {
this.$nextTick(() => {
this.$uGetRect('.u-input__right-icon').then(res => {
this.marginRight = res.width;
})
})
},
/** /**
* change 事件 * change 事件
* @param event * @param event
...@@ -303,11 +283,13 @@ export default { ...@@ -303,11 +283,13 @@ export default {
.u-input { .u-input {
position: relative; position: relative;
flex: 1; flex: 1;
display: flex;
&__input { &__input {
//height: $u-form-item-height; //height: $u-form-item-height;
font-size: 28rpx; font-size: 28rpx;
color: $u-main-color; color: $u-main-color;
flex: 1;
} }
&__textarea { &__textarea {
...@@ -316,6 +298,7 @@ export default { ...@@ -316,6 +298,7 @@ export default {
color: $u-main-color; color: $u-main-color;
padding: 10rpx 0; padding: 10rpx 0;
line-height: normal; line-height: normal;
flex: 1;
} }
&--border { &--border {
...@@ -329,11 +312,6 @@ export default { ...@@ -329,11 +312,6 @@ export default {
} }
&__right-icon { &__right-icon {
position: absolute;
right: 0;
top: 50%;
z-index: 3;
transform: translateY(-50%);
&__item { &__item {
margin-left: 10rpx; margin-left: 10rpx;
......
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
* @property {String} icon-color icon-type为circle时有效,加载中的动画图标的颜色(默认#b7b7b7) * @property {String} icon-color icon-type为circle时有效,加载中的动画图标的颜色(默认#b7b7b7)
* @property {Boolean} is-dot status为nomore时,内容显示为一个"●"(默认false) * @property {Boolean} is-dot status为nomore时,内容显示为一个"●"(默认false)
* @property {String} color 字体颜色(默认#606266) * @property {String} color 字体颜色(默认#606266)
* @property {String Number} font-size 字体大小,单位rpx(默认28) * @property {String Number} margin-top 到上一个相邻元素的距离
* @property {String Number} margin-bottom 到下一个相邻元素的距离
* @property {Object} load-text 自定义显示的文字,见上方说明示例 * @property {Object} load-text 自定义显示的文字,见上方说明示例
* @event {Function} loadmore status为loadmore时,点击组件会发出此事件 * @event {Function} loadmore status为loadmore时,点击组件会发出此事件
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" /> * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
......
...@@ -221,7 +221,6 @@ ...@@ -221,7 +221,6 @@
} catch (e) { } catch (e) {
baseNum2 = 0; baseNum2 = 0;
} }
console.log(num1, num2, baseNum1, baseNum2);
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision); return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
......
...@@ -563,7 +563,8 @@ export default { ...@@ -563,7 +563,8 @@ export default {
}, },
// 获取时间戳 // 获取时间戳
getTimestamp() { getTimestamp() {
let time = this.year + '-' + this.month + '-' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second; // yyyy-mm-dd为安卓写法,不支持iOS,需要使用"/"分隔,才能二者兼容
let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
return new Date(time).getTime() / 1000; return new Date(time).getTime() / 1000;
} }
} }
......
...@@ -11,10 +11,14 @@ ...@@ -11,10 +11,14 @@
* @description 单选框用于有一个选择,用户只能选择其中一个的场景。搭配u-radio使用 * @description 单选框用于有一个选择,用户只能选择其中一个的场景。搭配u-radio使用
* @tutorial https://www.uviewui.com/components/radio.html * @tutorial https://www.uviewui.com/components/radio.html
* @property {Boolean} disabled 是否禁用所有radio(默认false) * @property {Boolean} disabled 是否禁用所有radio(默认false)
* @property {String Number} size 组件整体的大小,单位rpx(默认40)
* @property {String} active-color 选中时的颜色,应用到所有子Radio组件(默认#2979ff) * @property {String} active-color 选中时的颜色,应用到所有子Radio组件(默认#2979ff)
* @event {Function} change 任一个radio状态发生变化时触发 * @property {String Number} icon-size 图标大小,单位rpx(默认20)
* @property {String} shape 外观形状,shape-方形,circle-圆形(默认circle)
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
* @property {String} width 宽度,需带单位 * @property {String} width 宽度,需带单位
* @property {Boolean} wrap 是否每个radio都换行(默认false) * @property {Boolean} wrap 是否每个radio都换行(默认false)
* @event {Function} change 任一个radio状态发生变化时触发
* @example <u-radio-group v-model="value"></u-radio-group> * @example <u-radio-group v-model="value"></u-radio-group>
*/ */
export default { export default {
...@@ -41,6 +45,21 @@ ...@@ -41,6 +45,21 @@
type: [String, Number], type: [String, Number],
default: 34 default: 34
}, },
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: Boolean,
default: false
},
// 形状,square为方形,circle为原型
shape: {
type: String,
default: 'square'
},
// 图标的大小,单位rpx
iconSize: {
type: [String, Number],
default: 20
},
// 每个checkbox占u-checkbox-group的宽度 // 每个checkbox占u-checkbox-group的宽度
width: { width: {
type: String, type: String,
...@@ -64,10 +83,10 @@ ...@@ -64,10 +83,10 @@
this.$emit('input', val); this.$emit('input', val);
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间 // 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
this.$nextTick(function() { this.$nextTick(function() {
this.$emit('change', this.value); this.$emit('change', val);
// 发出事件,用于在表单组件中嵌入checkbox的情况,进行验证 // 发出事件,用于在表单组件中嵌入radio的情况,进行验证
// 将当前的值发送到 u-form-item 进行校验 // 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', this.value); this.dispatch('u-form-item', 'on-form-change', val);
}); });
} }
} }
......
<template> <template>
<view class="u-radio" :style="[radioStyle]"> <view class="u-radio" :style="[radioStyle]">
<view class="u-radio__icon-wrap" @tap="toggle"> <view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-radio__icon" :style="[iconStyle]" /> <u-icon
name="checkbox-mark"
:size="elIconSize"
:color="iconColor"/>
</view> </view>
<view class="u-label-class u-radio__label" @tap="onClickLabel" :style="{ <view class="u-radio__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx' fontSize: $u.addUnit(labelSize)
}"> }">
<slot /> <slot />
</view> </view>
...@@ -22,7 +25,7 @@ ...@@ -22,7 +25,7 @@
* @property {String} shape 形状,见上方说明(默认circle) * @property {String} shape 形状,见上方说明(默认circle)
* @property {Boolean} disabled 是否禁用(默认false) * @property {Boolean} disabled 是否禁用(默认false)
* @property {Boolean} label-disabled 点击文本是否可以操作radio(默认true) * @property {Boolean} label-disabled 点击文本是否可以操作radio(默认true)
* @property {String} active-color 选中时的颜色,如设置radioGroup的active-color将失效 * @property {String} active-color 选中时的颜色,如设置parent的active-color将失效
* @event {Function} change 某个radio状态发生变化时触发(选中状态) * @event {Function} change 某个radio状态发生变化时触发(选中状态)
* @example <u-radio :label-disabled="false">门掩黄昏,无计留春住</u-radio> * @example <u-radio :label-disabled="false">门掩黄昏,无计留春住</u-radio>
*/ */
...@@ -37,19 +40,19 @@ ...@@ -37,19 +40,19 @@
// 形状,square为方形,circle为原型 // 形状,square为方形,circle为原型
shape: { shape: {
type: String, type: String,
default: 'circle' default: ''
}, },
// 是否禁用 // 是否禁用
disabled: { disabled: {
type: Boolean, type: [String, Boolean],
default: false default: ''
}, },
// 是否禁止点击提示语选中复选框 // 是否禁止点击提示语选中复选框
labelDisabled: { labelDisabled: {
type: Boolean, type: [String, Boolean],
default: false default: ''
}, },
// 选中状态下的颜色,如设置此值,将会覆盖radioGroup的activeColor值 // 选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值
activeColor: { activeColor: {
type: String, type: String,
default: '' default: ''
...@@ -57,66 +60,87 @@ ...@@ -57,66 +60,87 @@
// 图标的大小,单位rpx // 图标的大小,单位rpx
iconSize: { iconSize: {
type: [String, Number], type: [String, Number],
default: 20 default: ''
}, },
// label的字体大小,rpx单位 // label的字体大小,rpx单位
labelSize: { labelSize: {
type: [String, Number], type: [String, Number],
default: 28 default: ''
}, },
}, },
inject: ['radioGroup'],
data() { data() {
return { return {
parentDisabled: false parentDisabled: false
}; };
}, },
created() { created() {
this.parentDisabled = this.radioGroup.disabled; // this.parentDisabled = this.parent.disabled;
// 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
this.parent = this.$u.$parent.call(this, 'u-radio-group');
}, },
computed: { computed: {
// 设置radio的状态,要求radio的name等于radioGroup的value时才为选中状态 // 是否禁用,如果父组件u-raios-group禁用的话,将会忽略子组件的配置
elDisabled() {
return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
},
// 是否禁用label点击
elLabelDisabled() {
return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
},
// 组件尺寸,对应size的值,默认值为34rpx
elSize() {
return this.size ? this.size : (this.parent ? this.parent.size : 34);
},
// 组件的勾选图标的尺寸,默认20
elIconSize() {
return this.iconSize ? this.iconSize : (this.parent ? this.parent.iconSize : 20);
},
// 组件选中激活时的颜色
elActiveColor() {
return this.activeColor ? this.activeColor : (this.parent ? this.parent.activeColor : 'primary');
},
// 组件的形状
elShape() {
return this.shape ? this.shape : (this.parent ? this.parent.shape : 'circle');
},
// 设置radio的状态,要求radio的name等于parent的value时才为选中状态
iconStyle() { iconStyle() {
let style = {}; let style = {};
if (this.radioActiveColor && this.name == this.radioGroup.value && !this.disabled && !this.parentDisabled) { if (this.elActiveColor && this.name == this.parent.value && !this.elDisabled) {
style.borderColor = this.radioActiveColor; style.borderColor = this.elActiveColor;
style.backgroundColor = this.radioActiveColor; style.backgroundColor = this.elActiveColor;
} }
style.width = this.radioGroup.size + 'rpx'; style.width = this.$u.addUnit(this.elSize);
style.height = this.radioGroup.size + 'rpx'; style.height = this.$u.addUnit(this.elSize);
return style; return style;
}, },
iconColor() { iconColor() {
return this.name == this.radioGroup.value ? '#ffffff' : 'transparent'; return this.name == this.parent.value ? '#ffffff' : 'transparent';
}, },
iconClass() { iconClass() {
let classs = []; let classes = [];
classs.push('u-radio__icon--' + this.shape); classes.push('u-radio__icon-wrap--' + this.shape);
if (this.name == this.radioGroup.value) classs.push('u-radio__icon--checked'); if (this.name == this.parent.value) classes.push('u-radio__icon-wrap--checked');
if (this.disabled || this.parentDisabled) classs.push('u-radio__icon--disabled'); if (this.elDisabled) classes.push('u-radio__icon-wrap--disabled');
if (this.name == this.radioGroup.value && (this.disabled || this.parentDisabled)) classs.push( if (this.name == this.parent.value && this.elDisabled) classes.push(
'u-radio__icon--disabled--checked'); 'u-radio__icon-wrap--disabled--checked');
return classs; // 支付宝小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
}, return classes.join(' ');
// 激活的颜色,可能受radioGroup和本组件的activeColor影响
// 本组件的activeColor值优先
radioActiveColor() {
return this.activeColor ? this.activeColor : this.radioGroup.activeColor;
}, },
radioStyle() { radioStyle() {
let style = {}; let style = {};
if(this.radioGroup.width) { if (this.parent.width) {
style.width = this.radioGroup.width; style.width = this.parent.width;
// #ifdef MP // #ifdef MP
// 各家小程序因为它们特殊的编译结构,使用float布局 // 各家小程序因为它们特殊的编译结构,使用float布局
style.float = 'left'; style.float = 'left';
// #endif // #endif
// #ifndef MP // #ifndef MP
// H5和APP使用flex布局 // H5和APP使用flex布局
style.flex = `0 0 ${this.radioGroup.width}`; style.flex = `0 0 ${this.parent.width}`;
// #endif // #endif
} }
if(this.radioGroup.wrap) { if (this.parent.wrap) {
style.width = '100%'; style.width = '100%';
// #ifndef MP // #ifndef MP
// H5和APP使用flex布局,将宽度设置100%,即可自动换行 // H5和APP使用flex布局,将宽度设置100%,即可自动换行
...@@ -128,19 +152,20 @@ ...@@ -128,19 +152,20 @@
}, },
methods: { methods: {
onClickLabel() { onClickLabel() {
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) { if (!this.elLabelDisabled) {
this.radioGroup.setValue(this.name); this.parent.setValue(this.name);
this.emitEvent(); this.emitEvent();
} }
}, },
toggle() { toggle() {
if (!this.disabled && !this.parentDisabled) { if (!this.elDisabled) {
this.radioGroup.setValue(this.name); this.parent.setValue(this.name);
this.emitEvent(); this.emitEvent();
} }
}, },
emitEvent() { emitEvent() {
this.$emit('change', this.name) // u-radio的name不等于父组件的v-model的值时(意味着未选中),才发出事件,避免多次点击触发事件
if(this.parent.value != this.name) this.$emit('change', this.name);
}, },
} }
}; };
...@@ -148,82 +173,65 @@ ...@@ -148,82 +173,65 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-radio { .u-radio {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
-webkit-user-select: none;
user-select: none; user-select: none;
line-height: 1.8; line-height: 1.8;
}
&__icon-wrap {
.u-radio__icon-wrap, color: $u-content-color;
.u-radio__label { display: flex;
color: $u-content-color; flex: none;
} align-items: center;
justify-content: center;
.u-radio__icon-wrap { box-sizing: border-box;
-webkit-flex: none; width: 42rpx;
flex: none; height: 42rpx;
} color: transparent;
text-align: center;
.u-radio__icon { transition-property: color, border-color, background-color;
display: -webkit-flex; font-size: 20px;
display: flex; border: 1px solid #c8c9cc;
-webkit-align-items: center; transition-duration: 0.2s;
align-items: center;
-webkit-justify-content: center; &--circle {
justify-content: center; border-radius: 100%;
box-sizing: border-box; }
width: 42rpx;
height: 42rpx; &--square {
color: transparent; border-radius: 3px;
text-align: center; }
transition-property: color, border-color, background-color;
font-size: 20px; &--checked {
border: 1px solid #c8c9cc; color: #fff;
transition-duration: 0.2s; background-color: #2979ff;
} border-color: #2979ff;
}
.u-radio__icon--circle {
border-radius: 100%; &--disabled {
} background-color: #ebedf0;
border-color: #c8c9cc;
.u-radio__icon--square { }
border-radius: 3px;
} &--disabled--checked {
color: #c8c9cc !important;
.u-radio__icon--checked { }
color: #fff; }
background-color: #2979ff;
border-color: #2979ff; &__label {
} word-wrap: break-word;
margin-left: 10rpx;
.u-radio__icon--disabled { margin-right: 24rpx;
background-color: #ebedf0; color: $u-content-color;
border-color: #c8c9cc; font-size: 30rpx;
}
&--disabled {
.u-radio__icon--disabled--checked { color: #c8c9cc;
color: #c8c9cc !important; }
} }
.u-radio__label {
word-wrap: break-word;
margin-left: 10rpx;
margin-right: 24rpx;
color: $u-content-color;
font-size: 30rpx;
}
.u-radio__label--disabled {
color: #c8c9cc;
}
.u-radio__label:empty {
margin: 0;
} }
</style> </style>
<template> <template>
<view class=""> <view class="">
<view class="u-steps"> <view
<view class="u-steps-item" v-for="(item,index) in list" :key="index"> class="u-steps"
<view class="u-steps-item-num" v-if="mode == 'number' && current < index">{{index+1}}</view> :style="{
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? activeColor : unActiveColor}"></view> flexDirection: direction
<u-icon size="22" class="u-steps-item-checked" :style="{backgroundColor: index <= current ? activeColor : unActiveColor}" }"
v-if="mode == 'number' && current >= index" :name="icon"></u-icon> >
<text :style="{color: index <= current ? activeColor : unActiveColor}">{{item.name}}</text> <view class="u-steps__item"
<view class="u-steps-item-line" :style="{backgroundColor: index <= current ? activeColor : unActiveColor, top: mode == 'dot' ? '24rpx' : '36rpx'}"> :class="['u-steps__item--' + direction]"
v-for="(item, index) in list" :key="index"
>
<view
class="u-steps__item__num"
v-if="mode == 'number'"
:style="{
backgroundColor: current < index ? 'transparent' : activeColor,
borderColor: current < index ? unActiveColor : activeColor
}"
>
<text v-if="current < index" :style="{
color: current < index ? unActiveColor : activeColor,
}">
{{ index + 1 }}
</text>
<u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
</view>
<view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{
backgroundColor: index <= current ? activeColor : unActiveColor
}"></view>
<text :style="{
color: index <= current ? activeColor : unActiveColor,
}" :class="['u-steps__item__text--' + direction]">
{{ item.name }}
</text>
<view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
<u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
</view> </view>
</view> </view>
</view> </view>
...@@ -15,126 +42,159 @@ ...@@ -15,126 +42,159 @@
</template> </template>
<script> <script>
/** /**
* steps 步骤条 * steps 步骤条
* @description 该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。 * @description 该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。
* @tutorial https://www.uviewui.com/components/steps.html * @tutorial https://www.uviewui.com/components/steps.html
* @property {String} mode 设置模式(默认dot) * @property {String} mode 设置模式(默认dot)
* @property {Array} list 数轴条数据,数组。具体见上方示例 * @property {Array} list 数轴条数据,数组。具体见上方示例
* @property {String} type type主题(默认primary) * @property {String} type type主题(默认primary)
* @property {Number String} current 设置当前处于第几步 * @property {String} direction row-横向,column-竖向(默认row)
* @property {String} active-color 已完成步骤的激活颜色,如设置,type值会失效 * @property {Number String} current 设置当前处于第几步
* @property {String} un-active-color 未激活的颜色,用于表示未完成步骤的颜色(默认#606266) * @property {String} active-color 已完成步骤的激活颜色,如设置,type值会失效
* @example <u-steps :list="numList" active-color="#fa3534"></u-steps> * @property {String} un-active-color 未激活的颜色,用于表示未完成步骤的颜色(默认#606266)
*/ * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
export default { */
name: "u-steps", export default {
props: { name: 'u-steps',
// 步骤条的类型,dot|number props: {
mode: { // 步骤条的类型,dot|number
type: String, mode: {
default: 'dot' type: String,
}, default: 'dot'
// 步骤条的数据
list: {
type: Array,
default () {
return []
}
},
// 主题类型, primary|success|info|warning|error
type: {
type: String,
default: 'primary'
},
// 当前哪一步是激活的
current: {
type: [Number, String],
default: 0
},
// 激活步骤的颜色
activeColor: {
type: String,
default: '#2979ff'
},
// 未激活的颜色
unActiveColor: {
type: String,
default: '#606266'
},
// 自定义图标
icon: {
type: String,
default: 'checkmark'
}
}, },
data() { // 步骤条的数据
return { list: {
type: Array,
default() {
return [];
} }
}, },
} // 主题类型, primary|success|info|warning|error
type: {
type: String,
default: 'primary'
},
// 当前哪一步是激活的
current: {
type: [Number, String],
default: 0
},
// 激活步骤的颜色
activeColor: {
type: String,
default: '#2979ff'
},
// 未激活的颜色
unActiveColor: {
type: String,
default: '#909399'
},
// 自定义图标
icon: {
type: String,
default: 'checkmark'
},
// step的排列方向,row-横向,column-竖向
direction: {
type: String,
default: 'row'
}
},
data() {
return {};
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import '../../libs/css/style.components.scss';
.u-steps { $u-steps-item-number-width: 44rpx;
display: flex; $u-steps-item-dot-width: 20rpx;
}
.u-steps-item { .u-steps {
display: flex;
.u-steps__item {
flex: 1; flex: 1;
text-align: center; text-align: center;
position: relative; position: relative;
min-width: 100rpx; min-width: 100rpx;
font-size: 26rpx; font-size: 26rpx;
color: #8799a3; color: #8799a3;
}
.u-steps-item .u-steps-item-line {
content: "";
position: absolute;
height: 2rpx;
width: calc(100% - 80rpx);
left: calc(0rpx - (100% - 80rpx) / 2);
top: 36rpx;
z-index: 0;
}
.u-steps-item:first-child .u-steps-item-line {
display: none;
}
.u-steps-item-num {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
width: 44rpx; flex-direction: column;
height: 44rpx;
border: 1px solid #8799a3;
border-radius: 50%;
margin: 14rpx auto;
overflow: hidden;
}
.u-steps-item-dot {
width: 20rpx;
height: 20rpx;
display: flex;
border-radius: 50%;
margin: 14rpx auto;
}
.u-steps-item-checked {
display: flex;
align-items: center; align-items: center;
justify-content: center;
width: 44rpx; &--row {
color: #fff !important; display: flex;
height: 44rpx; flex-direction: column;
border-radius: 50%;
margin: 14rpx auto; .u-steps__item__line {
overflow: hidden; position: absolute;
z-index: 0;
left: 75%;
width: 50%;
&--dot {
top: calc(#{$u-steps-item-dot-width} / 2);
}
&--number {
top: calc(#{$u-steps-item-number-width} / 2);
}
}
}
&--column {
display: flex;
flex-direction: row;
justify-content: flex-start;
min-height: 120rpx;
.u-steps__item__line {
position: absolute;
z-index: 0;
height: 50%;
top: 75%;
&--dot {
left: calc(#{$u-steps-item-dot-width} / 2);
}
&--number {
left: calc(#{$u-steps-item-number-width} / 2);
}
}
}
&__num {
display: flex;
align-items: center;
justify-content: center;
width: $u-steps-item-number-width;
height: $u-steps-item-number-width;
border: 1px solid #8799a3;
border-radius: 50%;
overflow: hidden;
}
&__dot {
width: $u-steps-item-dot-width;
height: $u-steps-item-dot-width;
display: flex;
border-radius: 50%;
}
&__text--row {
margin-top: 14rpx;
}
&__text--column {
margin-left: 14rpx;
}
} }
}
</style> </style>
...@@ -125,10 +125,6 @@ export default { ...@@ -125,10 +125,6 @@ export default {
}, },
mounted() { mounted() {
this.getActionRect(); this.getActionRect();
// 等视图更新完后,再显示右边的可滑动按钮,防止这些按钮会"闪一下"
setTimeout(() => {
this.showBtn = true;
}, 10);
}, },
methods: { methods: {
// 点击按钮 // 点击按钮
...@@ -202,6 +198,10 @@ export default { ...@@ -202,6 +198,10 @@ export default {
getActionRect() { getActionRect() {
this.$uGetRect('.u-swipe-action').then(res => { this.$uGetRect('.u-swipe-action').then(res => {
this.movableAreaWidth = res.width; this.movableAreaWidth = res.width;
// 等视图更新完后,再显示右边的可滑动按钮,防止这些按钮会"闪一下"
this.$nextTick(() => {
this.showBtn = true;
})
}); });
}, },
// 点击内容触发事件 // 点击内容触发事件
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
}, },
data() { data() {
return { return {
tr: []
}; };
}, },
inject: ['uTable', 'uTr'], inject: ['uTable', 'uTr'],
...@@ -33,7 +33,8 @@ ...@@ -33,7 +33,8 @@
} }
}, },
created() { created() {
// 定义在created中,避免微信小程序造成循环引用而报错
this.tr = []
}, },
computed: { computed: {
tdStyle() { tdStyle() {
......
// 此版本发布于2020-07-08 // 此版本发布于2020-07-15
let version = '1.4.8'; let version = '1.5.2';
export default { export default {
v: version, v: version,
......
...@@ -866,7 +866,6 @@ function pattern$2(rule, value, callback, source, options) { ...@@ -866,7 +866,6 @@ function pattern$2(rule, value, callback, source, options) {
} }
function date(rule, value, callback, source, options) { function date(rule, value, callback, source, options) {
// console.log('integer rule called %j', rule);
var errors = []; var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); // console.log('validate on %s value', value); var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); // console.log('validate on %s value', value);
......
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.5.0", "version": "1.5.2",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水", "description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "index.js", "main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"], "keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment