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地址


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

查看所有标签

猜你喜欢:

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

SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解

SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解

陈丰洲 / 电子工业出版社 / 2018-10 / 59.80元

SEM人员在职场打拼的过程中,会遇到一个又一个坑,《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》尝试站在一定的高度,将从业者从专员走向管理岗位过程中可能碰到的问题进行整理,不仅谈竞价推广,也谈基于SEM的营销体系。 《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》包括11章内容,由浅入深地分享SEM的进阶过程。第1章是SEM概述,让读者对SEM有......一起来看看 《SEM修炼手册:百度竞价、信息流广告、数据分析与专题页策划实战详解》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具