Vue는 검색 가능한 드롭다운 상자를 만듭니다.

이번에는 Vue로 검색 가능한 드롭다운 박스를 만드는 방법을 가져오겠습니다. Vue로 검색 가능한 드롭다운 박스를 만들 때 주의사항은 무엇인가요?

연습은 Vue에 대한 이해와 적용을 심화시키는 효과적인 방법입니다. 이 글은 여기에 기록된 검색 가능한 드롭다운 상자 맞춤형 구성 요소를 구현하는 것을 기반으로 합니다.

2. 컴포넌트 코드

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. 컴포넌트 사용법

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 다른 콘텐츠에 주목하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

실제 프로젝트에서 jquerylayur 팝업 레이어를 사용하는 방법

Angular CLI로 Angular 프로젝트를 구현하는 방법

위 내용은 Vue는 검색 가능한 드롭다운 상자를 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!