【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1、Radio 单选框
基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String、Number或Boolean。
<template><el-radio v-model="radio" label="1">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio>
</template><script>export default {data () {return {radio: '1'};}}
</script>
禁用状态
单选框不可用的状态。
只要在el-radio元素中设置disabled属性即可,它接受一个Boolean,true为禁用。
<template><el-radio disabled v-model="radio" label="禁用">备选项</el-radio><el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
</template><script>export default {data () {return {radio: '选中且禁用'};}}
</script>
单选框组
适用于在多个互斥的选项中选择的场景。
结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value。
<template><el-radio-group v-model="radio"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio></el-radio-group>
</template><script>export default {data () {return {radio: 3};}}
</script>
按钮样式
只需要把el-radio元素换成el-radio-button元素即可,此外,Element 还提供了size属性。
<template><div><el-radio-group v-model="radio1"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio2" size="medium"><el-radio-button label="上海" ></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京" disabled ></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" disabled size="mini"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div>
</template><script>export default {data () {return {radio1: '上海',radio2: '上海',radio3: '上海',radio4: '上海'};}}
</script>
带有边框
设置border属性可以渲染为带有边框的单选框。
<template><div><el-radio v-model="radio1" label="1" border>备选项1</el-radio><el-radio v-model="radio1" label="2" border>备选项2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio><el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border disabled>备选项2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border>备选项2</el-radio></el-radio-group></div>
</template><script>export default {data () {return {radio1: '1',radio2: '1',radio3: '1',radio4: '1'};}}
</script>
Radio Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | string / number / boolean | — | — |
label | Radio 的 value | string / number / boolean | — | — |
disabled | 是否禁用 | boolean | — | false |
border | 是否显示边框 | boolean | — | false |
size | Radio 的尺寸,仅在 border 为真时有效 | string | medium / small / mini | — |
name | 原生 name 属性 | string | — | — |
Radio Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
Radio-group Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | string / number / boolean | — | — |
size | 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
disabled | 是否禁用 | boolean | — | false |
text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |
Radio-group Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
Radio-button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | Radio 的 value | string / number | — | — |
disabled | 是否禁用 | boolean | — | false |
name | 原生 name 属性 | string | — | — |
2、Checkbox 多选框
基础用法
单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true。
<template><!-- `checked` 为 true 或 false --><el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>export default {data() {return {checked: true};}};
</script>
禁用状态
设置disabled属性即可。
<template><el-checkbox v-model="checked1" disabled>备选项1</el-checkbox><el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
</template>
<script>export default {data() {return {checked1: false,checked2: true};}};
</script>
多选框组
适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。
checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
<template><el-checkbox-group v-model="checkList"><el-checkbox label="复选框 A"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox label="复选框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group>
</template><script>export default {data () {return {checkList: ['选中且禁用','复选框 A']};}};
</script>
indeterminate 状态
indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
<template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group>
</template>
<script>const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data() {return {checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true};},methods: {handleCheckAllChange(val) {this.checkedCities = val ? cityOptions : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.cities.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;}}};
</script>
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
<template><el-checkbox-group v-model="checkedCities":min="1":max="2"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group>
</template>
<script>const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data() {return {checkedCities: ['上海', '北京'],cities: cityOptions};}};
</script>
按钮样式
按钮样式的多选组合。
只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外,Element 还提供了size属性。
<template><div><el-checkbox-group v-model="checkboxGroup1"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup2" size="medium"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup3" size="small"><el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup4" size="mini" disabled><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div>
</template>
<script>const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data () {return {checkboxGroup1: ['上海'],checkboxGroup2: ['上海'],checkboxGroup3: ['上海'],checkboxGroup4: ['上海'],cities: cityOptions};}}
</script>
带有边框
设置border属性可以渲染为带有边框的多选框。
<template><div><el-checkbox v-model="checked1" label="备选项1" border></el-checkbox><el-checkbox v-model="checked2" label="备选项2" border></el-checkbox></div><div style="margin-top: 20px"><el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox><el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup1" size="small"><el-checkbox label="备选项1" border></el-checkbox><el-checkbox label="备选项2" border disabled></el-checkbox></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup2" size="mini" disabled><el-checkbox label="备选项1" border></el-checkbox><el-checkbox label="备选项2" border></el-checkbox></el-checkbox-group></div>
</template><script>export default {data () {return {checked1: true,checked2: false,checked3: false,checked4: true,checkboxGroup1: [],checkboxGroup2: []};}}
</script>
Checkbox Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | string / number / boolean | — | — |
label | 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) | string / number / boolean | — | — |
true-label | 选中时的值 | string / number | — | — |
false-label | 没有选中时的值 | string / number | — | — |
disabled | 是否禁用 | boolean | — | false |
border | 是否显示边框 | boolean | — | false |
size | Checkbox 的尺寸,仅在 border 为真时有效 | string | medium / small / mini | — |
name | 原生 name 属性 | string | — | — |
checked | 当前是否勾选 | boolean | — | false |
indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | — | false |
Checkbox Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 当绑定值变化时触发的事件 | 更新后的值 |
Checkbox-group Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | array | — | — |
size | 多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
disabled | 是否禁用 | boolean | — | false |
min | 可被勾选的 checkbox 的最小数量 | number | — | — |
max | 可被勾选的 checkbox 的最大数量 | number | — | — |
text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF |
Checkbox-group Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 当绑定值变化时触发的事件 | 更新后的值 |
Checkbox-button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) | string / number / boolean | — | — |
true-label | 选中时的值 | string / number | — | — |
false-label | 没有选中时的值 | string / number | — | — |
disabled | 是否禁用 | boolean | — | false |
name | 原生 name 属性 | string | — | — |
checked | 当前是否勾选 | boolean | — | false |
3、Input 输入框
通过鼠标或键盘输入字符。Input 为受控组件,它总会显示 Vue 绑定值。通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。不支持 v-model 修饰符。
基础用法
<el-input v-model="input" placeholder="请输入内容"></el-input><script>
export default {data() {return {input: ''}}
}
</script>
禁用状态
通过 disabled 属性指定是否禁用 input 组件。
<el-inputplaceholder="请输入内容"v-model="input":disabled="true">
</el-input><script>
export default {data() {return {input: ''}}
}
</script>
可清空
使用clearable属性即可得到一个可清空的输入框。
<el-inputplaceholder="请输入内容"v-model="input"clearable>
</el-input><script>export default {data() {return {input: ''}}}
</script>
密码框
使用show-password属性即可得到一个可切换显示隐藏的密码框。
<el-input placeholder="请输入密码" v-model="input" show-password></el-input><script>export default {data() {return {input: ''}}}
</script>
带 icon 的输入框
带有图标标记输入类型。
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
<div class="demo-input-suffix">属性方式:<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式:<el-inputplaceholder="请选择日期"v-model="input3"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>
文本域
用于输入多行文本信息,通过将 type 属性的值指定为 textarea。
文本域高度可通过 rows 属性控制。
<el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="textarea">
</el-input><script>
export default {data() {return {textarea: ''}}
}
</script>
可自适应文本高度的文本域
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。
<el-inputtype="textarea"autosizeplaceholder="请输入内容"v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="请输入内容"v-model="textarea2">
</el-input><script>
export default {data() {return {textarea1: '',textarea2: ''}}
}
</script>
复合型输入框
可前置或后置元素,一般为标签或按钮。
可通过 slot 来指定在 input 中前置或者后置内容。
<div><el-input placeholder="请输入内容" v-model="input1"><template slot="prepend">Http://</template></el-input>
</div>
<div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input2"><template slot="append">.com</template></el-input>
</div>
<div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input3" class="input-with-select"><el-select v-model="select" slot="prepend" placeholder="请选择"><el-option label="餐厅名" value="1"></el-option><el-option label="订单号" value="2"></el-option><el-option label="用户电话" value="3"></el-option></el-select><el-button slot="append" icon="el-icon-search"></el-button></el-input>
</div>
<style>.el-select .el-input {width: 130px;}.input-with-select .el-input-group__prepend {background-color: #fff;}
</style>
<script>
export default {data() {return {input1: '',input2: '',input3: '',select: ''}}
}
</script>
尺寸
可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
<div class="demo-input-size"><el-inputplaceholder="请输入内容"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputsize="medium"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input2"></el-input><el-inputsize="small"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input3"></el-input><el-inputsize="mini"placeholder="请输入内容"suffix-icon="el-icon-date"v-model="input4"></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>
带输入建议
根据输入内容提供对应的输入建议。
autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
<el-row class="demo-autocomplete"><el-col :span="12"><div class="sub-title">激活即列出输入建议</div><el-autocompleteclass="inline-input"v-model="state1":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"></el-autocomplete></el-col><el-col :span="12"><div class="sub-title">输入后匹配输入建议</div><el-autocompleteclass="inline-input"v-model="state2":fetch-suggestions="querySearch"placeholder="请输入内容":trigger-on-focus="false"@select="handleSelect"></el-autocomplete></el-col>
</el-row>
<script>export default {data() {return {restaurants: [],state1: '',state2: ''};},methods: {querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll() {return [{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },{ "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },{ "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },{ "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },{ "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },{ "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },{ "value": "枪会山", "address": "上海市普陀区棕榈路" },{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },{ "value": "钱记", "address": "上海市长宁区天山西路" },{ "value": "壹杯加", "address": "上海市长宁区通协路" },{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },{ "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },{ "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },{ "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },{ "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },{ "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },{ "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },{ "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },{ "value": "浏阳蒸菜", "address": "天山西路430号" },{ "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },{ "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },{ "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },{ "value": "阳阳麻辣烫", "address": "天山西路389号" },{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }];},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}}
</script>
自定义模板
可自定义输入建议的显示。
使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。
<el-autocompletepopper-class="my-autocomplete"v-model="state":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"><iclass="el-icon-edit el-input__icon"slot="suffix"@click="handleIconClick"></i><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><span class="addr">{{ item.address }}</span></template>
</el-autocomplete><style>
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
</style><script>export default {data() {return {restaurants: [],state: ''};},methods: {querySearch(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},loadAll() {return [{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },{ "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },{ "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },{ "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },{ "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },{ "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },{ "value": "枪会山", "address": "上海市普陀区棕榈路" },{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },{ "value": "钱记", "address": "上海市长宁区天山西路" },{ "value": "壹杯加", "address": "上海市长宁区通协路" },{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },{ "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },{ "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },{ "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },{ "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },{ "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },{ "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },{ "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },{ "value": "浏阳蒸菜", "address": "天山西路430号" },{ "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },{ "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },{ "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },{ "value": "阳阳麻辣烫", "address": "天山西路389号" },{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {this.restaurants = this.loadAll();}}
</script>
远程搜索
从服务端搜索数据。
<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"
></el-autocomplete>
<script>export default {data() {return {restaurants: [],state: '',timeout: null};},methods: {loadAll() {return [{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },{ "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },{ "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },{ "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },{ "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },{ "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },{ "value": "枪会山", "address": "上海市普陀区棕榈路" },{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },{ "value": "钱记", "address": "上海市长宁区天山西路" },{ "value": "壹杯加", "address": "上海市长宁区通协路" },{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },{ "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },{ "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },{ "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },{ "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },{ "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },{ "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },{ "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },{ "value": "浏阳蒸菜", "address": "天山西路430号" },{ "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },{ "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },{ "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },{ "value": "阳阳麻辣烫", "address": "天山西路389号" },{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }];},querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout = setTimeout(() => {cb(results);}, 3000 * Math.random());},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},handleSelect(item) {console.log(item);}},mounted() {this.restaurants = this.loadAll();}};
</script>
输入长度限制
maxlength 和 minlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。
<el-inputtype="text"placeholder="请输入内容"v-model="text"maxlength="10"show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea"placeholder="请输入内容"v-model="textarea"maxlength="30"show-word-limit
>
</el-input><script>
export default {data() {return {text: '',textarea: ''}}
}
</script>
Input Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 类型 | string | text,textarea 和其他 原生 input 的 type 值 | text |
value / v-model | 绑定值 | string / number | — | — |
maxlength | 原生属性,最大输入长度 | number | — | — |
minlength | 原生属性,最小输入长度 | number | — | — |
show-word-limit | 是否显示输入字数统计,只在 type = “text” 或 type = “textarea” 时有效 | boolean | — | false |
placeholder | 输入框占位文本 | string | — | — |
clearable | 是否可清空 | boolean | — | false |
show-password | 是否显示切换密码图标 | boolean | — | false |
disabled | 禁用 | boolean | — | false |
size | 输入框尺寸,只在 type!=“textarea” 时有效 | string | medium / small / mini | — |
prefix-icon | 输入框头部图标 | string | — | — |
suffix-icon | 输入框尾部图标 | string | — | — |
rows | 输入框行数,只对 type=“textarea” 有效 | number | — | 2 |
autosize | 自适应内容高度,只对 type=“textarea” 有效,可传入对象,如,{ minRows: 2, maxRows: 6 } | boolean / object } | — | false |
autocomplete | 原生属性,自动补全 | string | on, off | off |
auto-complete | 下个主版本弃用 | string | on, off | off |
name | 原生属性 | string | — | — |
readonly | 原生属性,是否只读 | boolean | — | false |
max | 原生属性,设置最大值 | — | — | — |
min | 原生属性,设置最小值 | — | — | — |
step | 原生属性,设置输入字段的合法数字间隔 | — | — | — |
resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
form | 原生属性 | string | — | — |
label | 输入框关联的label文字 | string | — | — |
tabindex | 输入框的tabindex | string | - | - |
validate-event | 输入时是否触发表单的校验 | boolean | - | true |
Input Slots
name | 说明 |
---|---|
prefix | 输入框头部内容,只对 type=“text” 有效 |
suffix | 输入框尾部内容,只对 type=“text” 有效 |
prepend | 输入框前置内容,只对 type=“text” 有效 |
append | 输入框后置内容,只对 type=“text” 有效 |
Input Events
事件名称 | 说明 | 回调参数 |
---|---|---|
blur | 在 Input 失去焦点时触发 | (event: Event) |
focus | 在 Input 获得焦点时触发 | (event: Event) |
change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string |
input | 在 Input 值改变时触发 | (value: string |
clear | 在点击由 clearable 属性生成的清空按钮时触发 | — |
Input Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | — |
blur | 使 input 失去焦点 | — |
select | 选中 input 中的文字 | — |
Autocomplete Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
placeholder | 输入框占位文本 | string | — | — |
disabled | 禁用 | boolean | — | false |
value-key | 输入建议对象中用于显示的键名 | string | — | value |
value | 必填值,输入绑定值 | string | — | — |
debounce | 获取输入建议的去抖延时 | number | — | 300 |
placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
popper-class | Autocomplete | 下拉列表的类名 | string | — |
trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
name | 原生属性 | string | — | — |
select-when-unmatched | 在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件 | boolean | — | false |
label | 输入框关联的label文字 | string | — | — |
prefix-icon | 输入框头部图标 | string | — | — |
suffix-icon | 输入框尾部图标 | string | — | — |
hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 false | boolean | - | true |
highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
Autocomplete Slots
name | 说明 |
---|---|
prefix | 输入框头部内容 |
suffix | 输入框尾部内容 |
prepend | 输入框前置内容 |
append | 输入框后置内容 |
Autocomplete Scoped Slot
name | 说明 |
---|---|
— | 自定义输入建议,参数为 { item } |
Autocomplete Events
事件名称 | 说明 | 回调参数 |
---|---|---|
select | 点击选中建议项时触发 | 选中建议项 |
change | 在 Input 值改变时触发 | (value: string |
Autocomplete Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | - |
4、InputNumber 计数器
仅允许输入标准的数字值,可定义范围。
基础用法
要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值。
<template><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>export default {data() {return {num: 1};},methods: {handleChange(value) {console.log(value);}}};
</script>
禁用状态
disabled属性接受一个Boolean,设置为true即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min属性和max属性,不设置min和max时,最小值为 0。
<template><el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>export default {data() {return {num: 1}}};
</script>
步数
允许定义递增递减的步数控制。
设置step属性可以控制步长,接受一个Number。
<template><el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>export default {data() {return {num: 5}}};
</script>
严格步数
step-strictly属性接受一个Boolean。如果这个属性被设置为true,则只能输入步数的倍数。
<template><el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>export default {data() {return {num: 2}}};
</script>
精度
设置 precision 属性可以控制数值精度,接收一个 Number。
<template><el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>export default {data() {return {num: 1}}};
</script>
precision 的值必须是一个非负整数,并且不能小于 step 的小数位数。
尺寸
额外提供了 medium、small、mini 三种尺寸的数字输入框。
<template><el-input-number v-model="num1"></el-input-number><el-input-number size="medium" v-model="num2"></el-input-number><el-input-number size="small" v-model="num3"></el-input-number><el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>export default {data() {return {num1: 1,num2: 1,num3: 1,num4: 1}}};
</script>
按钮位置
设置 controls-position 属性可以控制按钮位置。
<template><el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>export default {data() {return {num: 1};},methods: {handleChange(value) {console.log(value);}}};
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | number | — | 0 |
min | 设置计数器允许的最小值 | number | — | -Infinity |
max | 设置计数器允许的最大值 | number | — | Infinity |
step | 计数器步长 | number | — | 1 |
step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
precision | 数值精度 | number | — | — |
size | 计数器尺寸 | string | large, small | — |
disabled | 是否禁用计数器 | boolean | — | false |
controls | 是否使用控制按钮 | boolean | — | true |
controls-position | 控制按钮位置 | string | right | - |
name | 原生属性 | string | — | — |
label | 输入框关联的label文字 | string | — | — |
placeholder | 输入框默认 placeholder | string | - | - |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值被改变时触发 | currentValue, oldValue |
blur | 在组件 Input 失去焦点时触发 | (event: Event) |
focus | 在组件 Input 获得焦点时触发 | (event: Event) |
Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | - |
select | 选中 input 中的文字 | — |
【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器相关推荐
- electron tray_如何在Electron JS Tray菜单项中添加单选和复选框?
electron tray Do you really understand what I mean? here is an example; 你真的明白我的意思吗? 这是一个例子: So that ...
- 【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片 图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法 可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
- 5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
- Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课 学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍 一套用于构建用户界面的渐进式JavaScript框架 构建用户界面:把数据通过某种办法变成用户界面 渐进式:可以 ...
- vue自定义插件 封装一个类似 element 中 message 消息提示框的插件
vue自定义插件 封装一个类似 element 中 message 消息提示框的插件 一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
- Vue移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 image 2. vux ...
- Vue 移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 文档 | github地址 | 在线预览 2. vux vux 基于We ...
最新文章
- 第十三届计算机语言学大会,第十三届全国语音学学术会议(PCC 2018) 会议通知第3号...
- pythonsvm图像分类_python图像处理之sift-kmeans-SVM图像分类
- LeetCode 257. 二叉树的所有路径(DFS)
- 语音技术(百度语音)开发 - 第一篇
- 纯野今日之最:面试谈
- redis映射的概念_Redis基础概念和实现机制的总结
- 万字长文!搞定逃不脱的 DNS 面试题
- php有没有dao层,php框架开发四(DAO层)_PHP教程
- android 编译,gradle
- python列表元组字典集合实验心得_python心得 元组,字典,集合
- 三线表里加小短线_三线表的规范格式
- matlab简单仿真机器人
- ps做手机计算机界面,【炼真金】PS如何做出这种有厚度的手机APP 界面图
- 轻量级锁的原理与实战
- 采购申请PR和采购订单PO的关系
- 3D可视化应急物资仓库管理系统-应急物资可视化系统-数字孪生
- tkmybatis 子查询_【10/21】南池袋送餐桌和椅子 收纳盒子 洗衣机 | 下落合站送洗衣机...
- 无线路由器---基本知识
- 升级 Mellanox ConnectX-3 EN 10/40 Gbps 网卡固件
- ca32a_demo_c++创建动态数组
热门文章
- flash_acr_latency
- 用计算机算一算循环小数,循环小数化分数计算器
- 大数据资源调度框架有什么作用?
- 为什么Java仍将是未来的主流语言?
- git 版本管理系统
- python制作水球图
- 17个最好用的iPhone数据恢复工具【2019更新】
- 1060显卡支持dx12吗_GTX1660和GTX1060哪个性价比高?GTX1060和GTX1660显卡区别对比
- 进入命令框,输入“cd D:”,为什么会这样 - 搜搜问问
- [HDOJ 3638] Go , SuSu [模拟]