vue点击弹框搜索列表功能

先看下开发完成的功能

本来想借助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

git地址

转载于:https://juejin.im/post/5c3c5f25f265da61483bd213