---
name: Input
title: 输入框
category: 表单组件
owner: 胡晓卉
---

## 示例

```atom 基础示例
<template>
    <div class="wrap">
        <ul>
            focus示例：
            <input 
                :focus="isFocus"
                placeholder="focus示例" />
            <button @click="change()" class="button">切换focus</button>
        </ul>
        <ul>
        value&事件示例：
            <input 
                :value="val"
                focus
                @blur="blurEvent"
                @focus="focusEvent"
                @input="inputEvent"
                @confirm="confirmEvent" />
        </ul>
        <ul>
            type&maxlength示例：    
            <input 
                :maxlength="5" 
                type="number"
                placeholder="最大输入长度5" />
        </ul>
        <ul>
            confirm-type示例：    
            <input 
                confirm-type="search"
                placeholder="confirm-type示例" />
        </ul>
        <ul>
            disabled示例：    
            <input 
                disabled
                placeholder="禁止输入" />
        </ul>
        <ul>
            placeholder样式示例：    
            <input 
                class="placeholder-input"
                placeholder="placeholder样式示例" />
        </ul>   
    </div>
</template>

<script type="config">
    {
        components: {
            input: 'components/Input/Input'
        },
        data: {
            val: 123,
            isFocus: true
        }
    }
</script>

<script>
export default {
    methods: {
        blurEvent(e) {
            console.log('blurEvent', e.detail.value);
        },
        inputEvent(e) {
            console.log('inputEvent', e.detail.value);
            this.val = e.detail.value;
        },
        focusEvent(e) {
            console.log('focusEvent', e.detail.value);
        },
        confirmEvent(e) {
            console.log('confirmEvent', e.detail.value);
            this.val = 'confirm';
        },
        change() {
            this.isFocus = !this.isFocus;
        }
    }
}
</script>

<style scoped>
.wrap {
    font-size: .16rem;
    padding: .1rem 0;
    background: #fff;
}
.placeholder-input {
    width: 200px;
    height: 50px;
}
.placeholder-input::-webkit-input-placeholder {
    color: red;
    font-size: 10px;
    text-align: right;
}
button {
    height: 30px;
    border: 1px solid black;
}
input {
    height: 30px;
}
</style>
```

## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
name | string |  | 可选 | 表单元素名称 | -
value | string |  | 可选 | 输入框的初始内容 | -
type | string | text | 可选 | input&nbsp;的类型。 | -
password | boolean | false | 可选 | 是否是密码类型。 | -
placeholder | string |  | 可选 | 输入框为空时占位符。 | -
disabled | boolean | false | 可选 | 是否禁用。 | -
maxlength | number | 140 | 可选 | 最大输入长度，设置为&nbsp;-1&nbsp;的时候不限制最大长度。 | -
focus | boolean | false | 可选 | 获取焦点。 | -
confirmType | string |  | 可选 | 设置键盘右下角按钮的文字。 | -