购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.3 输入框
(Input)

Element为输入框提供了不同的样式与用法,本节将从基础用法、禁用状态、可清空、密码框、带icon的输入框用法、文本域、可自适应文本高度的文本域、尺寸、复合型输入框、带输入建议、自定义模板、输入长度限制等方面讲解输入框的样式与用法。

由于输入框的样式比较丰富,因此本节首先对两个页面进行布局,然后结合地图展示输入框的样式,如图3-4和图3-5所示,最后对输入框的样式与用法进行讲解。

图3-4 输入框样式(一)

图3-5 输入框样式(二)

在第一个页面中(见图3-4),首先创建Vue实例,其中data中的input1至input7是各个el-input标签中v-model属性所绑定的变量;methods中的handleClick事件在单击“查询”按钮时被触发,此时可获取“基础用法”中输入的内容,然后结合OpenLayers实现地图视角的改变。代码如下:

在第二个页面中(见图3-5),创建Vue实例,其中data中的各属性与el-input标签中v-model属性所绑定的变量联动;methods中的querySearch是返回输入建议的方法。代码如下:

(1)基础用法。Element通过对el-input标签的封装提供了输入框,通过v-model属性对输入框的值进行监听,通过placeholder属性对输入框的占位符进行绑定。代码如下:

(2)禁用状态。Element通过对el-input标签添加disabled属性来控制输入框的禁用状态。代码如下:

(3)可清空。Element通过对el-input标签添加clearable属性来控制输入框是否可清空。代码如下:

(4)密码框。Element通过对el-input标签添加show-password属性来控制输入框是否为密码框。代码如下:

(5)带icon的输入框。Element在封装输入框时,提供了带图标的输入框样式。其中Element提供了两种方式,分别为属性方式和slot方式。属性方式是通过在el-input标签添加suffix-icon属性和prefix-icon属性实现的,其中suffix-icon属性表示图标在输入框的尾部,prefix-icon属性表示图标在输入框的首部。slot方式是通过在input标签中添加i标签来实现的,i标签中的slot属性值可以是suffix和prefix,suffix表示图标在输入框的尾部,prefix表示图标在输入框的首部。代码如下:

(6)文本域。文本域用于在输入框中输入多行文本信息,可通过在el-input标签中添加type属性并赋予textarea值来实现文本域,可通过rows属性来控制文本域的高度。代码如下:

(7)可自适应文本高度的文本域。在文本域中,可通过autosize属性使文本域的高度根据文本高度进行自动调整,并且autosize属性还可以设置一个对象来指定最小行数和最大行数。代码如下:

(8)尺寸。在el-input标签中添加size属性可以控制输入框的尺寸,尺寸共分为large、medium、small、mini四种,默认的是large。代码如下:

(9)复合型输入框。复合型输入框可以在输入框中添加其他元素,元素一般为标签、按钮和下拉框,通过slot属性可以控制元素在输入框中的位置。代码如下:

(10)带输入建议。Element通过el-autocomplete标签提供了带输入建议的输入框。带输入建议的输入框可以智能地推荐用户想要输入的信息。带输入建议的输入框有两种,分别是列表型输入框和输入匹配型输入框。与列表型输入框相比,输入匹配型输入框将el-autocomplete标签中的trigger-on-focus属性设置为flase,该属性默认为true。el-autocomplete标签中的fetch-suggestions属性是一个方法属性,用于返回输入的建议,如“querySearch(queryString,cb)”,queryString是输入框的内容,cb是个回调函数,可以将建议的数据通过cb(data)返回到autocomplete模板中(autocomplete模板是指带智能提示的下拉框)。代码如下:

(11)自定义模板。自定义模板可以在带输入建议的输入框中添加更加复杂的样式,如添加图标。通过Vue.js的作用域插槽scoped slot可以自定义输入建议的模板,scope的参数为item,表示当前输入建议对象。代码如下:

(12)输入长度限制。Element为el-input标签提供了maxlength和minlength属性,可用于限制输入框的最大输入长度和最小输入长度。对于类型为text或textarea的输入框,在使用maxlength属性限制最大输入长度时,可通过设置show-word-limit属性来统计字数。代码如下: kwaULjC5JiEmTHbD0d/ghcG6045y/OEGn25ORdk927xSvwnz/HqpZ8RhqqrBqGJi

点击中间区域
呼出菜单
上一章
目录
下一章
×