Skip to content

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

1. 修复field类型变成password的问题 

2. 修复u-form-item的label-align无效的问题
3. 修复alert-tips组件border-color和bg-color作用对象颠倒的问题
parent 5270afd2
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 154 deletions
pages.json
View file @ abfb1216
...@@ -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/componentsA/select/index", //启动页面，必选 "path": "pages/componentsB/steps/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到 "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }] }]
// }, },
"pages": [ "pages": [
// 演示-组件 // 演示-组件
{ {
......
pages/componentsC/test/index.vue
View file @ abfb1216
<template> <template>
<view> <view>
<u-select v-model="show" @confirm="confirm" :list="list"></u-select> <u-field></u-field>
<u-button @click="show = true">打开</u-button> <u-button @click="password = !password"></u-button>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
show: false, password: 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: []
}
}
]
};
},
methods: {
confirm(e) {
console.log(e);
}
} }
};
</script> </script>
<style>
</style>
\ No newline at end of file
uview-ui/components/u-alert-tips/u-alert-tips.vue
View file @ abfb1216
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
type ? 'u-alert-tips--bg--' + type + '-light' : '', type ? 'u-alert-tips--bg--' + type + '-light' : '',
type ? 'u-alert-tips--border--' + type + '-disabled' : '', type ? 'u-alert-tips--border--' + type + '-disabled' : '',
]" :style="{ ]" :style="{
backgroundColor: borderColor, backgroundColor: bgColor,
borderColor: bgColor borderColor: borderColor
}"> }">
<view class="u-icon-wrap"> <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> <u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="type"></u-icon>
......
uview-ui/components/u-checkbox-group/u-checkbox-group.vue
View file @ abfb1216
...@@ -13,7 +13,11 @@ ...@@ -13,7 +13,11 @@
* @property {String Number} max 最多能选中多少个checkbox（默认999） * @property {String Number} max 最多能选中多少个checkbox（默认999）
* @property {String Number} size 组件整体的大小，单位rpx（默认40） * @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {Boolean} disabled 是否禁用所有checkbox（默认false） * @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} width 宽度，需带单位
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
* @property {Boolean} wrap 是否每个checkbox都换行（默认false） * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff） * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ abfb1216
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
* checkbox 复选框 * checkbox 复选框
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。 * @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
* @tutorial https://www.uviewui.com/components/checkbox.html * @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} label-size label字体大小，单位rpx（默认28）
* @property {String Number} name checkbox组件的标示符 * @property {String Number} name checkbox组件的标示符
* @property {String} shape 形状，见官网说明（默认circle） * @property {String} shape 形状，见官网说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false） * @property {Boolean} disabled 是否禁用
* @property {Boolean} label-disabled 点击文本是否可以操作checkbox（默认true） * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效 * @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象 * @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox> * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
...@@ -46,13 +46,13 @@ ...@@ -46,13 +46,13 @@
}, },
// 是否禁用 // 是否禁用
disabled: { disabled: {
type: Boolean, type: [Boolean, String],
default: false default: ''
}, },
// 是否禁止点击提示语选中复选框 // 是否禁止点击提示语选中复选框
labelDisabled: { labelDisabled: {
type: Boolean, type: [Boolean, String],
default: false default: ''
}, },
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值 // 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
activeColor: { activeColor: {
...@@ -90,11 +90,11 @@ ...@@ -90,11 +90,11 @@
computed: { computed: {
// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置 // 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
isDisabled() { isDisabled() {
return this.parent ? this.parent.disabled || this.disabled : this.disabled; return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
}, },
// 是否禁用label点击 // 是否禁用label点击
isLabelDisabled() { isLabelDisabled() {
return this.parent ? this.parent.labelDisabled || this.labelDisabled : this.labelDisabled; return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
}, },
// 组件尺寸，对应size的值，默认值为34rpx // 组件尺寸，对应size的值，默认值为34rpx
checkboxSize() { checkboxSize() {
......
uview-ui/components/u-field/u-field.vue
View file @ abfb1216
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
:type="type" :type="type"
class="u-flex-1 u-field__input-wrap" class="u-flex-1 u-field__input-wrap"
:value="value" :value="value"
:password="type === 'password' ? 'text' : type" :password="password || this.type === 'password'"
:placeholder="placeholder" :placeholder="placeholder"
:placeholderStyle="placeholderStyle" :placeholderStyle="placeholderStyle"
:disabled="disabled" :disabled="disabled"
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ abfb1216
<template> <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="{ <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="{ <view class="u-form-item--left" :style="{
width: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%', width: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%',
flex: `0 0 ${parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%'}`, flex: `0 0 ${elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '100%'}`,
marginBottom: parentParam.labelPosition == 'left' ? 0 : '10rpx', marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
}"> }">
<!-- 为了块对齐 --> <!-- 为了块对齐 -->
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<view class="u-form-item--left__content__icon" v-if="leftIcon"> <view class="u-form-item--left__content__icon" v-if="leftIcon">
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon> <u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
</view> </view>
<view class="u-form-item--left__content__label" :style="[parentParam.labelStyle, { <view class="u-form-item--left__content__label" :style="[elLabelStyle, {
'justify-content': parentParam.labelAlign == 'left' ? 'flex-star' : parentParam.labelAlign == 'center' ? 'center' : 'flex-end' 'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
}]"> }]">
{{label}} {{label}}
</view> </view>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</view> </view>
</view> </view>
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{ <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> }">{{validateMessage}}</view>
</view> </view>
</template> </template>
...@@ -53,11 +53,11 @@ schema.warning = function(){}; ...@@ -53,11 +53,11 @@ schema.warning = function(){};
* @tutorial http://uviewui.com/components/form.html * @tutorial http://uviewui.com/components/form.html
* @property {String} label 左侧提示文字 * @property {String} label 左侧提示文字
* @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的 * @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
* @property {Boolean} border-bottom 是否显示表单域的下划线边框(默认true) * @property {Boolean} border-bottom 是否显示表单域的下划线边框
* @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方(默认left) * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
* @property {String Number} label-width 提示文字的宽度，单位rpx（默认90） * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
* @property {Object} label-style lable的样式，对象形式 * @property {Object} label-style lable的样式，对象形式
* @property {String} label-align lable的对齐方式(默认left) * @property {String} label-align lable的对齐方式
* @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址 * @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
* @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址 * @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
* @property {Object} left-icon-style 左侧图标的样式，对象形式 * @property {Object} left-icon-style 左侧图标的样式，对象形式
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
// label的宽度，单位rpx // label的宽度，单位rpx
labelWidth: { labelWidth: {
type: [String, Number], type: [String, Number],
default: 90 default: ''
}, },
// lable的样式，对象形式 // lable的样式，对象形式
labelStyle: { labelStyle: {
...@@ -151,26 +151,12 @@ export default { ...@@ -151,26 +151,12 @@ export default {
validateState: '', // 是否校验成功 validateState: '', // 是否校验成功
validateMessage: '' ,// 校验失败的提示语 validateMessage: '' ,// 校验失败的提示语
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色， // 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
// border-bottom-下边框呈现红色，none-无提示
errorType: ['message'], errorType: ['message'],
parentParam: {
labelStyle: {}, // lable的样式，对象形式
labelAlign: '', // lable的对齐方式
labelWidth: '', // 提示文字的宽度，单位rpx
labelPosition: '', // 表单域提示文字的位置
borderBottom: '', // 是否显示表单域的下划线边框
}
}; };
}, },
created() { created() {
// 如果子组件有值，优先使用子组件的，否则使用u-from提供的值 // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
this.parentParam = this.$u.getParent.call(this, 'u-form', { this.parent = this.$u.$parent.call(this, 'u-form');
labelStyle: this.labelStyle,
labelWidth: this.labelWidth,
labelPosition: this.labelPosition,
borderBottom: this.borderBottom,
labelAlign: this.labelAlign
});
}, },
watch: { watch: {
validateState(val) { validateState(val) {
...@@ -180,7 +166,7 @@ export default { ...@@ -180,7 +166,7 @@ export default {
"uForm.errorType"(val) { "uForm.errorType"(val) {
this.errorType = val; this.errorType = val;
this.broadcastInputError(); this.broadcastInputError();
} },
}, },
computed: { computed: {
fieldValue() { fieldValue() {
...@@ -194,6 +180,28 @@ export default { ...@@ -194,6 +180,28 @@ export default {
else return false; 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: { methods: {
broadcastInputError() { broadcastInputError() {
......
uview-ui/components/u-form/u-form.vue
View file @ abfb1216
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
* @tutorial http://uviewui.com/components/form.html * @tutorial http://uviewui.com/components/form.html
* @property {Object} model 表单数据对象 * @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 {Object} rules 通过ref设置，见官网说明
* @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message']) * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
* @example <u-form :model="form" ref="uForm"></u-form> * @example <u-form :model="form" ref="uForm"></u-form>
......
uview-ui/components/u-popup/u-popup.vue
View file @ abfb1216
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view v-if="visibleSync" :style="[customStyle, { <view v-if="visibleSync" :style="[customStyle, {
zIndex: uZindex - 1 zIndex: uZindex - 1
}]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer"> }]" :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 <view
class="u-drawer-content" class="u-drawer-content"
@tap="modeCenterClose(mode)" @tap="modeCenterClose(mode)"
......
uview-ui/components/u-subsection/u-subsection.vue
View file @ abfb1216
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266） * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button） * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
* @property {String Number} font-size 字体大小，单位rpx（默认28） * @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {String Number} height 组件高度，单位rpx（默认70）
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true） * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef） * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
...@@ -350,6 +351,6 @@ ...@@ -350,6 +351,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 99; z-index: 3;
} }
</style> </style>
uview-ui/components/u-swiper/u-swiper.vue
View file @ abfb1216
...@@ -137,12 +137,12 @@ ...@@ -137,12 +137,12 @@
type: [Number, String], type: [Number, String],
default: 500 default: 500
}, },
// 是否衔接滑动，即到最后一张时接着滑动，是佛自动切换到第一张 // 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
circular: { circular: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 图片的形式模式 // 图片的裁剪模式
imgMode: { imgMode: {
type: String, type: String,
default: 'aspectFill' default: 'aspectFill'
......
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