LocalLivingServicesUniapp/components/form/input.vue

<template>
    <view>
        <view  class="cu-form-group" :class=" formItem.topLine ? 'top-line': '' ">
            <view class="title">{{ interceptNum(formItem.label, 0, 6) }}
                <text class="red opacity0" :class="formItem.requied ? 'opacity1' : ''">*</text>
            </view>
            <input :type="formItem.inputType? formItem.inputType: 'text'" 
                :disabled="formItem.disabled" :value="formItem.value" :password="formItem.password"
                bindinput="inputChange" :maxlength="formItem.maxLen ? formItem.maxLen: '40'"
                :placeholder="formItem.placeholder ? formItem.placeholder : formItem.noPlaceholder ? '' : '请输入' +interceptNum(formItem.label, 0 ,6)"
                placeholder-class="placeholderinput">
            </input>
            <!-- <text if="formItem.icon"
                class="{{formItem.icon}} {{formItem.icon && formItem.iconColor ? formItem.iconColor : 'text-orange'}}">
                </text> -->
            <!-- 按钮 -->
            <!-- <button if="formItem.BtnText"
                class="cu-btn shadow {{formItem.BtnText && formItem.BtnBgCol ? formItem.BtnBgCol : 'bg-green'}}">{{ formItem.BtnText }}
                </button> -->
        </view>
    </view>
</template>
<script>
import { getPrepPage } from './common'
export default {
    props: {
        /**
            * 当且仅当 type === 'input' 显示该组件
            * 
            * ---参数说明---
            * topLine            默认没有上划线，可加
            * clearBottomLine    默认有下划线，可删
            * label              输入框标题(最大长度为6，溢出隐藏)
            * requied            是否必填（显示红星）
            * inputType          input框的类型，默认text
            * disabled           是否禁用
            * value              input值
            * password           是否是密码类型，默认为否
            * maxLen             input框最大长度，默认40
            * placeholder + noPlaceholder        默认为“‘请输入’ + 输入框标题（label）” 通过placeholder可自定义
            *                                    也可通过noPlaceholder 来清除默认placeholder
            * icon               input框右侧是否添加icon（color UI: 如："cuIcon-locationfill",colorUI的图标）
            * iconColor          icon颜色，默认橘色 "text-orange"
            * BtnText            加按钮的文本（最多四字，溢出隐藏）
            * BtnBgCol           按钮的背景色
            * rule + message     结合“WxValidate.js” 验证输入文本是否符合规则
            * 
           */
        formItem: {
            type: Object,
            default: {}
        },
        index: {
            type: Number
        },
    },
    data() {
        return {

        }
    },
    methods: {
        interceptNum: function (str, start, end) {
            if (str != null) {
                return str.slice(start, end);
            }
        },
        inputChange: function (e) {
            const index = e.currentTarget.dataset.key;
            const value = e.detail.value;
            this.formItem = value;
            this.setData({ formItem });
            getPrepPage().setData({ ['form[' + index + ']']: formItem });
        }
    }
}
</script>
<style scoped>
.red {
    color: red;
    margin-left: 4rpx;
}

.cu-form-group .cu-btn {
    width: 180rpx;
}

.cu-form-group .title {
    padding-right: 10rpx;
    min-width: calc(4em + 50rpx);
    max-width: calc(6em + 50rpx);
    overflow: hidden;
}

.placeholderinput {
    color: #aaa;
    font-size: 28rpx;
}

.top-line {
    border-top: 1rpx solid #eee;
}

.bottom-line {
    border-bottom: 1rpx solid #eee;
}

.opacity0 {
    opacity: 0;
}

.opacity1 {
    opacity: 1;
}
</style>