You've already forked guangan-mp
1.0.0
This commit is contained in:
@ -0,0 +1,627 @@
|
||||
<template>
|
||||
<view class="uni-forms-item"
|
||||
:class="['is-direction-' + localLabelPos ,border?'uni-forms-item--border':'' ,border && isFirstBorder?'is-first-border':'']">
|
||||
<slot name="label">
|
||||
<view class="uni-forms-item__label" :class="{'no-label':!label && !required}"
|
||||
:style="{width:localLabelWidth,justifyContent: localLabelAlign}">
|
||||
<text v-if="required" class="is-required">*</text>
|
||||
<text>{{label}}</text>
|
||||
</view>
|
||||
</slot>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uni-forms-item__content">
|
||||
<slot></slot>
|
||||
<view class="uni-forms-item__error" :class="{'msg--active':msg}">
|
||||
<text>{{msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="uni-forms-item__nuve-content">
|
||||
<view class="uni-forms-item__content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="uni-forms-item__error" :class="{'msg--active':msg}">
|
||||
<text class="error-text">{{msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* uni-fomrs-item 表单子组件
|
||||
* @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=2773
|
||||
* @property {Boolean} required 是否必填，左边显示红色"*"号
|
||||
* @property {String } label 输入框左边的文字提示
|
||||
* @property {Number } labelWidth label的宽度，单位px（默认70）
|
||||
* @property {String } labelAlign = [left|center|right] label的文字对齐方式（默认left）
|
||||
* @value left label 左侧显示
|
||||
* @value center label 居中
|
||||
* @value right label 右侧对齐
|
||||
* @property {String } errorMessage 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
|
||||
* @property {String } name 表单域的属性名，在使用校验规则时必填
|
||||
* @property {String } leftIcon 【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
|
||||
* @property {String } iconColor 【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
|
||||
* @property {String} validateTrigger = [bind|submit|blur] 【1.4.0废弃】校验触发器方式 默认 submit
|
||||
* @value bind 发生变化时触发
|
||||
* @value submit 提交时触发
|
||||
* @value blur 失去焦点触发
|
||||
* @property {String } labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
|
||||
* @value top 顶部显示 label
|
||||
* @value left 左侧显示 label
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniFormsItem',
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uniFormItem: this
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
form: {
|
||||
from: 'uniForm',
|
||||
default: null
|
||||
},
|
||||
},
|
||||
props: {
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
type: Array,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 表单域的属性名，在使用校验规则时必填
|
||||
name: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// label的宽度
|
||||
labelWidth: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label 居中方式，默认 left 取值 left/center/right
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 强制显示错误信息
|
||||
errorMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
// 1.4.0 弃用，统一使用 form 的校验时机
|
||||
// validateTrigger: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// 1.4.0 弃用，统一使用 form 的label 位置
|
||||
// labelPosition: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// 1.4.0 以下属性已经废弃，请使用 #label 插槽代替
|
||||
leftIcon: String,
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errMsg: '',
|
||||
userRules: null,
|
||||
localLabelAlign: 'left',
|
||||
localLabelWidth: '70px',
|
||||
localLabelPos: 'left',
|
||||
border: false,
|
||||
isFirstBorder: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 处理错误信息
|
||||
msg() {
|
||||
return this.errorMessage || this.errMsg;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 规则发生变化通知子组件更新
|
||||
'form.formRules'(val) {
|
||||
// TODO 处理头条vue3 watch不生效的问题
|
||||
// #ifndef MP-TOUTIAO
|
||||
this.init()
|
||||
// #endif
|
||||
},
|
||||
'form.labelWidth'(val) {
|
||||
// 宽度
|
||||
this.localLabelWidth = this._labelWidthUnit(val)
|
||||
|
||||
},
|
||||
'form.labelPosition'(val) {
|
||||
// 标签位置
|
||||
this.localLabelPos = this._labelPosition()
|
||||
},
|
||||
'form.labelAlign'(val) {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init(true)
|
||||
if (this.name && this.form) {
|
||||
// TODO 处理头条vue3 watch不生效的问题
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.$watch('form.formRules', () => {
|
||||
this.init()
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 监听变化
|
||||
this.$watch(
|
||||
() => {
|
||||
const val = this.form._getDataValue(this.name, this.form.localData)
|
||||
return val
|
||||
},
|
||||
(value, oldVal) => {
|
||||
const isEqual = this.form._isEqual(value, oldVal)
|
||||
// 简单判断前后值的变化，只有发生变化才会发生校验
|
||||
// TODO 如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
|
||||
// fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
|
||||
if (!isEqual) {
|
||||
const val = this.itemSetValue(value)
|
||||
this.onFieldChange(val, false)
|
||||
}
|
||||
}, {
|
||||
immediate: false
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
if (this.__isUnmounted) return
|
||||
this.unInit()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
this.__isUnmounted = true
|
||||
this.unInit()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 设置规则 ，主要用于小程序自定义检验规则
|
||||
* @param {Array} rules 规则源数据
|
||||
*/
|
||||
setRules(rules = null) {
|
||||
this.userRules = rules
|
||||
this.init(false)
|
||||
},
|
||||
// 兼容老版本表单组件
|
||||
setValue() {
|
||||
// console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
|
||||
},
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 校验数据
|
||||
* @param {any} value 需要校验的数据
|
||||
* @param {boolean} 是否立即校验
|
||||
* @return {Array|null} 校验内容
|
||||
*/
|
||||
async onFieldChange(value, formtrigger = true) {
|
||||
const {
|
||||
formData,
|
||||
localData,
|
||||
errShowType,
|
||||
validateCheck,
|
||||
validateTrigger,
|
||||
_isRequiredField,
|
||||
_realName
|
||||
} = this.form
|
||||
const name = _realName(this.name)
|
||||
if (!value) {
|
||||
value = this.form.formData[name]
|
||||
}
|
||||
// fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
|
||||
// this.errMsg = '';
|
||||
|
||||
// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
|
||||
const ruleLen = this.itemRules.rules && this.itemRules.rules.length
|
||||
if (!this.validator || !ruleLen || ruleLen === 0) return;
|
||||
|
||||
// 检验时机
|
||||
// let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
|
||||
const isRequiredField = _isRequiredField(this.itemRules.rules || []);
|
||||
let result = null;
|
||||
// 只有等于 bind 时 ，才能开启时实校验
|
||||
if (validateTrigger === 'bind' || formtrigger) {
|
||||
// 校验当前表单项
|
||||
result = await this.validator.validateUpdate({
|
||||
[name]: value
|
||||
},
|
||||
formData
|
||||
);
|
||||
|
||||
// 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined 和空的情况
|
||||
if (!isRequiredField && (value === undefined || value === '')) {
|
||||
result = null;
|
||||
}
|
||||
|
||||
// 判断错误信息显示类型
|
||||
if (result && result.errorMessage) {
|
||||
if (errShowType === 'undertext') {
|
||||
// 获取错误信息
|
||||
this.errMsg = !result ? '' : result.errorMessage;
|
||||
}
|
||||
if (errShowType === 'toast') {
|
||||
uni.showToast({
|
||||
title: result.errorMessage || '校验错误',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
if (errShowType === 'modal') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: result.errorMessage || '校验错误'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.errMsg = ''
|
||||
}
|
||||
// 通知 form 组件更新事件
|
||||
validateCheck(result ? result : null)
|
||||
} else {
|
||||
this.errMsg = ''
|
||||
}
|
||||
return result ? result : null;
|
||||
},
|
||||
/**
|
||||
* 初始组件数据
|
||||
*/
|
||||
init(type = false) {
|
||||
const {
|
||||
validator,
|
||||
formRules,
|
||||
childrens,
|
||||
formData,
|
||||
localData,
|
||||
_realName,
|
||||
labelWidth,
|
||||
_getDataValue,
|
||||
_setDataValue
|
||||
} = this.form || {}
|
||||
// 对齐方式
|
||||
this.localLabelAlign = this._justifyContent()
|
||||
// 宽度
|
||||
this.localLabelWidth = this._labelWidthUnit(labelWidth)
|
||||
// 标签位置
|
||||
this.localLabelPos = this._labelPosition()
|
||||
// 将需要校验的子组件加入form 队列
|
||||
this.form && type && childrens.push(this)
|
||||
|
||||
if (!validator || !formRules) return
|
||||
// 判断第一个 item
|
||||
if (!this.form.isFirstBorder) {
|
||||
this.form.isFirstBorder = true;
|
||||
this.isFirstBorder = true;
|
||||
}
|
||||
|
||||
// 判断 group 里的第一个 item
|
||||
if (this.group) {
|
||||
if (!this.group.isFirstBorder) {
|
||||
this.group.isFirstBorder = true;
|
||||
this.isFirstBorder = true;
|
||||
}
|
||||
}
|
||||
this.border = this.form.border;
|
||||
// 获取子域的真实名称
|
||||
const name = _realName(this.name)
|
||||
const itemRule = this.userRules || this.rules
|
||||
if (typeof formRules === 'object' && itemRule) {
|
||||
// 子规则替换父规则
|
||||
formRules[name] = {
|
||||
rules: itemRule
|
||||
}
|
||||
validator.updateSchema(formRules);
|
||||
}
|
||||
// 注册校验规则
|
||||
const itemRules = formRules[name] || {}
|
||||
this.itemRules = itemRules
|
||||
// 注册校验函数
|
||||
this.validator = validator
|
||||
// 默认值赋予
|
||||
this.itemSetValue(_getDataValue(this.name, localData))
|
||||
},
|
||||
unInit() {
|
||||
if (this.form) {
|
||||
const {
|
||||
childrens,
|
||||
formData,
|
||||
_realName
|
||||
} = this.form
|
||||
childrens.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.form.childrens.splice(index, 1)
|
||||
delete formData[_realName(item.name)]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置item 的值
|
||||
itemSetValue(value) {
|
||||
const name = this.form._realName(this.name)
|
||||
const rules = this.itemRules.rules || []
|
||||
const val = this.form._getValue(name, value, rules)
|
||||
this.form._setDataValue(name, this.form.formData, val)
|
||||
return val
|
||||
},
|
||||
|
||||
/**
|
||||
* 移除该表单项的校验结果
|
||||
*/
|
||||
clearValidate() {
|
||||
this.errMsg = '';
|
||||
},
|
||||
|
||||
// 是否显示星号
|
||||
_isRequired() {
|
||||
// TODO 不根据规则显示 星号，考虑后续兼容
|
||||
// if (this.form) {
|
||||
// if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
|
||||
// return true
|
||||
// }
|
||||
// return false
|
||||
// }
|
||||
return this.required
|
||||
},
|
||||
|
||||
// 处理对齐方式
|
||||
_justifyContent() {
|
||||
if (this.form) {
|
||||
const {
|
||||
labelAlign
|
||||
} = this.form
|
||||
let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
|
||||
if (labelAli === 'left') return 'flex-start';
|
||||
if (labelAli === 'center') return 'center';
|
||||
if (labelAli === 'right') return 'flex-end';
|
||||
}
|
||||
return 'flex-start';
|
||||
},
|
||||
// 处理 label宽度单位 ,继承父元素的值
|
||||
_labelWidthUnit(labelWidth) {
|
||||
|
||||
// if (this.form) {
|
||||
// const {
|
||||
// labelWidth
|
||||
// } = this.form
|
||||
return this.num2px(this.labelWidth ? this.labelWidth : (labelWidth || (this.label ? 70 : 'auto')))
|
||||
// }
|
||||
// return '70px'
|
||||
},
|
||||
// 处理 label 位置
|
||||
_labelPosition() {
|
||||
if (this.form) return this.form.labelPosition || 'left'
|
||||
return 'left'
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发时机
|
||||
* @param {Object} rule 当前规则内时机
|
||||
* @param {Object} itemRlue 当前组件时机
|
||||
* @param {Object} parentRule 父组件时机
|
||||
*/
|
||||
isTrigger(rule, itemRlue, parentRule) {
|
||||
// bind submit
|
||||
if (rule === 'submit' || !rule) {
|
||||
if (rule === undefined) {
|
||||
if (itemRlue !== 'bind') {
|
||||
if (!itemRlue) {
|
||||
return parentRule === '' ? 'bind' : 'submit';
|
||||
}
|
||||
return 'submit';
|
||||
}
|
||||
return 'bind';
|
||||
}
|
||||
return 'submit';
|
||||
}
|
||||
return 'bind';
|
||||
},
|
||||
num2px(num) {
|
||||
if (typeof num === 'number') {
|
||||
return `${num}px`
|
||||
}
|
||||
return num
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-forms-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
/* #ifdef APP-NVUE */
|
||||
// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
|
||||
padding-bottom: 22px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
margin-bottom: 22px;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* #endif */
|
||||
&.no-label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
/* #ifndef MP-TOUTIAO */
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
|
||||
// TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
|
||||
&>uni-easyinput,
|
||||
&>uni-data-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
& .uni-forms-item__nuve-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__error {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transition: transform 0.3s;
|
||||
transform: translateY(-100%);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 5px;
|
||||
/* #endif */
|
||||
|
||||
opacity: 0;
|
||||
|
||||
.error-text {
|
||||
// 只有 nvue 下这个样式才生效
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.msg--active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
// 位置修饰样式
|
||||
&.is-direction-left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.is-direction-top {
|
||||
flex-direction: column;
|
||||
|
||||
.uni-forms-item__label {
|
||||
padding: 0 0 8px;
|
||||
line-height: 1.5715;
|
||||
text-align: left;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: initial;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.is-required {
|
||||
// color: $uni-color-error;
|
||||
color: #dd524d;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-forms-item--border {
|
||||
margin-bottom: 0;
|
||||
padding: 10px 0;
|
||||
// padding-bottom: 0;
|
||||
border-top: 1px #eee solid;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-forms-item__content {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.uni-forms-item__error {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.uni-forms-item__error {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.is-first-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user