表单输入框组件，允许定义输入单位

Tevin

2021-10-18 9dd17569f69f6e93c94d1a8c7918f46fd1e21bb0

表单输入框组件，允许定义输入单位

 forms/input/CInput.vue

@@ -4,18 +4,27 @@
 */

<template>
    <AtInput
        :name="itemRes.name"
        :title="itemRes.label"
        :type="type"
        :placeholder="placeholder"
        :required="itemRes.required"
        :error="itemRes.error"
        :value="itemRes.formData[itemRes.name]"
        :onChange="evt=>itemRes.onChange(evt)"
    <view
        class="c-input"
        :class="unit?'c-input-unit':''"
    >
        <slot />
    </AtInput>
        <AtInput
            :name="itemRes.name"
            :title="itemRes.label"
            :type="type"
            :placeholder="placeholder"
            :required="itemRes.required"
            :error="itemRes.error"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        >
            <slot v-if="!unit" />
            <text
                class="c-input-unit-text"
                v-if="unit"
            >{{unit}}</text>
        </AtInput>
    </view>
</template>

<script>
@@ -34,6 +43,8 @@
        type: String,
        // 占位提示
        placeholder: String,
        // 输入框单位
        unit: String,
    },
    mounted() {},
};

 forms/input/cInput.scss

@@ -9,4 +9,13 @@
    .at-input__icon {
        display: none;
    }
    &.c-input-unit {
        .at-input__children:after {
            display: none;
        }
        .c-input-unit-text {
            padding-right: 30rpx;
            color: #ccc;
        }
    }
}