czg_team/cashier-ipad-new
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2025-04-02 10:35:17 +08:00
commit 89db955ec1
701 changed files with 91082 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
uni_modules/uni-forms/components/uni-forms-item/readme.txt Normal file
View File

@@ -0,0 +1,8 @@
若没有错误信息， 则不显示。
<view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
修改为：
<view v-if="msg && msg != ' '" class="uni-forms-item__error" :class="{ 'msg--active': msg }">

597
uni_modules/uni-forms/components/uni-forms-item/uni-forms-item - 原始文件.vue Normal file
View File

@@ -0,0 +1,597 @@
<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 && !isRequired }" :style="{ width: localLabelWidth, justifyContent: localLabelAlign }">
<!-- <text v-if="isRequired" 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（默认65）
* @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的宽度 ，默认 80
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: "",
isRequired: false,
userRules: null,
localLabelAlign: "left",
localLabelWidth: "65px",
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()
this.isRequired = this.required
// 将需要校验的子组件加入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))
this.isRequired = this._isRequired()
},
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 ? 65 : "auto"))
// }
// return '65px'
},
// 处理 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>

601
uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue Normal file
View File

@@ -0,0 +1,601 @@
<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 && !isRequired }" :style="{ width: localLabelWidth, justifyContent: localLabelAlign }">
<text v-if="isRequired&&showRequired" class="is-required">*</text>
<text>{{ label }}</text>
</view>
</slot>
<!-- #ifndef APP-NVUE -->
<view class="uni-forms-item__content">
<slot></slot>
<view v-if="msg && msg != ' '" 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（默认65）
* @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: "",
},
showRequired:{
type: Boolean,
default:false
},
required: {
type: Boolean,
default: false,
},
label: {
type: String,
default: "",
},
// label的宽度 ，默认 80
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: "",
isRequired: false,
userRules: null,
localLabelAlign: "left",
localLabelWidth: "65px",
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()
this.isRequired = this.required
// 将需要校验的子组件加入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))
this.isRequired = this._isRequired()
},
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 ? 65 : "auto"))
// }
// return '65px'
},
// 处理 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: #EA4025;
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>