Vue erstellt ein durchsuchbares Dropdown-Feld

Dieses Mal bringe ich Ihnen ein durchsuchbares Dropdown-Feld in Vue. Was sind die Vorsichtsmaßnahmen zum Erstellen eines durchsuchbaren Dropdown-Felds in Vue? Hier ist ein praktischer Fall. Schauen wir uns das an.

Üben ist ein effektiver Weg, um das Verständnis und die Anwendung von Vue zu vertiefen. Dieser Artikel basiert auf der Implementierung einer durchsuchbaren Dropdown-Box-angepassten Komponente von Vue, die hier aufgezeichnet wird.

1. Wirkung

2. Komponentencode

dropdown.vue

<template>
  <p class="vue-dropdown default-theme" v-show-extend="show">
    <p class="search-module clearfix" v-show="length">
      <input class="search-text" 
      @keyup=&#39;search($event)&#39; :placeholder="placeholder" />
      <span class="glyphicon glyphicon-search search-icon"></span>
    </p>
    <ul class="list-module" v-show="length">
      <li v-for ="(item,index) in datalist" @click="appClick(item)" 
      :key="index">
        <span class="list-item-text">{{item.name}}</span>
      </li>
    </ul>
    <p class="tip__nodata" v-show="!datalist.length">{{nodatatext}}</p>
  </p>
</template>
<script>
  export default {
    data(){
      return {
        _datalist:this.itemlist.concat(),
        datalist:this.itemlist.concat(),
        length:this.itemlist.length
      }
    },
    props:{
      'show':{//用于外部控制组件的显示/隐藏
        type:Boolean,
        default:true
      },
      'itemlist':Array,
      'placeholder':String,
      'nodatatext':String
    },
    directives:{
      'show-extend':function(el,binding,vnode){//bind和 update钩子
        let value = binding.value,searchInput = null;
        if(value){
          el.style.display='block';
        }else{//隐藏后，恢复初始状态
          el.style.display='none';
          searchInput = el.querySelector(".search-text");
          searchInput.value = '';
          vnode.context.datalist = vnode.context.itemlist;//还原渲染数据
        }
      }
    },
    methods:{
      appClick:function(data){
        this.$emit('item-click',data);
      },
      search:function(e){
        let vm = this,searchvalue = e.currentTarget.value;
        vm.datalist = vm.$data._datalist.filter(function(item,index,arr){
          return item.name.indexOf(searchvalue) != -1;
        });
      }
    },
    mounted:function(){
    }
  }
</script>
<style lang="scss" scoped>
  .vue-dropdown.default-theme {
    position: absolute;
    left:15%;
    display: none;
    width: 70%;
    margin: 0 auto;
    margin-top: 1em;
    padding: 1em;
    z-index:10;
    box-shadow: 0px 0px 10px #ccc;
    &._self-show {
      display: block!important;
    }
    .search-module {
      position: relative;
      .search-text {
        width: 100%;
        height: 30px;
        padding-right: 2em;
        padding-left:0.5em;
        border-radius: 0.5em;
        box-shadow: none;
        border: 1px solid #ccc;
        &:focus {
          border-color: #2198f2;
        }
      }
      .search-icon {
        position: absolute;
        top: 24%;
        right: 0.5em;
        color: #aaa;
      }
    }
    .list-module {
      max-height: 200px;
      overflow-y: auto;
      li {
        &._self-hide {
          display: none;
        }
        margin-top: 0.5em;
        padding: 0.5em;
        &:hover {
          cursor:pointer;
          color: #fff;
          background: #00a0e9;
        }
      }
    }
  }
  .tip__nodata {
    font-size: 12px;
    margin-top: 1em;
  }
</style>

3. Komponentenverwendung

<dropdown :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></dropdown>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die JQuery-Layur-Popup-Ebene in praktischen Projekten

So implementieren Sie ein Angular Projekt mit Angular CLI

Das obige ist der detaillierte Inhalt vonVue erstellt ein durchsuchbares Dropdown-Feld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!