内容简介:先看下开发完成的功能本来想借助
先看下开发完成的功能
本来想借助 element-ui
里的 el-select
和 el-input
组合来做
但是在input框里面输入内容不能用上下键选择到具体搜出来的列表
还有一个问题是当用上下键操作时移到最后一行
再回到第一行的时候它会类似锚点一样定位到第一行
从而把input框卷入到不可见的区域去了
所以觉得这样的体验不是很好,自己就重新做了一个
已经上传了到 npm
上去了
- npm下载地址
npm install --save v-select-search
- 引用
import 'v-select-search/lib/v-select-search.css'; import vSelectSearch from 'v-select-search'; Vue.use(vSelectSearch);
- demo
<template> <div style="width:250px;overflow:hidden;margin:250px auto;"> <ct-select v-model="text" @getSearchName="getName"> <ct-option v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> </ct-option> </ct-select> </div> </template> <script type="text/javascript"> import axios from 'axios'; export default { name: '', data() { return{ text: '', dataList:[], } }, mounted() { axios.get('/v2/book/search?q=vue&alt=json&start=1&count=45') .then((data)=>{ this.dataList = []; for(let v of data.data.books) { this.dataList.push({ value: v.id, label: v.title }) } }) .catch(function(error){ console.log(error); }); }, methods: { getTextHandler() { console.log(this.text); }, getName(val) { axios({ method:'POST', url:'/v2/book/search', data:{ q: val, alt:'json', start: 1, count: 15 } }).then((data)=>{ this.dataList = []; for(let v of data.data.books) { this.dataList.push({ value: v.id, label: v.title }) } }) .catch(function(error){ console.log(error); }); }, } } </script>
- 基本配置
参数 | 功能 | 默认值 |
---|---|---|
getSearchName | 获取搜索文本 | |
data | 数据格式 [{label: '飞机', value: 1}] | |
visibleInput | 是否隐藏搜索框 | false |
autoQuery | 是否输入后就触发 | true |
width | 设置输入框宽度值 | 210 |
delay | 请求延时间隔(autoQuery为false时) | 500 |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- uCharts高性能跨端图表推新啦,新增图例点击、标记线、词云图、漏斗图等重磅功能
- angular2手动点击特定元素上的点击事件
- Android-View点击事件短时间重复点击的过滤
- etherscan点击劫持漏洞
- 点击劫持防御方案
- 点击劫持 小例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
设计模式
[美] Erich Gamma、Richard Helm、Ralph Johnson、John Vlissides / 李英军、马晓星、蔡敏、刘建中 等 / 机械工业出版社 / 2000-9 / 35.00元
这本书结合设计实作例从面向对象的设计中精选出23个设计模式,总结了面向对象设计中最有价值的经验,并且用简洁可复用的形式表达出来。书中分类描述了一组设计良好、表达清楚的软件设计模式,这些模式在实用环境下特别有用。此书适合大学计算机专业的学生、研究生及相关人员参考。 书中涉及的设计模式并不描述新的或未经证实的设计,只收录了那些在不同系统中多次使用过的成功设计。一起来看看 《设计模式》 这本书的介绍吧!