美文网首页
09.Element UI之input组件

09.Element UI之input组件

作者: stillpeng | 来源:发表于2019-08-29 11:11 被阅读0次

一、基本用法:

    |--语法:<el-input v-model="inputText" placeholder="请输入内容"></el-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显示字数统计

页面效果 代码实现

十、输入建议

    |--用法:<el-autocomplete></el-autocomplete>

    |--属性:

        |--: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}} 自定义的样式

相关文章

网友评论

      本文标题:09.Element UI之input组件

      本文链接:https://www.haomeiwen.com/subject/wvjbectx.html