Input 输入框

    基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。

    注意：非 template/render 模式下，需使用 。

    基础用法

    基本用法，可以使用 v-model 实现数据的双向绑定。

    可以直接设置 style 来改变输入框的宽度，默认 100%。

    Input 输入框 - 图2

    尺寸

    输入框有三种尺寸：大、默认（中）、小

    通过设置size为large和small设置为大和小尺寸，不设置为默认（中）尺寸。

    1. <template>
    2.     <Input v-model="value1" size="large" placeholder="large size" />
    3.     <br>
    4.     <Input v-model="value2" placeholder="default size" />
    5.     <br>
    6.     <Input v-model="value3" size="small" placeholder="small size" />
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 value1: '',
    13.                 value2: '',
    14.                 value3: ''
    15.             }
    16.         }
    17.     }
    18. </script>

    可清空

    开启属性 clearable 可显示清空按钮。

    1. <template>
    2.     <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 value14: 'Hello World'
    9.             }
    10.         }
    11.     }
    12. </script>

    Input 输入框 - 图4

    带Icon的输入框

    通过 icon 属性可以在输入框右边加一个图标。

    前缀和后缀图标

    除了设置 icon，也可以通过设置 prefix 和 suffix 及同名 slot 设置前缀及后缀图标。

    1. <template>
    2.     <div>
    3.         Props：
    4.         <Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
    5.     </div>
    6.     <div style="margin-top: 6px">
    7.         Slots：
    9.             <Icon type="ios-contact" slot="prefix" />
    10.         </Input>
    11.         <Input placeholder="Enter text" style="width: auto">
    12.             <Icon type="ios-search" slot="suffix" />
    13.         </Input>
    14.     </div>
    15. </template>
    16. <script>
    17.     export default {
    19.     }
    20. </script>

    Input 输入框 - 图6

    搜索框

    开启 search 属性，可以设置为搜索型输入框。

    1. <template>
    2.     <div>
    3.         <Input search placeholder="Enter something..." />
    4.         <Input search enter-button placeholder="Enter something..." />
    5.         <Input search enter-button="Search" placeholder="Enter something..." />
    6.     </div>
    7. </template>
    8. <script>
    9.     export default {
    11.     }
    12. </script>

    文本域

    通过设置属性 type 为 textarea 来使用文本域，用于多行输入。

    通过设置属性 rows 控制文本域默认显示的行数。

    Input 输入框 - 图8

    适应文本高度的文本域

    设置属性 autosize，文本域会自动适应高度的变化。

    1. <template>
    2.     <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..." />
    3.     <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..." />
    4. </template>
    5. <script>
    6.     export default {
    7.         data () {
    8.             return {
    9.                 value7: '',
    10.                 value8: ''
    11.             }
    12.     }
    13. </script>

    禁用状态

    通过添加disabled属性可设置为不可用状态。

    1. <template>
    2.     <Input v-model="value9" disabled placeholder="Enter something..." />
    4. </template>
    5. <script>
    6.     export default {
    7.         data () {
    8.             return {
    9.                 value9: '',
    10.                 value10: ''
    11.             }
    12.         }
    13.     }
    14. </script>

    Input 输入框 - 图10

    复合型输入框

    通过前置和后置的 slot 可以实现复合型的输入框。

    输入时格式化展示

    结合 Poptip 组件，实现一个数值输入框，方便内容超长时的全量展现。

    1. <template>
    2.     <Poptip trigger="focus">
    3.         <Input v-model="value15" prefix="logo-usd" placeholder="Enter number" style="width: 120px" />
    4.         <div slot="content">{{ formatNumber }}</div>
    5.     </Poptip>
    6. </template>
    7. <script>
    8.     export default {
    9.         data () {
    10.             return {
    11.                 value15: ''
    12.             }
    13.         },
    14.         computed: {
    15.             formatNumber () {
    16.                 if (this.value15 === '') return 'Enter number';
    17.                 function parseNumber(str) {
    18.                     const re = /(?=(?!)(d{3})+$)/g;
    19.                     return str.replace(re, ',');
    20.                 }
    21.                 return parseNumber(this.value15);
    22.             }
    23.         }
    24.     }