dz-app/uni_modules/uv-form/components/uv-form-item/uv-form-item.vue

<template>
    <view class="uv-form-item">
        <view
            class="uv-form-item__body"
            @tap="clickHandler"
            :style="[$uv.addStyle(customStyle), {
				flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
			}]"
        >
            <!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
            <slot name="label">
                <view
                    class="uv-form-item__body__left"
                    v-if="required || leftIcon || label"
                    :style="{
						width: $uv.addUnit(labelWidth || parentData.labelWidth),
						marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
					}"
                >
                    <!-- 为了块对齐 -->
                    <view class="uv-form-item__body__left__content">
                        <!-- nvue不支持伪元素before -->
                        <text
                            v-if="required"
                            class="uv-form-item__body__left__content__required"
                        >*
                        </text>
                        <view
                            class="uv-form-item__body__left__content__icon"
                            v-if="leftIcon"
                        >
                            <uv-icon
                                :name="leftIcon"
                                :custom-style="leftIconStyle"
                            ></uv-icon>
                        </view>
                        <text
                            class="uv-form-item__body__left__content__label"
                            :style="[parentData.labelStyle, {
								justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
							}]"
                        >{{ label }}
                        </text>
                    </view>
                </view>
            </slot>
            <view class="uv-form-item__body__right">
                <view class="uv-form-item__body__right__content">
                    <view class="uv-form-item__body__right__content__slot">
                        <slot/>
                    </view>
                    <view class="item__body__right__content__icon">
                        <slot name="right"/>
                    </view>
                </view>
            </view>
        </view>
        <slot name="error">
            <uv-transition
                :show="true"
                :duration="100"
                mode="fade"
                v-if="!!message && parentData.errorType === 'message'"
            >
                <text
                    class="uv-form-item__body__right__message"
                    :style="{
						marginLeft:  $uv.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
					}"
                >{{ message }}
                </text>
            </uv-transition>
        </slot>
        <uv-line
            v-if="borderBottom"
            :color="message && parentData.errorType === 'border-bottom' ? '#f56c6c' : '#d6d7d9'"
        ></uv-line>
    </view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';

/**
 * Form 表单
 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
 * @tutorial https://www.uvui.cn/components/form.html
 * @property {String}            label            input的label提示语
 * @property {String}            prop            绑定的值
 * @property {String | Boolean}    borderBottom    是否显示表单域的下划线边框
 * @property {String | Number}    labelWidth        label的宽度，单位px
 * @property {String}            rightIcon        右侧图标
 * @property {String}            leftIcon        左侧图标
 * @property {String | Object} leftIconStyle 左侧图标的样式
 * @property {Boolean}            required        是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
 *
 * @example <uv-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></uv-form-item>
 */
export default {
    name: 'uv-form-item',
    emits: ['click'],
    mixins: [mpMixin, mixin, props],
    data() {
        return {
            // 错误提示语
            message: '',
            parentData: {
                // 提示文本的位置
                labelPosition: 'left',
                // 提示文本对齐方式
                labelAlign: 'left',
                // 提示文本的样式
                labelStyle: {},
                // 提示文本的宽度
                labelWidth: 45,
                // 错误提示方式
                errorType: 'message'
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            // 父组件的实例
            this.updateParentData()
            if (!this.parent) {
                this.$uv.error('uv-form-item需要结合uv-form组件使用')
            }
        },
        // 获取父组件的参数
        updateParentData() {
            // 此方法写在mixin中
            this.getParentData('uv-form');
        },
        // 移除uv-form-item的校验结果
        clearValidate() {
            this.message = null
        },
        // 清空当前的组件的校验结果，并重置为初始值
        resetField() {
            // 找到原始值
            const value = this.$uv.getProperty(this.parent.originalModel, this.prop)
            // 将uv-form的model的prop属性链还原原始值
            this.$uv.setProperty(this.parent.model, this.prop, value)
            // 移除校验结果
            this.message = null
        },
        // 点击组件
        clickHandler() {
            this.$emit('click')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.uv-form-item {
    @include flex(column);
    font-size: 14px;
    color: $uv-main-color;

    &__body {
        @include flex;
        padding: 10px 0;

        &__left {
            @include flex;
            align-items: center;

            &__content {
                position: relative;
                @include flex;
                align-items: center;
                padding-right: 10rpx;
                flex: 1;

                &__icon {
                    margin-right: 8rpx;
                }

                &__required {
                    position: absolute;
                    left: -9px;
                    color: $uv-error;
                    line-height: 20px;
                    font-size: 20px;
                    top: 3px;
                }

                &__label {
                    @include flex;
                    align-items: center;
                    flex: 1;
                    color: $uv-main-color;
                    font-size: 15px;
                }
            }
        }

        &__right {
            flex: 1;

            &__content {
                @include flex;
                align-items: center;
                flex: 1;

                &__slot {
                    flex: 1;
                    /* #ifndef MP */
                    @include flex;
                    align-items: center;
                    /* #endif */
                }

                &__icon {
                    margin-left: 10rpx;
                    color: $uv-light-color;
                    font-size: 30rpx;
                }
            }

            &__message__box {
                height: 16px;
                line-height: 16px;
            }

            &__message {
                margin-top: -6px;
                line-height: 24px;
                font-size: 12px;
                color: $uv-error;
            }
        }
    }
}
</style>