内容简介:先看下开发完成的功能本来想借助
先看下开发完成的功能
本来想借助 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点击劫持漏洞
- 点击劫持防御方案
- 点击劫持 小例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解
陈丰洲 / 电子工业出版社 / 2018-10 / 59.80元
SEM人员在职场打拼的过程中,会遇到一个又一个坑,《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》尝试站在一定的高度,将从业者从专员走向管理岗位过程中可能碰到的问题进行整理,不仅谈竞价推广,也谈基于SEM的营销体系。 《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》包括11章内容,由浅入深地分享SEM的进阶过程。第1章是SEM概述,让读者对SEM有......一起来看看 《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》 这本书的介绍吧!