欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue点击弹框搜索列表功能

程序员文章站 2022-05-16 21:30:04
...

先看下开发完成的功能

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

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