亲宝软件园·资讯

展开

element el-autocomplete

web小奶精 人气:0

vue+element UI

element UI的带输入建议官方文档:https://element.eleme.cn/#/zh-CN/component/input

建议先看官方文档,这里是官方文档的适当补充

 引用el-autocomplete

1、在需要的地方引用

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

 v-model="inputValue" :与inputValue绑定值,也就是说,自动输入建议的值可以通过inputValue拿到。

:fetch-suggestions="querySearch" : 返回输入建议的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据,这些数据就是输入建议的数据。

@select="handleSelect" : 当选中建议项时,调用该方法。

2 、

<script>
export default {
  name: "searchBar",
  //allInfos是父组件传来的值,如果allInfos不是父组件传来的就不用这样写
  props: ["allInfos"],
  data() {
    return {
      inputValue: "",
    };
  },
 
  methods: {
    handleSubmit() {
     //根据自身情况
     //该方法是提交时触发
    },
    //输入框获取焦点时调用的方法
    querySearch(queryString, cb) {
    //allInfos是怎么来,是从父组件传过来的还是在自己组件调用api接口拿到的还是其他
    //我这里的allInfos是从父组件传过来的,在这里也举例子组件从父组件传值
      let results = this.allInfos;
      results = queryString
        ? results.filter(this.createFilter(queryString))
        : results;
    //cb是回调函数,返回筛选出的结果数据到输入框下面的输入列表
      cb(results);
    },
    //该方法仿写官方文档,如果没有特别的需求,该方法改动不大
    //这是当输入数据时触发的,筛选出和输入数据匹配的建议输入。
    //我这里用的是调用match方法,是模糊匹配;官方调用的是indexOf,是精确匹配,看自身情况选择
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
  },
};
</script>

触发带输入建议的两种方式

1.输入框获取焦点时就触发
这是默认的

2.输入值后匹配触发
在组件上加上:trigger-on-focus="false"

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

转成输入建议回调的数据结构

大家也看到了文档里面,回调的数据结果,是一个数组,数组的每一项是一个对象,对象里一定要有一个value的属性,这些是必须的。如果数据结构不长这样,那么待输入建议的数据是无法渲染出来的。

[
          { "value": "xxx(在输入建议看到的值,必需)", "address": "看自身情况" },
]

那么问题来了,如果拿出来的数据不是这样结构,该怎么办?以我的情况举个例子。

我拿到的数据是这样的,虽然也是数组,但是数组里的对象属性不一样。

this.modelInfos=
[
          { "modelId": "1", "modelName": "a1",type:"c" },
          { "modelId": "2", "modelName": "a2",type:"c" },
          { "modelId": "3", "modelName": "a3",type:"c" },
          { "modelId": "4", "modelName": "a4",type:"c" },
]

用map返回想要的数据结构。

 this.allInfos= this.modelInfos.map((terminal) => {
        return {
          value: modelName,
          name: modelId,
        };
      });

可以log打印一下,就会发现allInfos的结构就变成了想要的亚子。

增加回车触发事件

在组件里增加 @keyup.enter.native方法

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
    ></el-autocomplete>

解决回车后建议输入框没消失的bug

如果增加了回车事件,那么输入数据回车后,输入建议框没有自动消失,该如何解决?

在组件又增加方法:@input(在输入值发生改变的时候触发changeStyle方法)

@keyup(按键松开触发的事件,也就是回车时触发changeStyle方法)

传入的“block”是让输入框建议展开,'.el-autocomplete-suggestion'是输入建议框的类名

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
      @input="changeStyle('block', '.el-autocomplete-suggestion')"
      @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
    ></el-autocomplete>
    //根据传进来的状态改变建议输入框的状态(展开|隐藏)
    changeStyle(status, className) {
      let dom = document.querySelectorAll(className);
      dom[0].style.display = status;
    },

在handleSubmit的时候调用changeStyle方法,传入的状态为none(表示让输入建议框隐藏) 

handleSubmit() {
      this.changeStyle("none", ".el-autocomplete-suggestion");    
    },

加载全部内容

相关教程
猜你喜欢
用户评论