<template>
|
<view
|
class="tn-form-item-class tn-form-item"
|
:class="{
|
'tn-border-solid-bottom': elBorderBottom,
|
'tn-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')
|
}"
|
>
|
<view
|
class="tn-form-item__body"
|
:style="{
|
flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
|
}"
|
>
|
<!-- 处理微信小程序中设置属性的问题，不设置值的时候会变成true -->
|
<view
|
class="tn-form-item--left"
|
:style="{
|
width: wLabelWidth,
|
flex: `0 0 ${wLabelWidth}`,
|
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx'
|
}"
|
>
|
<!-- 块对齐 -->
|
<view v-if="required || leftIcon || label" class="tn-form-item--left__content"
|
:style="[leftContentStyle]"
|
>
|
<!-- nvue不支持伪元素before -->
|
<view v-if="leftIcon" class="tn-form-item--left__content__icon">
|
<view :class="[`tn-icon-${leftIcon}`]" :style="leftIconStyle"></view>
|
</view>
|
<!-- <view
|
class="tn-form-item--left__content__label"
|
:style="[elLabelStyle, {
|
'justify-content': elLabelAlign === 'left' ? 'flex-satrt' : elLabelAlign === 'center' ? 'center' : 'flex-end'
|
}]"
|
>
|
{{label}}
|
</view> -->
|
<view
|
class="tn-form-item--left__content__label"
|
:style="[elLabelStyle]"
|
>
|
{{label}}
|
</view>
|
<text v-if="required" class="tn-form-item--left__content--required">*</text>
|
</view>
|
</view>
|
|
<view class="tn-form-item--right tn-flex">
|
<view class="tn-form-item--right__content">
|
<view class="tn-form-item--right__content__slot">
|
<slot></slot>
|
</view>
|
<view v-if="$slots.right || rightIcon" class="tn-form-item--right__content__icon tn-flex">
|
<view v-if="rightIcon" :class="[`tn-icon-${rightIcon}`]" :style="rightIconStyle"></view>
|
<slot name="right"></slot>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view
|
v-if="validateState === 'error' && showError('message')"
|
class="tn-form-item__message"
|
:style="{
|
paddingLeft: elLabelPosition === 'left' ? elLabelWidth + 'rpx' : '0'
|
}"
|
>
|
{{validateMessage}}
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Emitter from '../../libs/utils/emitter.js'
|
import schema from '../../libs/utils/async-validator.js'
|
// 去除警告信息
|
schema.warning = function() {}
|
|
export default {
|
mixins: [Emitter],
|
name: 'tn-form-item',
|
inject: {
|
tnForm: {
|
default() {
|
return null
|
}
|
}
|
},
|
props: {
|
// label提示语
|
label: {
|
type: String,
|
default: ''
|
},
|
// 绑定的值
|
prop: {
|
type: String,
|
default: ''
|
},
|
// 是否显示表单域的下划线边框
|
borderBottom: {
|
type:Boolean,
|
default: true
|
},
|
// label(标签名称)的位置
|
// left - 左边
|
// top - 上边
|
labelPosition: {
|
type: String,
|
default: ''
|
},
|
// label的宽度
|
labelWidth: {
|
type: Number,
|
default: 0
|
},
|
// label的对齐方式
|
// left - 左对齐
|
// top - 上对齐
|
// right - 右对齐
|
// bottom - 下对齐
|
labelAlign: {
|
type: String,
|
default: ''
|
},
|
// label 的样式
|
labelStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 左侧图标
|
leftIcon: {
|
type: String,
|
default: ''
|
},
|
// 右侧图标
|
rightIcon: {
|
type: String,
|
default: ''
|
},
|
// 左侧图标样式
|
leftIconStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 右侧图标样式
|
rightIconStyle: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// 是否显示必填项的*，不做校验用途
|
required: {
|
type: Boolean,
|
default: false
|
}
|
},
|
computed: {
|
// 处理微信小程序label的宽度
|
wLabelWidth() {
|
// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
|
return this.elLabelPosition === 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.elLabelWidth + 'rpx') : '100%'
|
},
|
// 是否显示错误提示
|
showError() {
|
return type => {
|
if (this.errorType.indexOf('none') >= 0) return false
|
else if (this.errorType.indexOf(type) >= 0) return true
|
else return false
|
}
|
},
|
// label的宽度(默认值为90)
|
elLabelWidth() {
|
return this.labelWidth != 0 ? this.labelWidth : (this.parentData.labelWidth != 0 ? this.parentData.labelWidth : 90)
|
},
|
// label的样式
|
elLabelStyle() {
|
return Object.keys(this.labelStyle).length ? this.labelStyle : (Object.keys(this.parentData.labelStyle).length ? 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() {
|
return this.borderBottom !== '' ? this.borderBottom : (this.parentData.borderBottom !== '' ? this.parentData.borderBottom : true)
|
},
|
leftContentStyle() {
|
let style = {}
|
if (this.elLabelPosition === 'left') {
|
switch(this.elLabelAlign) {
|
case 'left':
|
style.justifyContent = 'flex-start'
|
break
|
case 'center':
|
style.justifyContent = 'center'
|
break
|
default:
|
style.justifyContent = 'flex-end'
|
break
|
}
|
}
|
|
return style
|
}
|
},
|
data() {
|
return {
|
// 默认值
|
initialValue: '',
|
// 是否校验成功
|
validateState: '',
|
// 校验失败提示信息
|
validateMessage: '',
|
// 错误的提示方式（参考form组件）
|
errorType: ['message'],
|
// 当前子组件输入的值
|
fieldValue: '',
|
// 父组件的参数
|
// 由于再computed中无法得知this.parent的变化，所以放在data中
|
parentData: {
|
borderBottom: true,
|
labelWidth: 90,
|
labelPosition: 'left',
|
labelAlign: 'left',
|
labelStyle: {},
|
}
|
}
|
},
|
watch: {
|
validateState(val) {
|
this.broadcastInputError()
|
},
|
"tnForm.errorType"(val) {
|
this.errorType = val
|
this.broadcastInputError()
|
}
|
},
|
mounted() {
|
// 组件创建完成后，保存当前实例到form组件中
|
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用\
|
this.parent = this.$t.$parent.call(this, 'tn-form')
|
if (this.parent) {
|
// 遍历parentData属性，将parent中同名的属性赋值给parentData
|
Object.keys(this.parentData).map(key => {
|
this.parentData[key] = this.parent[key]
|
})
|
// 如果没有传入prop或者tnForm为空（单独使用form-item组件的时候），就不进行校验
|
if (this.prop) {
|
// 将本实例添加到父组件中
|
this.parent.fields.push(this)
|
this.errorType = this.parent.errorType
|
// 设置初始值
|
this.initialValue = this.fieldValue
|
// 添加表单校验，这里必须要写在$nextTick中，因为tn-form的rules是通过ref手动传入的
|
// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给tn-form，导致规则为空
|
this.$nextTick(() => {
|
this.setRules()
|
})
|
}
|
}
|
},
|
beforeDestroy() {
|
// 组件销毁前，将实例从tn-form的缓存中移除
|
// 如果当前没有prop的话表示当前不进行删除
|
if (this.parent && this.prop) {
|
this.parent.fields.map((item, index) => {
|
if (item === this) this.parent.fields.splice(index, 1)
|
})
|
}
|
},
|
methods: {
|
// 向input组件发出错误事件
|
broadcastInputError() {
|
this.broadcast('tn-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'))
|
},
|
// 设置校验规则
|
setRules() {
|
let that = this
|
// 从父组件tn-form拿到当前tn-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)
|
},
|
// 从form的rules属性中取出当前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规则
|
getFilterRule(triggerType = '') {
|
let rules = this.getRules()
|
// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
|
if (!triggerType) return rules
|
// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
|
// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
|
// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
|
return rules.filter(rule => rule.trigger && rule.trigger.indexOf(triggerType) !== -1)
|
},
|
// 校验数据
|
validation(trigger, callback = ()=>{}) {
|
// 校验之前先获取需要校验的值
|
this.fieldValue = this.parent.model[this.prop]
|
// blur和change是否有当前方式的校验规则
|
let rules = this.getFilterRule(trigger)
|
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件tn-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)
|
})
|
},
|
|
// 清空当前item信息
|
resetField() {
|
this.parent.model[this.prop] = this.initialValue
|
// 清空错误标记
|
this.validateState = 'success'
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tn-form-item {
|
display: flex;
|
flex-direction: column;
|
padding: 20rpx 0;
|
font-size: 28rpx;
|
color: $tn-font-color;
|
box-sizing: border-box;
|
line-height: $tn-form-item-height;
|
|
&__border-bottom--error:after {
|
border-color: $tn-color-red;
|
}
|
|
&__body {
|
display: flex;
|
flex-direction: row;
|
}
|
|
&--left {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
&__content {
|
display: flex;
|
flex-direction: row;
|
position: relative;
|
align-items: center;
|
padding-right: 18rpx;
|
flex: 1;
|
|
&--required {
|
position: relative;
|
right: 0;
|
vertical-align: middle;
|
color: $tn-color-red;
|
}
|
|
&__icon {
|
color: $tn-font-sub-color;
|
margin-right: 8rpx;
|
}
|
|
&__label {
|
// display: flex;
|
// flex-direction: row;
|
// align-items: center;
|
// flex: 1;
|
}
|
}
|
}
|
|
&--right {
|
flex: 1;
|
|
&__content {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex: 1;
|
|
&__slot {
|
flex: 1;
|
/* #ifndef MP */
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
/* #endif */
|
}
|
|
&__icon {
|
margin-left: 10rpx;
|
color: $tn-font-sub-color;
|
font-size: 30rpx;
|
}
|
}
|
}
|
|
&__message {
|
font-size: 24rpx;
|
line-height: 24rpx;
|
color: $tn-color-red;
|
margin-top: 12rpx;
|
}
|
}
|
</style>
|
