You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
14 KiB
431 lines
14 KiB
<template> |
|
<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: elLabelPosition == 'left' ? 'row' : 'column' |
|
}"> |
|
<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" --> |
|
<view class="u-form-item--left" :style="{ |
|
width: uLabelWidth, |
|
flex: `0 0 ${uLabelWidth}`, |
|
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx', |
|
}"> |
|
<!-- 为了块对齐 --> |
|
<view class="u-form-item--left__content" v-if="required || leftIcon || label"> |
|
<!-- nvue不支持伪元素before --> |
|
<text v-if="required" class="u-form-item--left__content--required">*</text> |
|
<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="[elLabelStyle, { |
|
'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end' |
|
}]"> |
|
{{label}} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="u-form-item--right u-flex"> |
|
<view class="u-form-item--right__content"> |
|
<view class="u-form-item--right__content__slot "> |
|
<slot /> |
|
</view> |
|
<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon"> |
|
<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon> |
|
<slot name="right" /> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{ |
|
paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0', |
|
}">{{validateMessage}}</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Emitter from '../../libs/util/emitter.js'; |
|
import schema from '../../libs/util/async-validator'; |
|
// 去除警告信息 |
|
schema.warning = function() {}; |
|
|
|
/** |
|
* form-item 表单item |
|
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。 |
|
* @tutorial http://uviewui.com/components/form.html |
|
* @property {String} label 左侧提示文字 |
|
* @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的 |
|
* @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 {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址 |
|
* @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址 |
|
* @property {Object} left-icon-style 左侧图标的样式，对象形式 |
|
* @property {Object} right-icon-style 右侧图标的样式，对象形式 |
|
* @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false) |
|
* @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item> |
|
*/ |
|
|
|
export default { |
|
name: 'u-form-item', |
|
mixins: [Emitter], |
|
inject: { |
|
uForm: { |
|
default () { |
|
return null |
|
} |
|
} |
|
}, |
|
props: { |
|
// input的label提示语 |
|
label: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 绑定的值 |
|
prop: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 是否显示表单域的下划线边框 |
|
borderBottom: { |
|
type: [String, Boolean], |
|
default: '' |
|
}, |
|
// label的位置，left-左边，top-上边 |
|
labelPosition: { |
|
type: String, |
|
default: '' |
|
}, |
|
// label的宽度，单位rpx |
|
labelWidth: { |
|
type: [String, Number], |
|
default: '' |
|
}, |
|
// lable的样式，对象形式 |
|
labelStyle: { |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
// lable字体的对齐方式 |
|
labelAlign: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 右侧图标 |
|
rightIcon: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 左侧图标 |
|
leftIcon: { |
|
type: String, |
|
default: '' |
|
}, |
|
// 左侧图标的样式 |
|
leftIconStyle: { |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
// 左侧图标的样式 |
|
rightIconStyle: { |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 |
|
required: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
initialValue: '', // 存储的默认值 |
|
// isRequired: false, // 是否必填，由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成 |
|
validateState: '', // 是否校验成功 |
|
validateMessage: '', // 校验失败的提示语 |
|
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色， |
|
errorType: ['message'], |
|
fieldValue: '', // 获取当前子组件input的输入的值 |
|
// 父组件的参数，在computed计算中，无法得知this.parent发生变化，故将父组件的参数值，放到data中 |
|
parentData: { |
|
borderBottom: true, |
|
labelWidth: 90, |
|
labelPosition: 'left', |
|
labelStyle: {}, |
|
labelAlign: 'left', |
|
} |
|
}; |
|
}, |
|
watch: { |
|
validateState(val) { |
|
this.broadcastInputError(); |
|
}, |
|
// 监听u-form组件的errorType的变化 |
|
"uForm.errorType"(val) { |
|
this.errorType = val; |
|
this.broadcastInputError(); |
|
}, |
|
}, |
|
computed: { |
|
// 计算后的label宽度，由于需要多个判断，故放到computed中 |
|
uLabelWidth() { |
|
// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto |
|
return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this |
|
.elLabelWidth)) : '100%'; |
|
}, |
|
showError() { |
|
return type => { |
|
// 如果errorType数组中含有none，或者toast提示类型 |
|
if (this.errorType.indexOf('none') >= 0) return false; |
|
else if (this.errorType.indexOf(type) >= 0) return true; |
|
else return false; |
|
} |
|
}, |
|
// label的宽度 |
|
elLabelWidth() { |
|
// label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值 |
|
return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData |
|
.labelWidth : |
|
90); |
|
}, |
|
// label的样式 |
|
elLabelStyle() { |
|
return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle : |
|
{}); |
|
}, |
|
// label的位置，左侧或者上方 |
|
elLabelPosition() { |
|
return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition : |
|
'left'); |
|
}, |
|
// label的对齐方式 |
|
elLabelAlign() { |
|
return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left'); |
|
}, |
|
// label的下划线 |
|
elBorderBottom() { |
|
// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值 |
|
return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom : |
|
true; |
|
} |
|
}, |
|
methods: { |
|
broadcastInputError() { |
|
// 子组件发出事件，第三个参数为true或者false，true代表有错误 |
|
this.broadcast('u-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border')); |
|
}, |
|
// 判断是否需要required校验 |
|
setRules() { |
|
let that = this; |
|
// 由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成 |
|
// 从父组件u-form拿到当前u-form-item需要验证 的规则 |
|
// let rules = this.getRules(); |
|
// if (rules.length) { |
|
// this.isRequired = rules.some(rule => { |
|
// // 如果有必填项，就返回，没有的话，就是undefined |
|
// return rule.required; |
|
// }); |
|
// } |
|
|
|
// blur事件 |
|
this.$on('on-form-blur', that.onFieldBlur); |
|
// change事件 |
|
this.$on('on-form-change', that.onFieldChange); |
|
}, |
|
|
|
// 从u-form的rules属性中，取出当前u-form-item的校验规则 |
|
getRules() { |
|
// 父组件的所有规则 |
|
let rules = this.parent.rules; |
|
rules = rules ? rules[this.prop] : []; |
|
// 保证返回的是一个数组形式 |
|
return [].concat(rules || []); |
|
}, |
|
|
|
// blur事件时进行表单校验 |
|
onFieldBlur() { |
|
this.validation('blur'); |
|
}, |
|
|
|
// change事件进行表单校验 |
|
onFieldChange() { |
|
this.validation('change'); |
|
}, |
|
|
|
// 过滤出符合要求的rule规则 |
|
getFilteredRule(triggerType = '') { |
|
let rules = this.getRules(); |
|
// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证 |
|
if (!triggerType) return rules; |
|
// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件 |
|
// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change'] |
|
// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性 |
|
return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1); |
|
}, |
|
|
|
// 校验数据 |
|
validation(trigger, callback = () => {}) { |
|
// 检验之间，先获取需要校验的值 |
|
this.fieldValue = this.parent.model[this.prop]; |
|
// blur和change是否有当前方式的校验规则 |
|
let rules = this.getFilteredRule(trigger); |
|
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为 |
|
// 对count变量的统计错误而无法进入上一层的回调 |
|
if (!rules || rules.length === 0) { |
|
return callback(''); |
|
} |
|
// 设置当前的装填，标识为校验中 |
|
this.validateState = 'validating'; |
|
// 调用async-validator的方法 |
|
let validator = new schema({ |
|
[this.prop]: rules |
|
}); |
|
validator.validate({ |
|
[this.prop]: this.fieldValue |
|
}, { |
|
firstFields: true |
|
}, (errors, fields) => { |
|
// 记录状态和报错信息 |
|
this.validateState = !errors ? 'success' : 'error'; |
|
this.validateMessage = errors ? errors[0].message : ''; |
|
// 调用回调方法 |
|
callback(this.validateMessage); |
|
}); |
|
}, |
|
|
|
// 清空当前的u-form-item |
|
resetField() { |
|
this.parent.model[this.prop] = this.initialValue; |
|
// 设置为`success`状态，只是为了清空错误标记 |
|
this.validateState = 'success'; |
|
} |
|
}, |
|
|
|
// 组件创建完成时，将当前实例保存到u-form中 |
|
mounted() { |
|
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用 |
|
this.parent = this.$u.$parent.call(this, 'u-form'); |
|
if (this.parent) { |
|
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData |
|
Object.keys(this.parentData).map(key => { |
|
this.parentData[key] = this.parent[key]; |
|
}); |
|
// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验 |
|
if (this.prop) { |
|
// 将本实例添加到父组件中 |
|
this.parent.fields.push(this); |
|
this.errorType = this.parent.errorType; |
|
// 设置初始值 |
|
this.initialValue = this.fieldValue; |
|
// 添加表单校验，这里必须要写在$nextTick中，因为u-form的rules是通过ref手动传入的 |
|
// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给u-form，导致规则为空 |
|
this.$nextTick(() => { |
|
this.setRules(); |
|
}) |
|
} |
|
} |
|
}, |
|
|
|
// 组件销毁前，将实例从u-form的缓存中移除 |
|
beforeDestroy() { |
|
// 如果当前没有prop的话表示当前不要进行删除（因为没有注入） |
|
if (this.parent && this.prop) { |
|
this.parent.fields.map((item, index) => { |
|
if (item === this) this.parent.fields.splice(index, 1); |
|
}) |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/style.components.scss"; |
|
|
|
.u-form-item { |
|
@include vue-flex; |
|
// align-items: flex-start; |
|
padding: 20rpx 0; |
|
font-size: 28rpx; |
|
color: $u-main-color; |
|
box-sizing: border-box; |
|
line-height: $u-form-item-height; |
|
flex-direction: column; |
|
|
|
&__border-bottom--error:after { |
|
border-color: $u-type-error; |
|
} |
|
|
|
&__body { |
|
@include vue-flex; |
|
} |
|
|
|
&--left { |
|
@include vue-flex; |
|
align-items: center; |
|
|
|
&__content { |
|
position: relative; |
|
@include vue-flex; |
|
align-items: center; |
|
padding-right: 10rpx; |
|
flex: 1; |
|
|
|
&__icon { |
|
margin-right: 8rpx; |
|
} |
|
|
|
&--required { |
|
position: absolute; |
|
left: -16rpx; |
|
vertical-align: middle; |
|
color: $u-type-error; |
|
padding-top: 6rpx; |
|
} |
|
|
|
&__label { |
|
@include vue-flex; |
|
align-items: center; |
|
flex: 1; |
|
} |
|
} |
|
} |
|
|
|
&--right { |
|
flex: 1; |
|
|
|
&__content { |
|
@include vue-flex; |
|
align-items: center; |
|
flex: 1; |
|
|
|
&__slot { |
|
flex: 1; |
|
/* #ifndef MP */ |
|
@include vue-flex; |
|
align-items: center; |
|
/* #endif */ |
|
} |
|
|
|
&__icon { |
|
margin-left: 10rpx; |
|
color: $u-light-color; |
|
font-size: 30rpx; |
|
} |
|
} |
|
} |
|
|
|
&__message { |
|
font-size: 24rpx; |
|
line-height: 24rpx; |
|
color: $u-type-error; |
|
margin-top: 12rpx; |
|
} |
|
} |
|
</style>
|
|
|