Skip to content

U
uview-ui
Commit 50d7b2c0 authored by wlxuqu's avatar wlxuqu
Browse files
Options

Merge branch 'yiruiwen' into dev

parents 41fc10f9 8047adeb
Show whitespace changes
Inline Side-by-side
Showing with 495 additions and 501 deletions
manifest.json
View file @ 50d7b2c0
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.4.8",
"versionName" : "1.5.2",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 50d7b2c0
......@@ -6,7 +6,7 @@
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsA/select/index", //启动页面，必选
// "path": "pages/componentsB/picker/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
......
pages/componentsB/picker/index.vue
View file @ 50d7b2c0
......@@ -177,7 +177,6 @@ export default {
this.defaultSelector.splice(2, 1, 0)
break
}
this.$forceUpdate()
}
}
};
......
pages/componentsB/radio/index.vue
View file @ 50d7b2c0
......@@ -79,8 +79,8 @@
}
],
disabled: false,
result: '',
shape: 'square',
result: '荔枝',
shape: 'circle',
value: '荔枝',
activeColor: '#2979ff',
size: 34,
......@@ -121,12 +121,12 @@
},
// 选中某个单选框时，由radio时触发
radioChange(e) {
// console.log(e);
console.log(e);
},
// 选中任一radio时，由radio-group触发
radioGroupChange(e) {
this.result = e;
// console.log(e);
console.log(e);
},
widthChange(index) {
this.width = index == 0 ? '50%' : '';
......
pages/componentsB/steps/index.vue
View file @ 50d7b2c0
......@@ -3,7 +3,7 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<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 class="u-config-wrap">
......@@ -14,6 +14,10 @@
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['number', 'dot']" @change="modeChange"></u-subsection>
</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-item-title">自定义图标</view>
<u-subsection vibrateShort :list="['否', '是']" @change="iconChange"></u-subsection>
......@@ -41,7 +45,8 @@
}, ],
current: 0,
icon: 'checkmark',
mode: 'number'
mode: 'number',
direction: 'row'
}
},
methods: {
......@@ -49,10 +54,13 @@
this.mode = index == 0 ? 'number' : 'dot';
},
stepChange(index) {
this.current = index == 0 ? 0 : index == 1 ? 1 : index == 2 ? 2 : 3;
this.current = [0, 1, 2, 3][index];
},
iconChange(index) {
this.icon = index == 0 ? 'checkmark' : 'map-fill';
},
directionChange(index) {
this.direction = index == 0 ? 'row' : 'column';
}
}
}
......
pages/componentsC/test/index.vue
View file @ 50d7b2c0
<template>
<view>
<u-select v-model="show" @confirm="confirm" :list="list"></u-select>
<u-button @click="show = true">打开</u-button>
<view class="">
<u-checkbox-group>
<u-checkbox v-model="checked" active-color="red">光影</u-checkbox>
</u-checkbox-group>
</view>
</template>
......@@ -9,101 +10,8 @@
export default {
data() {
return {
show: false,
list: [
{
label: '测试',
value: 'b0da629fa36e32110ea86dbfc53db96a',
extra: {
ductId: 'b0da629fa36e32110ea86dbfc53db96a',
name: '测试',
type: 3,
imgUrl: '1594173070713.jpg',
effectiveDay: 4,
dateType: 'day',
isInlay: 1,
createTime: '2020-07-08 09:51:13',
printerNum: 3,
createBy: '1',
updateTime: '2020-07-08 09:51:13',
updateBy: null,
ductAccessoryInfoList: []
}
},
{
label: 'PICC - 2类',
value: '1c0c70fafe74e840dc79f1bfe2833b2b',
extra: {
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
name: 'PICC - 2类',
type: 3,
imgUrl: '1592987125427.jpeg',
effectiveDay: 7,
dateType: 'day',
isInlay: 1,
createTime: '2020-06-24 16:25:25',
printerNum: 1,
createBy: '1',
updateTime: '2020-07-09 12:01:02',
updateBy: null,
ductAccessoryInfoList: [
{
ductAccessoryId: 'aecdc0e314dcb346a5ec1838929c02e6',
name: '敷贴 - 2类',
type: 1,
imgUrl: '',
effectiveDay: 3,
createTime: '2020-06-24 16:26:01',
createBy: '1',
updateTime: '2020-07-09 12:02:25',
dateType: 'day',
updateBy: null,
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
printerNum: 2
},
{
ductAccessoryId: 'cea78c669259529a6e66cd0d3b7ea357',
name: '敷贴 - 1类',
type: 1,
imgUrl: '1592987145754.jpeg',
effectiveDay: 7,
createTime: '2020-06-24 16:25:46',
createBy: '1',
updateTime: '2020-07-09 12:04:29',
dateType: 'day',
updateBy: null,
ductId: '1c0c70fafe74e840dc79f1bfe2833b2b',
printerNum: 2
}
]
}
},
{
label: 'PICC - 1类',
value: '903a262182003743bb3062fe7393ffbd',
extra: {
ductId: '903a262182003743bb3062fe7393ffbd',
name: 'PICC - 1类',
type: 3,
imgUrl: '1592987111641.jpeg',
effectiveDay: 56,
dateType: 'hour',
isInlay: 1,
createTime: '2020-06-24 16:25:12',
printerNum: 1,
createBy: '1',
updateTime: '2020-07-09 14:24:02',
updateBy: null,
ductAccessoryInfoList: []
}
}
]
checked: true
};
},
methods: {
confirm(e) {
console.log(e);
}
}
};
</script>
\ No newline at end of file
pages/library/timeFrom/index.vue
View file @ 50d7b2c0
......@@ -19,6 +19,7 @@
<view class="u-config-item">
<view class="u-item-title">时间</view>
<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>
</view>
</view>
......
uview-ui/components/u-alert-tips/u-alert-tips.vue
View file @ 50d7b2c0
......@@ -4,8 +4,8 @@
type ? 'u-alert-tips--bg--' + type + '-light' : '',
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
]" :style="{
backgroundColor: borderColor,
borderColor: bgColor
backgroundColor: bgColor,
borderColor: borderColor
}">
<view class="u-icon-wrap">
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="type"></u-icon>
......
uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
View file @ 50d7b2c0
......@@ -9,6 +9,7 @@
@touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
canvas-id="cropper"
id="cropper"
></canvas>
<canvas
class="cropper"
......@@ -21,6 +22,7 @@
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
}"
canvas-id="targetId"
id="targetId"
></canvas>
</view>
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
......@@ -181,7 +183,6 @@ export default {
this.cropper.touchEnd(e);
},
getCropperImage(isPre = false) {
console.log(this.src);
if(!this.src) return this.$u.toast('请先选择图片再裁剪');
let cropper_opt = {
......
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ 50d7b2c0
......@@ -215,9 +215,9 @@ export default {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 20rpx 32rpx;
padding: 26rpx 32rpx;
font-size: 28rpx;
line-height: 48rpx;
line-height: 54rpx;
color: $u-content-color;
background-color: #fff;
text-align: left;
......
uview-ui/components/u-checkbox-group/u-checkbox-group.vue
View file @ 50d7b2c0
......@@ -13,7 +13,11 @@
* @property {String Number} max 最多能选中多少个checkbox（默认999）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {Boolean} disabled 是否禁用所有checkbox（默认false）
* @property {String Number} icon-size 图标大小，单位rpx（默认20）
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
* @property {String} width 宽度，需带单位
* @property {String} width 宽度，需带单位
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
* @property {Boolean} wrap 是否每个checkbox都换行（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ 50d7b2c0
<template>
<view class="u-checkbox" :style="[checkboxStyle]">
<view class="u-checkbox__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" />
<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
</view>
<view class="u-label-class u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx'
<view class="u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: $u.addUnit(labelSize)
}">
<slot />
</view>
......@@ -16,12 +16,12 @@
* checkbox 复选框
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
* @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
* @property {String Number} icon-size 图标大小，单位rpx（默认20）
* @property {String Number} label-size label字体大小，单位rpx（默认28）
* @property {String Number} name checkbox组件的标示符
* @property {String} shape 形状，见官网说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {Boolean} label-disabled 点击文本是否可以操作checkbox（默认true）
* @property {Boolean} disabled 是否禁用
* @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
......@@ -46,13 +46,13 @@
},
// 是否禁用
disabled: {
type: Boolean,
default: false
type: [String, Boolean],
default: ''
},
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: Boolean,
default: false
type: [String, Boolean],
default: ''
},
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
activeColor: {
......@@ -90,11 +90,11 @@
computed: {
// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
isDisabled() {
return this.parent ? this.parent.disabled || this.disabled : this.disabled;
return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
},
// 是否禁用label点击
isLabelDisabled() {
return this.parent ? this.parent.labelDisabled || this.labelDisabled : this.labelDisabled;
return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
},
// 组件尺寸，对应size的值，默认值为34rpx
checkboxSize() {
......@@ -128,12 +128,13 @@
return this.value ? '#ffffff' : 'transparent';
},
iconClass() {
let classs = [];
classs.push('u-checkbox__icon--' + this.elShape);
if (this.value == true) classs.push('u-checkbox__icon--checked');
if (this.isDisabled) classs.push('u-checkbox__icon--disabled');
if (this.value && this.isDisabled) classs.push('u-checkbox__icon--disabled--checked');
return classs;
let classes = [];
classes.push('u-checkbox__icon-wrap--' + this.elShape);
if (this.value == true) classes.push('u-checkbox__icon-wrap--checked');
if (this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled');
if (this.value && this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled--checked');
// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
return classes.join(' ');
},
checkboxStyle() {
let style = {};
......@@ -217,18 +218,10 @@
overflow: hidden;
user-select: none;
line-height: 1.8;
}
.u-checkbox__icon-wrap,
.u-checkbox__label {
&__icon-wrap {
color: $u-content-color;
}
.u-checkbox__icon-wrap {
flex: none;
}
.u-checkbox__icon {
display: -webkit-flex;
display: flex;
align-items: center;
......@@ -242,44 +235,41 @@
font-size: 20px;
border: 1px solid #c8c9cc;
transition-duration: 0.2s;
}
.u-checkbox__icon--circle {
&--circle {
border-radius: 100%;
}
.u-checkbox__icon--square {
border-radius: 3px;
&--square {
border-radius: 6rpx;
}
.u-checkbox__icon--checked {
&--checked {
color: #fff;
background-color: $u-type-primary;
border-color: $u-type-primary;
}
.u-checkbox__icon--disabled {
&--disabled {
background-color: #ebedf0;
border-color: #c8c9cc;
}
.u-checkbox__icon--disabled--checked {
&--disabled--checked {
color: #c8c9cc !important;
}
}
.u-checkbox__label {
&__label {
word-wrap: break-word;
margin-left: 10rpx;
margin-right: 24rpx;
color: $u-content-color;
font-size: 30rpx;
}
.u-checkbox__label--disabled {
&--disabled {
color: #c8c9cc;
}
.u-checkbox__label:empty {
margin: 0;
}
}
</style>
uview-ui/components/u-circle-progress/u-circle-progress.vue
View file @ 50d7b2c0
......@@ -7,9 +7,11 @@
backgroundColor: bgColor
}"
>
<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
<canvas
class="u-canvas-bg"
:canvas-id="elBgId"
:id="elBgId"
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
......@@ -18,6 +20,7 @@
<canvas
class="u-canvas"
:canvas-id="elId"
:id="elId"
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
......
uview-ui/components/u-field/u-field.vue
View file @ 50d7b2c0
......@@ -23,7 +23,7 @@
:type="type"
class="u-flex-1 u-field__input-wrap"
:value="value"
:password="type === 'password' ? 'text' : type"
:password="password || this.type === 'password'"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ 50d7b2c0
<template>
<view class="u-form-item" :class="{'u-border-bottom': parentParam.borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
<view class="u-form-item__body" :style="{
flexDirection: parentParam.labelPosition == 'left' ? 'row' : 'column'
flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
}">
<view class="u-form-item--left" :style="{
width: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%',
flex: `0 0 ${parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%'}`,
marginBottom: parentParam.labelPosition == 'left' ? 0 : '10rpx',
width: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%',
flex: `0 0 ${elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%'}`,
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
}">
<!-- 为了块对齐 -->
......@@ -16,8 +16,8 @@
<view class="u-form-item--left__content__icon" v-if="leftIcon">
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
</view>
<view class="u-form-item--left__content__label" :style="[parentParam.labelStyle, {
'justify-content': parentParam.labelAlign == 'left' ? 'flex-star' : parentParam.labelAlign == 'center' ? 'center' : 'flex-end'
<view class="u-form-item--left__content__label" :style="[elLabelStyle, {
'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
}]">
{{label}}
</view>
......@@ -36,7 +36,7 @@
</view>
</view>
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
paddingLeft: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '0',
paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
}">{{validateMessage}}</view>
</view>
</template>
......@@ -53,11 +53,11 @@ schema.warning = function(){};
* @tutorial http://uviewui.com/components/form.html
* @property {String} label 左侧提示文字
* @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
* @property {Boolean} border-bottom 是否显示表单域的下划线边框(默认true)
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方(默认left)
* @property {Boolean} border-bottom 是否显示表单域的下划线边框
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
* @property {Object} label-style lable的样式，对象形式
* @property {String} label-align lable的对齐方式(默认left)
* @property {String} label-align lable的对齐方式
* @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
* @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
* @property {Object} left-icon-style 左侧图标的样式，对象形式
......@@ -89,7 +89,7 @@ export default {
},
// 是否显示表单域的下划线边框
borderBottom: {
type: [Boolean, String],
type: [String, Boolean],
default: ''
},
// label的位置，left-左边，top-上边
......@@ -100,7 +100,7 @@ export default {
// label的宽度，单位rpx
labelWidth: {
type: [String, Number],
default: 90
default: ''
},
// lable的样式，对象形式
labelStyle: {
......@@ -151,26 +151,12 @@ export default {
validateState: '', // 是否校验成功
validateMessage: '' ,// 校验失败的提示语
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
// border-bottom-下边框呈现红色，none-无提示
errorType: ['message'],
parentParam: {
labelStyle: {}, // lable的样式，对象形式
labelAlign: '', // lable的对齐方式
labelWidth: '', // 提示文字的宽度，单位rpx
labelPosition: '', // 表单域提示文字的位置
borderBottom: '', // 是否显示表单域的下划线边框
}
};
},
created() {
// 如果子组件有值，优先使用子组件的，否则使用u-from提供的值
this.parentParam = this.$u.getParent.call(this, 'u-form', {
labelStyle: this.labelStyle,
labelWidth: this.labelWidth,
labelPosition: this.labelPosition,
borderBottom: this.borderBottom,
labelAlign: this.labelAlign
});
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
this.parent = this.$u.$parent.call(this, 'u-form');
},
watch: {
validateState(val) {
......@@ -180,7 +166,7 @@ export default {
"uForm.errorType"(val) {
this.errorType = val;
this.broadcastInputError();
}
},
},
computed: {
fieldValue() {
......@@ -194,6 +180,28 @@ export default {
else return false;
}
},
// label的宽度
elLabelWidth() {
// label默认宽度为90，优先使用本组件的值，如果没有，则用u-form的值
return this.labelWidth ? this.labelWidth : (this.parent ? this.parent.labelWidth : 90);
},
// label的样式
elLabelStyle() {
return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parent ? this.parent.labelStyle : {});
},
// label的位置，左侧或者上方
elLabelPosition() {
return this.labelPosition ? this.labelPosition : (this.parent ? this.parent.labelPosition : 'left');
},
// label的对齐方式
elLabelAlign() {
return this.labelAlign ? this.labelAlign : (this.parent ? this.parent.labelAlign : 'left');
},
// label的下划线
elBorderBottom() {
// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值
return this.borderBottom !== '' ? this.borderBottom : this.parent ? this.parent.borderBottom : true;
}
},
methods: {
broadcastInputError() {
......
uview-ui/components/u-form/u-form.vue
View file @ 50d7b2c0
......@@ -8,6 +8,11 @@
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
* @tutorial http://uviewui.com/components/form.html
* @property {Object} model 表单数据对象
* @property {Boolean} border-bottom 是否显示表单域的下划线边框
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
* @property {Object} label-style lable的样式，对象形式
* @property {String} label-align lable的对齐方式
* @property {Object} rules 通过ref设置，见官网说明
* @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
* @example <u-form :model="form" ref="uForm"></u-form>
......
uview-ui/components/u-input/u-input.vue
View file @ 50d7b2c0
......@@ -194,7 +194,6 @@ export default {
validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
focused: false, // 当前是否处于获得焦点的状态
showPassword: false, // 是否预览密码
marginRight: 0, // 输入框右边的距离，当获得焦点时各一个后面的距离，避免点击右边图标误触输入框
};
},
watch: {
......@@ -206,14 +205,7 @@ export default {
value: nVal
}
})
// 值变化，且是右对齐时，计算右侧的清除图标的位置尺寸，避免input-align=right时文字与清除图标重合
if(oVal == '' && this.inputAlign == 'right') this.getMarginRight();
},
focused(nVal) {
if(this.clearable && this.value) {
this.getMarginRight();
}
}
},
computed: {
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
......@@ -225,7 +217,6 @@ export default {
// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
style.marginRight = this.marginRight + 'px';
style = Object.assign(style, this.customStyle);
return style;
},
......@@ -238,18 +229,7 @@ export default {
// 监听u-form-item发出的错误事件，将输入框边框变红色
this.$on('on-form-item-error', this.onFormItemError);
},
mounted() {
this.getMarginRight();
},
methods: {
// 计算输入框的右边距
getMarginRight() {
this.$nextTick(() => {
this.$uGetRect('.u-input__right-icon').then(res => {
this.marginRight = res.width;
})
})
},
/**
* change 事件
* @param event
......@@ -303,11 +283,13 @@ export default {
.u-input {
position: relative;
flex: 1;
display: flex;
&__input {
//height: $u-form-item-height;
font-size: 28rpx;
color: $u-main-color;
flex: 1;
}
&__textarea {
......@@ -316,6 +298,7 @@ export default {
color: $u-main-color;
padding: 10rpx 0;
line-height: normal;
flex: 1;
}
&--border {
......@@ -329,11 +312,6 @@ export default {
}
&__right-icon {
position: absolute;
right: 0;
top: 50%;
z-index: 3;
transform: translateY(-50%);
&__item {
margin-left: 10rpx;
......
uview-ui/components/u-loadmore/u-loadmore.vue
View file @ 50d7b2c0
......@@ -28,7 +28,8 @@
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
* @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 自定义显示的文字，见上方说明示例
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
......
uview-ui/components/u-number-box/u-number-box.vue
View file @ 50d7b2c0
......@@ -221,7 +221,6 @@
} catch (e) {
baseNum2 = 0;
}
console.log(num1, num2, baseNum1, baseNum2);
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
......
uview-ui/components/u-picker/u-picker.vue
View file @ 50d7b2c0
......@@ -563,7 +563,8 @@ export default {
},
// 获取时间戳
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;
}
}
......
uview-ui/components/u-popup/u-popup.vue
View file @ 50d7b2c0
......@@ -2,7 +2,7 @@
<view v-if="visibleSync" :style="[customStyle, {
zIndex: uZindex - 1
}]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer">
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
<u-mask :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view
class="u-drawer-content"
@tap="modeCenterClose(mode)"
......
uview-ui/components/u-radio-group/u-radio-group.vue
View file @ 50d7b2c0
......@@ -11,10 +11,14 @@
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
* @tutorial https://www.uviewui.com/components/radio.html
* @property {Boolean} disabled 是否禁用所有radio（默认false）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @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 {Boolean} wrap 是否每个radio都换行（默认false）
* @event {Function} change 任一个radio状态发生变化时触发
* @example <u-radio-group v-model="value"></u-radio-group>
*/
export default {
......@@ -41,6 +45,21 @@
type: [String, Number],
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的宽度
width: {
type: String,
......@@ -64,10 +83,10 @@
this.$emit('input', val);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function() {
this.$emit('change', this.value);
// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
this.$emit('change', val);
// 发出事件，用于在表单组件中嵌入radio的情况，进行验证
// 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', this.value);
this.dispatch('u-form-item', 'on-form-change', val);
});
}
}
......
uview-ui/components/u-radio/u-radio.vue
View file @ 50d7b2c0
<template>
<view class="u-radio" :style="[radioStyle]">
<view class="u-radio__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-radio__icon" :style="[iconStyle]" />
<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon
name="checkbox-mark"
:size="elIconSize"
:color="iconColor"/>
</view>
<view class="u-label-class u-radio__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx'
<view class="u-radio__label" @tap="onClickLabel" :style="{
fontSize: $u.addUnit(labelSize)
}">
<slot />
</view>
......@@ -22,7 +25,7 @@
* @property {String} shape 形状，见上方说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true）
* @property {String} active-color 选中时的颜色，如设置radioGroup的active-color将失效
* @property {String} active-color 选中时的颜色，如设置parent的active-color将失效
* @event {Function} change 某个radio状态发生变化时触发(选中状态)
* @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
*/
......@@ -37,19 +40,19 @@
// 形状，square为方形，circle为原型
shape: {
type: String,
default: 'circle'
default: ''
},
// 是否禁用
disabled: {
type: Boolean,
default: false
type: [String, Boolean],
default: ''
},
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: Boolean,
default: false
type: [String, Boolean],
default: ''
},
// 选中状态下的颜色，如设置此值，将会覆盖radioGroup的activeColor值
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
activeColor: {
type: String,
default: ''
......@@ -57,66 +60,87 @@
// 图标的大小，单位rpx
iconSize: {
type: [String, Number],
default: 20
default: ''
},
// label的字体大小，rpx单位
labelSize: {
type: [String, Number],
default: 28
default: ''
},
},
inject: ['radioGroup'],
data() {
return {
parentDisabled: false
};
},
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: {
// 设置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() {
let style = {};
if (this.radioActiveColor && this.name == this.radioGroup.value && !this.disabled && !this.parentDisabled) {
style.borderColor = this.radioActiveColor;
style.backgroundColor = this.radioActiveColor;
if (this.elActiveColor && this.name == this.parent.value && !this.elDisabled) {
style.borderColor = this.elActiveColor;
style.backgroundColor = this.elActiveColor;
}
style.width = this.radioGroup.size + 'rpx';
style.height = this.radioGroup.size + 'rpx';
style.width = this.$u.addUnit(this.elSize);
style.height = this.$u.addUnit(this.elSize);
return style;
},
iconColor() {
return this.name == this.radioGroup.value ? '#ffffff' : 'transparent';
return this.name == this.parent.value ? '#ffffff' : 'transparent';
},
iconClass() {
let classs = [];
classs.push('u-radio__icon--' + this.shape);
if (this.name == this.radioGroup.value) classs.push('u-radio__icon--checked');
if (this.disabled || this.parentDisabled) classs.push('u-radio__icon--disabled');
if (this.name == this.radioGroup.value && (this.disabled || this.parentDisabled)) classs.push(
'u-radio__icon--disabled--checked');
return classs;
},
// 激活的颜色，可能受radioGroup和本组件的activeColor影响
// 本组件的activeColor值优先
radioActiveColor() {
return this.activeColor ? this.activeColor : this.radioGroup.activeColor;
let classes = [];
classes.push('u-radio__icon-wrap--' + this.shape);
if (this.name == this.parent.value) classes.push('u-radio__icon-wrap--checked');
if (this.elDisabled) classes.push('u-radio__icon-wrap--disabled');
if (this.name == this.parent.value && this.elDisabled) classes.push(
'u-radio__icon-wrap--disabled--checked');
// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
return classes.join(' ');
},
radioStyle() {
let style = {};
if(this.radioGroup.width) {
style.width = this.radioGroup.width;
if (this.parent.width) {
style.width = this.parent.width;
// #ifdef MP
// 各家小程序因为它们特殊的编译结构，使用float布局
style.float = 'left';
// #endif
// #ifndef MP
// H5和APP使用flex布局
style.flex = `0 0 ${this.radioGroup.width}`;
style.flex = `0 0 ${this.parent.width}`;
// #endif
}
if(this.radioGroup.wrap) {
if (this.parent.wrap) {
style.width = '100%';
// #ifndef MP
// H5和APP使用flex布局，将宽度设置100%，即可自动换行
......@@ -128,19 +152,20 @@
},
methods: {
onClickLabel() {
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) {
this.radioGroup.setValue(this.name);
if (!this.elLabelDisabled) {
this.parent.setValue(this.name);
this.emitEvent();
}
},
toggle() {
if (!this.disabled && !this.parentDisabled) {
this.radioGroup.setValue(this.name);
if (!this.elDisabled) {
this.parent.setValue(this.name);
this.emitEvent();
}
},
emitEvent() {
this.$emit('change', this.name)
// u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
if(this.parent.value != this.name) this.$emit('change', this.name);
},
}
};
......@@ -152,30 +177,16 @@
.u-radio {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
line-height: 1.8;
}
.u-radio__icon-wrap,
.u-radio__label {
&__icon-wrap {
color: $u-content-color;
}
.u-radio__icon-wrap {
-webkit-flex: none;
flex: none;
}
.u-radio__icon {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
flex: none;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
width: 42rpx;
......@@ -186,44 +197,41 @@
font-size: 20px;
border: 1px solid #c8c9cc;
transition-duration: 0.2s;
}
.u-radio__icon--circle {
&--circle {
border-radius: 100%;
}
.u-radio__icon--square {
&--square {
border-radius: 3px;
}
.u-radio__icon--checked {
&--checked {
color: #fff;
background-color: #2979ff;
border-color: #2979ff;
}
.u-radio__icon--disabled {
&--disabled {
background-color: #ebedf0;
border-color: #c8c9cc;
}
.u-radio__icon--disabled--checked {
&--disabled--checked {
color: #c8c9cc !important;
}
}
.u-radio__label {
&__label {
word-wrap: break-word;
margin-left: 10rpx;
margin-right: 24rpx;
color: $u-content-color;
font-size: 30rpx;
}
.u-radio__label--disabled {
&--disabled {
color: #c8c9cc;
}
.u-radio__label:empty {
margin: 0;
}
}
</style>
uview-ui/components/u-steps/u-steps.vue
View file @ 50d7b2c0
<template>
<view class="">
<view class="u-steps">
<view class="u-steps-item" v-for="(item,index) in list" :key="index">
<view class="u-steps-item-num" v-if="mode == 'number' && current < index">{{index+1}}</view>
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? activeColor : unActiveColor}"></view>
<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-line" :style="{backgroundColor: index <= current ? activeColor : unActiveColor, top: mode == 'dot' ? '24rpx' : '36rpx'}">
<view
class="u-steps"
:style="{
flexDirection: direction
}"
>
<view class="u-steps__item"
: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>
......@@ -15,20 +42,21 @@
</template>
<script>
/**
/**
* steps 步骤条
* @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
* @tutorial https://www.uviewui.com/components/steps.html
* @property {String} mode 设置模式（默认dot）
* @property {Array} list 数轴条数据，数组。具体见上方示例
* @property {String} type type主题（默认primary）
* @property {String} direction row-横向，column-竖向（默认row）
* @property {Number String} current 设置当前处于第几步
* @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效
* @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
* @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
*/
export default {
name: "u-steps",
export default {
name: 'u-steps',
props: {
// 步骤条的类型，dot|number
mode: {
......@@ -38,8 +66,8 @@
// 步骤条的数据
list: {
type: Array,
default () {
return []
default() {
return [];
}
},
// 主题类型, primary|success|info|warning|error
......@@ -60,81 +88,113 @@
// 未激活的颜色
unActiveColor: {
type: String,
default: '#606266'
default: '#909399'
},
// 自定义图标
icon: {
type: String,
default: 'checkmark'
},
// step的排列方向，row-横向，column-竖向
direction: {
type: String,
default: 'row'
}
},
data() {
return {
}
return {};
},
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
@import '../../libs/css/style.components.scss';
$u-steps-item-number-width: 44rpx;
$u-steps-item-dot-width: 20rpx;
.u-steps {
.u-steps {
display: flex;
}
.u-steps-item {
.u-steps__item {
flex: 1;
text-align: center;
position: relative;
min-width: 100rpx;
font-size: 26rpx;
color: #8799a3;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
&--row {
display: flex;
flex-direction: column;
.u-steps__item__line {
position: absolute;
z-index: 0;
left: 75%;
width: 50%;
&--dot {
top: calc(#{$u-steps-item-dot-width} / 2);
}
.u-steps-item .u-steps-item-line {
content: "";
&--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;
height: 2rpx;
width: calc(100% - 80rpx);
left: calc(0rpx - (100% - 80rpx) / 2);
top: 36rpx;
z-index: 0;
height: 50%;
top: 75%;
&--dot {
left: calc(#{$u-steps-item-dot-width} / 2);
}
.u-steps-item:first-child .u-steps-item-line {
display: none;
&--number {
left: calc(#{$u-steps-item-number-width} / 2);
}
}
}
.u-steps-item-num {
&__num {
display: flex;
align-items: center;
justify-content: center;
width: 44rpx;
height: 44rpx;
width: $u-steps-item-number-width;
height: $u-steps-item-number-width;
border: 1px solid #8799a3;
border-radius: 50%;
margin: 14rpx auto;
overflow: hidden;
}
.u-steps-item-dot {
width: 20rpx;
height: 20rpx;
&__dot {
width: $u-steps-item-dot-width;
height: $u-steps-item-dot-width;
display: flex;
border-radius: 50%;
margin: 14rpx auto;
}
.u-steps-item-checked {
display: flex;
align-items: center;
justify-content: center;
width: 44rpx;
color: #fff !important;
height: 44rpx;
border-radius: 50%;
margin: 14rpx auto;
overflow: hidden;
&__text--row {
margin-top: 14rpx;
}
&__text--column {
margin-left: 14rpx;
}
}
}
</style>
uview-ui/components/u-subsection/u-subsection.vue
View file @ 50d7b2c0
......@@ -19,6 +19,7 @@
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {String Number} height 组件高度，单位rpx（默认70）
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
......@@ -350,6 +351,6 @@
display: flex;
align-items: center;
position: relative;
z-index: 99;
z-index: 3;
}
</style>
uview-ui/components/u-swipe-action/u-swipe-action.vue
View file @ 50d7b2c0
......@@ -125,10 +125,6 @@ export default {
},
mounted() {
this.getActionRect();
// 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下"
setTimeout(() => {
this.showBtn = true;
}, 10);
},
methods: {
// 点击按钮
......@@ -202,6 +198,10 @@ export default {
getActionRect() {
this.$uGetRect('.u-swipe-action').then(res => {
this.movableAreaWidth = res.width;
// 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下"
this.$nextTick(() => {
this.showBtn = true;
})
});
},
// 点击内容触发事件
......
uview-ui/components/u-swiper/u-swiper.vue
View file @ 50d7b2c0
......@@ -137,12 +137,12 @@
type: [Number, String],
default: 500
},
// 是否衔接滑动，即到最后一张时接着滑动，是佛自动切换到第一张
// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
circular: {
type: Boolean,
default: true
},
// 图片的形式模式
// 图片的裁剪模式
imgMode: {
type: String,
default: 'aspectFill'
......
uview-ui/components/u-td/u-td.vue
View file @ 50d7b2c0
......@@ -23,7 +23,7 @@
},
data() {
return {
tr: []
};
},
inject: ['uTable', 'uTr'],
......@@ -33,7 +33,8 @@
}
},
created() {
// 定义在created中，避免微信小程序造成循环引用而报错
this.tr = []
},
computed: {
tdStyle() {
......
uview-ui/libs/config/config.js
View file @ 50d7b2c0
// 此版本发布于2020-07-08
let version = '1.4.8';
// 此版本发布于2020-07-15
let version = '1.5.2';
export default {
v: version,
......
uview-ui/libs/util/async-validator.js
View file @ 50d7b2c0
......@@ -866,7 +866,6 @@ function pattern$2(rule, value, callback, source, options) {
}
function date(rule, value, callback, source, options) {
// console.log('integer rule called %j', rule);
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); // console.log('validate on %s value', value);
......
uview-ui/package.json
View file @ 50d7b2c0
{
"name": "uview-ui",
"version": "1.5.0",
"version": "1.5.2",
"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
"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"],
......
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