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

Tevin

2021-10-18 9dd17569f69f6e93c94d1a8c7918f46fd1e21bb0

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

 forms/input/CInput.vue

@@ -4,6 +4,10 @@
 */

<template>
    <view
        class="c-input"
        :class="unit?'c-input-unit':''"
    >
    <AtInput
        :name="itemRes.name"
        :title="itemRes.label"
@@ -14,8 +18,13 @@
        :value="itemRes.formData[itemRes.name]"
        :onChange="evt=>itemRes.onChange(evt)"
    >
        <slot />
            <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;
        }
    }
}