<!--多行输入组件-->

<template>
    <div class="t2">
        <!--表单提示-->
        <div v-if="item.tip" class="form-tip t3 c3 ">{{ item.tip }}</div>
        <div class="form-item">
            <label class="form-label t2 c2">
                <span>{{ item.field_name }}</span>
                <span v-if="item.required" class="required-color">*</span>
            </label>
            <textarea
                v-model.trim="item.value"
                ref="inputItem"
                :name="item.field_name"
                class="mid-textarea t2"
                :placeholder="item.placeholder"
                @focus="focusEvent"
            ></textarea>
        </div>
    </div>
</template>

<script>
import { validateForBlur } from '~publicAsset/libs/validation'; // 表单验证
import * as Utils from '../utils.js';

export default {
    props: {
        item: {
            type: Object,
            required: true
        },
        key_value: {
            type: Number,
            required: true
        }
    },
    data: function() {
        return {
        };
    },
    mounted: function() {
    },
    methods: {
        focusEvent: function() {
            Utils.fixedIOS12.onfocus();
        },
    }
};
</script>

<style>
.mid-textarea {
    resize: none;
    width: 6.9rem;
    height: 1.5rem;
    padding: 0.2rem 0.12rem;
    padding-bottom: 0.5rem;
    background-color: #fff;
    border-radius: 0.1rem;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none; /*去除阴影*/
}

.limit-item {
    position: absolute;
    bottom: 0.3rem;
    right: 0.3rem;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
    color: #c8c8c8;
}
</style>
