vue组件实现可搜索下拉框扩展

本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下

一、效果

二、代码

dropdown-ext.vue

  .text-overflow__style {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .vue-dropdown-ext {

    .search-module { position: relative;
      .search-text { width: 100%;
 height: 30px;
 padding-right: 2em;
 padding-left:0.5em;
 box-shadow: none;
 border: 1px solid #ccc;
 background: #fff;
 &:focus { border-color: #2198f2;
 }
      }

      .search-icon {
 position: absolute;
 top: 24%;
 right: 0.5em;
 color: #aaa;
      }

    }

    .list-module {
      overflow: auto;
      li { position: relative;
 margin-top: 0.5em;
 padding: 0.5em;
 border: 1px solid #ccc;
 white-space: nowrap;

 &>span { display: inline-block;
   vertical-align: middle;
 }

      }
    }

    .tip__nodata {
      font-size: 12px;
      margin-top: 1em;
    }

    &.default-theme {
      .list-module li { &:hover { cursor: pointer;
   border-color: #00a0e9;
 }

 &.active {
   border-color: #00a0e9;
   color: #00a0e9;
 }
      }

    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。