当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue组件实现可搜索下拉框扩展

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

2018年08月08日  | 移动技术网IT编程  | 我要评论

阿鲁达,北美华人网,一天到晚只想着你音译

本文实例为大家分享了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>

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网