elementUI中input的使用

<template><div style="padding:20px;"><el-card><!-- clearable 可清空 --><el-inputv-model="basicInput"@change="changeInput"style="width:200px;"clearable></el-input></el-card><el-card style="margin-top:20px;"><!-- show-password 密码框  --><el-inputplaceholder="请输入密码"v-model="basicInput"show-passwordstyle="width:200px;"></el-input></el-card><el-card style="margin-top:20px;"><!-- show-password 密码框  --><el-inputplaceholder="请输入密码"v-model="basicInput"show-passwordstyle="width:200px;"size="small"><template slot="prepend">Http://</template></el-input></el-card><el-card style="margin-top:20px;"><!-- 带输入建议autocomplete 一个可带输入建议的输入框组件fetch-suggestions 一个返回输入建议的方法属性:如querySearch(queryString,cb),在该方法中输入建议准备好时通过cb(data)返回给autocomplete组件中--><el-autocompleteplaceholder="请输入内容"v-model="state":fetch-suggestions="querySearch"style="width:300px;"size="small"@select="selectValue"><!-- 可筛选出输入框中匹配的 --><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><!-- <span class="addr">{{ item.address }}</span> --></template></el-autocomplete></el-card></div>
</template><script>
export default {name: "",data() {return {basicInput: "",state: "",restaurants: [{ 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号楼地下一层",},],};},methods: {changeInput() {console.log("basicInput", this.basicInput);},querySearch(queryString, cb) {var restautants = this.restaurants;var results = queryString? restautants.filter(this.createFilter(queryString)): restautants;cb(results);},createFilter(queryString) {return (restautant) => {return (restautant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);};},selectValue(item) {console.log("item", item);},},
};
</script><style lang="scss" scoped></style>

效果展示

参考elementUI

elementUI中input的使用相关推荐

elementUI中input组件的autofocus属性不生效
如图所以:点击航线名字需要切换输入框,输入框需要自动聚焦,这样即使啥也不修改也能执行失焦事件. elementUI文档上有一个autofocus属性,把autofocus设置成true发现并没有自动获 ...
ie11上vue中使用elementui的input框无法输入中文
2019独角兽企业重金招聘Python工程师标准>>> vue2.0+elementui(elementui组件库--input)项目中,使用了如下elementui组件(input ...
elementUi中使用input标签maxlength不生效
今天使用elementUi的input组件输入用户年龄的时候,type=number,然后增加限制maxlength=3;结果发现maxlength不生效.然后找到了以下解决办法.算是一个取巧的方法吧 ...
vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
elementUi中的el-select/el-input去掉border边框
在开发过程中遇到需要去掉 el-input的边框, 这是element ui 官方文档的样式而我们的需求是不可行做法 <div class="inputDemo"> ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
elementui中el-table实现翻页、全选
问题描述在最近的一个项目中,我需要实现表格的翻页,并且还要实现全选.多选功能众所周知,el-checkbox默认样式不好改,所以在这里我没有用elementui中的多选框,用的是<input ...
如何修改element-ui中输入框点击之后的边框高亮
做项目根据ui图设计需要修改输入框的点击之后边框的高亮颜色后来不停的点在F12中终于找到 .nm-skin-pretty .el-input.is-active .el-input__inner, ...
elementUI中修改el-input样式
elementUI中修改el-input样式动态修改样式在el-input 标签中添加:class 并绑定计算属性 <el-input clearable v-model="for ...

elementUI中input的使用

elementUI中input的使用

elementUI中input的使用相关推荐

最新文章

热门文章