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

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

一、效果

二、代码

dropdown-ext.vue

<template>
 <div class=\"vue-dropdown-ext\" :class=\"themestyle\" v-show-extend=\"show\">
 <div class=\"search-module clearfix\" v-show=\"length\">
 <input class=\"search-text\" @keyup=\'search($event)\' 
 :placeholder=\"placeholder\" />
 <span class=\"glyphicon glyphicon-search search-icon\"></span>
 </div>
 <ul class=\"list-module\" v-show=\"length\" :style=\"{maxHeight:maxH+\'px\'}\">
 <li v-for =\"(item,index) in datalist\" @click=\"appClick(item,$event)\" 
 :key=\"index\" :title=\"item.name\">
 <span v-if=\"addIcon\" :class=\"iconClass\"></span>
 :style=\"itemTextStyle\">{{item.name}}</span>
 <span v-if=\"statusIconType == \'text\' && hasStatus\" 
 :class=\"item.statusClass\">{{item.statusText}}</span>
  :class=\"item.statusClass\"></span>
 </li>
 </ul>
 <div class=\"tip__nodata\" v-show=\"!datalist.length\">{{nodatatext}}</div>
 </div>
</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,
 \'themestyle\':{
 type:String,
 default:\'default-theme\'
 },
 \'item-text-style\':{
 type:Object,
 default:function(){
  return {
  width:\'80%\'
  }
 }
 },
 \'add-icon\':{
 type:Boolean,
 default:true
 },
 \'icon-class\':{
 type:String,
 default:\'\'
 },
 \'has-status\':{
 type:Boolean,
 default:false
 },
 \'status-icon-type\':{
 type:String,
 default:\'text\'//text or icon
 },
 \'max-h\':{
 type:Number,
 default:$(window).height()-400
 }
 },
 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,event){
 this.$emit(\'item-click\',data,event);
 },
 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;
 });
 },
 statusIconClass:function(status){
 let statusClass = \'\';
 return statusClass;
 }
 },
 mounted:function(){

 }
 }
</script>

<style lang=\"scss\" scoped>
 .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;
 }
 }

 }
 }
</style>

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