vue点击弹框搜索列表功能

栏目: 编程语言 · 发布时间: 5年前

内容简介:先看下开发完成的功能本来想借助

先看下开发完成的功能

vue点击弹框搜索列表功能

本来想借助 element-ui 里的 el-selectel-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

git地址


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计模式

设计模式

[美] Erich Gamma、Richard Helm、Ralph Johnson、John Vlissides / 李英军、马晓星、蔡敏、刘建中 等 / 机械工业出版社 / 2000-9 / 35.00元

这本书结合设计实作例从面向对象的设计中精选出23个设计模式,总结了面向对象设计中最有价值的经验,并且用简洁可复用的形式表达出来。书中分类描述了一组设计良好、表达清楚的软件设计模式,这些模式在实用环境下特别有用。此书适合大学计算机专业的学生、研究生及相关人员参考。 书中涉及的设计模式并不描述新的或未经证实的设计,只收录了那些在不同系统中多次使用过的成功设计。一起来看看 《设计模式》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具