front-end/jdApp/src/components/app_input_all.vue

<template>
    <div class="my-inputBox">
        <div class="line"></div>
        <div class="my-title">
            <slot class="title">
                <span>{{title}}</span>
            </slot>
            <slot name="icon"></slot>
        </div>
        <div
            :class="['my-input',arrowsRight?'isLink':'']">
            <slot name="content">
                <!-- <textarea
                    auto-height
                    v-if="type == 'textarea'"
                    class="text-line text-textarea"
                    :disabled="disabled"
                    ref="input"
                    :type="type"
                    v-model="currentValue"
                    @blur="onBlur"
                    @input="onChange"
                    :isFocus="true"
                    :placeholder="placeholder">
                </textarea> -->
                <appTextarea
                    auto-height
                    v-if="type == 'textarea'"
                    class="text-line text-textarea"
                    :disabled="disabled"
                    ref="input"
                    :type="type"
                    v-model="currentValue"
                    @blur="onBlur"
                    @input="onChange"
                    :focus="isFocus"
                    :placeholder="placeholder"
                ></appTextarea>
                <input
                v-else
                class="text-line"
                :disabled="disabled"
                ref="input"
                :type="type"
                v-model="currentValue"
                @blur="onBlur"
                @input="onChange"
                :focus="isFocus"
                :placeholder="placeholder">
            </slot>
            <!-- <i class="icon-butongguo" v-show="isClear&&currentValue !== ''" @click="clear"></i> -->
        </div>
        <div class="my-left">
             <slot name="inputRight"></slot>
        </div>
    </div>
</template>

<script>
import appTextarea from './app-textarea'
export default {
	name: 'app_input_all',
	components: {
		appTextarea
	},
	data() {
		return {
			currentValue: ''
		}
	},
	props: {
		value: {
			type: [String, Number]
		},
		title: {
			type: String
		},
		type: {
			type: String,
			default: 'text'
		},
		placeholder: {
			type: String
		},
		isClear: {
			type: Boolean,
			default: true
		},
		isFocus: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		arrowsRight: {
			type: Boolean,
			default: false
		}
	},
	created() {
		this.currentValue = (this.value === undefined || this.value === null) ? '' : this.value
	},
	mounted() {
		if (this.isFocus) {
			this.focus()
		}
	},
	methods: {
		clear() {
			this.currentValue = ''
			this.focus()
		},
		focus() {
			this.$refs.input.focus()
		},
		blur() {
			this.$refs.input.blur()
		},
		onBlur($event) {
			this.$emit('on-blur', this.currentValue, $event)
		},
		onChange(event) {
			let val = null
			if (this.type == 'text') {
				val = event.target.value
			} else {
				val = event
			}
			this.$emit('on-change', val)
		}
	},
	watch: {
		value(val) {
			this.currentValue = val
		},
		currentValue(val) {
			this.$emit('input', val)
		}
	}
}
</script>

<style scoped lang="scss">
    .my-inputBox{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
        padding-bottom: 15upx;
        & .line{
            position: absolute;
            width: 100%;
            height: 1upx;
            left: 0;
            bottom: 0;
            border-bottom: 1upx solid #ebedf0;
        }
        .my-input{
            position: relative;
            flex: 1;
            box-sizing: content-box;
            & .text-textarea {
                min-height: 150upx;
                display: inline-block;
                width: 100%;
                padding: 20upx 20upx 20upx 10upx;
                box-sizing: border-box;
            }
           &  input{
                min-height: 88upx;
                padding-left: 10upx;
                padding-right: 50upx;
           }
           &.isLink::after{
                content: "";
                display: inline-block;
                width: 15upx;
                height: 15upx;
                border-width:2upx 2upx 0 0;
                border-color:#C8C8CD;
                border-style:solid;
                position: absolute;
                top: 50%;
                right: 30upx;
                transform: translate(0,-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            }
        }
    }
    input,textarea{
        -webkit-appearance:none;
        outline:0;
        background-color:transparent;
        border:0;
        font-size: 28upx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0upx;
        color: #4d4d4d;
        display: block;
    }
    .icon-butongguo{
        color: #cccccc;
        font-size: 28upx;
        position: absolute;
        padding: 20upx 10upx 20upx 20upx;
        right: 0;
        top: 50%;
        transform: translate(0,-50%);
    }
    .my-title {
        color: #666;
        font-size: 28upx;
        width: 180upx;

    }
</style>