<template>
    
    <input type="text"
        class="mini-input"
        :placeholder="placeholder"
        :value="value"
        :disabled="disabled"
        @input="handleChange($event)"
    />

</template>
<script>
export default {
    name: "MiniInput",
    props: {
        value: [String, Number],
        placeholder: [String, Number],
        disabled: {
            type: Boolean,
            default: false
        }        
    },
    methods: {
        handleChange(evt){
            this.$emit('input',  evt.target.value);
        }
    }
}
</script>
<style lang="scss" scoped>
input{
    height:34px;
    outline:none;
    border: 1px solid #999;
    font-size:14px;
    color:#333;
    padding-left: 10px;
    border-radius: 4px;
    box-sizing: border-box;    
    
    &:disabled {
        cursor: not-allowed;
        border-color: #eee;
        color: #999;
    }    

    &:focus{
        border-color:#409eff;
    }
}

</style>


