09.Element UI之input组件

一、基本用法：

    |--语法：

默认宽度100%，可以通过栅格控制宽度

数据控制

二、添加禁用状态（disabled）

页面效果

代码实现

三、添加清空按钮（clearable）

添加clearable属性，值为true/false

代码实现

四、密码框（show-password）

页面效果

添加show-password属性，值为true/false

五、带icon的输入框

    |--两种方式：属性方式和slot方式

    |--方式1：属性方式

        |--prefix-icon：在input组件首部加入图标

        |--suffix-icon：在input组件尾部加入图标

        |--示例：

页面效果

代码实现

    |--方式2：通过slot属性

页面效果

代码实现

    |--两种方式可以针对不通的绑定事件来进行使用。针对文本框用属性，针对图标绑定事件可以用slot方式。

六、文本域（textarea）

    |--添加type="textarea"

    |--添加rows="2"来控制高度，这里的2代表能输入2两文本的高度

    |--示例：创建一个能输入5行文本高度的文本域

页面效果

代码实现

    |--autosize属性：通过设置autosize属性可以使得文本域的高度能够根据文本内容自动调整。并且autosize还可以设定为一个对象，指定最小行数和最大行数。

页面效果

添加autosize属性

     |--autosize绑定{minRows:2,maxRows:5}

设置最小高度为2行文本高度

设置最大高度为5行文本高度

超过5行文本高度会出现滑动条

代码实现

七、复合输入框

    |--通过slot属性设置前置位还是后置位

        |--前置位：slot="prepend"

        |--后置位：slot="append"

    |--示例1：

页面效果

代码实现

    |--示例2：

页面效果

代码实现

控制select、input宽度

八、尺寸控制（size属性）

页面效果

代码实现

九、输入长度限制

    |--通过minlength和maxlength限制字数

    |--通过show-word-limit显示字数统计

页面效果

代码实现

十、输入建议

    |--用法：

    |--属性：

        |--:fetch-suggestions:"querySearch"：返回输入建议的方法属性，queryString(queryString,cb)

            |--queryString：为你输入的值

            |--cb：callback函数

            |--该方法中你可以在你输入建议数据准备好时通过cb(data)返回到el-autocomplete组件中。

        |--@select="handleSelect"

            |--当你选中输入建议时，触发的函数，handleSelect(item)，item是你选中的输入建议的对象

    |--示例1：

页面效果

组件设置

data中的设置

组件挂载完给饭店数组赋值

进行过滤，返回匹配的数组

当执行选中的时候触发handleSelet方法

handleSelect方法

    |--如果想输入后再匹配，而不是激活输入框就匹配，添加属性绑定：trigger-on-focus="false"

输入san以后才激活匹配

代码实现，添加trigger-on-focus

    |--自定义提示模板样式：

页面效果

item为每一个提示项，注意是{item}不是{{item}}

自定义的样式