Input 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

• 需要用户输入表单域内容时。
• 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

组件演示

基本

基本使用。

<template>
  <v-input placeholder="基本使用" v-model="value" @keydown="keydown" @keyup="keyup"  @blur="blur('blur')"></v-input>
</template>
<script>
export default {
    methods: {
        blur(val) {
            console.log(val)
        },
        keyup(val){
            console.log(val)
        },
        keydown(val){
            console.log(val)
        },
    }
}
</script>

文本域

用于多行输入，指定 type 为一个特殊的 textarea。

  <v-input type="textarea" value="这是一个textarea"></v-input>

适应文本高度的文本域

autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。

  <v-input type="textarea" placeholder="Autosize height based on content lines" autosize></v-input>
  <br><br>
  <v-input type="textarea" placeholder="Autosize height with minimum and maximum number of lines" :autosize="{ minRows: 2, maxRows: 6 }"></v-input>

前后缀修饰添加

带有前缀后缀修饰

<template>
  <v-input>
      <span slot="before">http://</span>
      <span slot="after">.com</span>
  </v-input>
  <br>
  <v-input>
      <v-select placeholder="请选择" style="width: 80px;" slot="before" :data="options"
      v-model="value"></v-select>
      <v-select style="width: 80px;" slot="after" :data="options2"
      v-model="value"></v-select>
  </v-input>
</template>
<script>
export default {
    data() {
        return {
            options: [{value: '1', label: 'lady'}, {value: '2', label: '小强', disabled: true}, {value: '3', label: '小明'}],
            options2: [{value: '1', label: 'lady'}, {value: '2', label: '小强'}, {value: '3', label: '小明'}],
            value: '3'
        }
    }
}
</script>

三种大小

我们为 < v-input > 输入框定义了三种尺寸（大、默认、小），高度分别为 32px、28px 和 22px。

  <v-input size="large" placeholder="大尺寸" style="width:200px;display:inline-block" disabled></v-input>
  <v-input placeholder="基本尺寸" style="width:200px;display:inline-block"></v-input>
  <v-input size="small" placeholder="小尺寸" style="width:200px;display:inline-block"></v-input>

输入框组合

输入框的组合展现。注意：使用 compact 模式时，不需要通过 Col 来控制宽度。

<template>
    <v-input-group size="large">
        <v-col span="4">
            <v-input value="0571"></v-input>
        </v-col>
        <v-col span="8">
            <v-input value="26888888"></v-input>
        </v-col>
    </v-input-group>
    <br />
    <v-input-group compact>
        <v-input value="0571" style="width: 20%"></v-input>
        <v-input value="26888888" style="width: 30%"></v-input>
    </v-input-group>
    <br />
    <v-input-group compact>
        <v-select placeholder="请选择" :data="options" v-model="value"></v-select>
        <v-input value="Input content" style="width: 50%"></v-input>
    </v-input-group>
    <br />
    <v-input-group compact>
        <v-select placeholder="请选择" :data="options" v-model="value"></v-select>
        <v-input value="Input content" style="width: 50%"></v-input>
        <v-input-number :min="1" :max="10"></v-input-number>
    </v-input-group>
    <br />
    <v-input-group compact>
        <v-input value="Input content" style="width: 50%"></v-input>
        <v-date-picker></v-date-picker>
    </v-input-group>
    <br />
    <v-input-group compact>
        <v-select placeholder="请选择" :data="options" v-model="value" style="width: 10%"></v-select>
        <v-select placeholder="请选择" :data="options2" v-model="value" style="width: 10%"></v-select>
    </v-input-group>
</template>
<script>
export default {
    data() {
        return {
            options: [{value: '1', label: 'lady'}, {value: '2', label: '小强', disabled: true}, {value: '3', label: '小明'}],
            options2: [{value: '1', label: 'lady'}, {value: '2', label: '小强'}, {value: '3', label: '小明'}],
            value: '3'
        }
    }
}
</script>

API

Input Props

Input Events

InputGroup