当前位置：Gxlcms > JavaScript > vue组件实践之可搜索下拉框功能

vue组件实践之可搜索下拉框功能

时间：2021-07-01 10:21:17 帮助过：14人阅读

之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。

效果图：

子组件 DROPDOWN.VUE

  1. <template>
  2.  <div class="vue-dropdown default-theme">
  3.  <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemlist.cur.name}}</div>
  4.  <div class="list-and-search" :class="isShow?'on':''">
  5.  <div class="search-module clearfix" v-show="isNeedSearch">
  6.   <input class="search-text" 
  7.   @keyup='search($event)' :placeholder="placeholder" />
  8.   </div>
  9.   <ul class="list-module">
  10.   <li v-for ="(item,index) in datalist" @click="selectToggle(item)" 
  11.   :key="index">
  12.    <span class="list-item-text">{{item.name}}</span>
  13.   </li>
  14.   </ul>
  15.   <div class="tip-nodata" v-show="isNeedSearch && datalist.length == 0">{{nodatatext}}</div>
  16.  </div>
  17.  </div>
  18. </template>
  19. <script>
  20.  export default {
  21.  data(){
  22.   return {
  23.   datalist:[],
  24.   isShow:false
  25.   }
  26.  },
  27.  props:{
  28.   'itemlist':Object,//父组件传来的数据
  29.   'placeholder':{
  30.   type:String,
  31.   default: '搜索' //input placeholder的默认值
  32.   },
  33.   'isNeedSearch':{ //是否需要搜索框
  34.   type:Boolean,
  35.   default: false
  36.   },
  37.   'nodatatext':{ 
  38.   type:String,
  39.   default: '未找到结果' //没有搜索到时的文本提示
  40.   } 
  41.  },
  42.  created(){
  43.   this.datalist = this.itemlist.data;
  44.   //点击组件以外的地方，收起
  45.   document.addEventListener('click', (e) => {
  46.   if (!this.$el.contains(e.target)){
  47.    this.isShow = false; 
  48.   }
  49.   }, false)
  50.  },
  51.  methods:{
  52.   selectToggle(data){
  53.   this.itemlist.cur.name = data.name;
  54.   this.isShow = false;
  55.   this.$emit('item-click',data);
  56.   },
  57.   search(e){
  58.   let searchvalue = e.currentTarget.value;
  59.   this.datalist = this.itemlist.data.filter((item,index,arr)=>{
  60.    return item.name.indexOf(searchvalue) != -1;
  61.   });
  62.   }
  63.  }
  64.  }
  65. </script>
  66. <style lang="less" scoped>
  67.  .list-and-search{
  68.  background: #fff;
  69.  border: 1px solid #ccc;
  70.  display: none;
  71.  &.on{
  72.   display: block;
  73.  }
  74.  }
  75.  .cur-name{
  76.  height: 32px;
  77.  line-height: 32px;
  78.  text-indent: 10px;
  79.  position: relative;
  80.  color: #777;
  81.  &:after{
  82.  position: absolute;
  83.  right: 9px;
  84.  top: 13px;
  85.  content: " ";
  86.  width: 0;
  87.  height: 0;
  88.  border-right: 6px solid transparent;
  89.  border-top: 6px solid #7b7b7b;
  90.  border-left: 6px solid transparent;
  91.  border-bottom: 6px solid transparent;
  92.  }
  93.  &.show{
  94.  &:after{
  95.  right: 9px;
  96.  top: 6px;
  97.  border-right: 6px solid transparent;
  98.  border-bottom: 6px solid #7b7b7b;
  99.  border-left: 6px solid transparent;
  100.  border-top: 6px solid transparent;
  101.  }
  102.  }
  103.  }
  104.  .vue-dropdown.default-theme {
  105.  width: 200px;
  106.  z-index:10;
  107.  border-radius:3px; 
  108.  border: 1px solid #ccc;
  109.  cursor: pointer;
  110.  -webkit-user-select:none; 
  111.  user-select:none;
  112.  &._self-show {
  113.   display: block!important;
  114.  }
  115.  .search-module {
  116.   position: relative;
  117.   border-bottom: 1px solid #ccc;
  118.   .search-text {
  119.   width: 100%;
  120.   height: 30px;
  121.   text-indent: 10px;
  122.   // border-radius: 0.5em;
  123.   box-shadow: none;
  124.   outline: none;
  125.   border: none;
  126.   // &:focus {
  127.   // border-color: #2198f2;
  128.   // }
  129.   }
  130.   .search-icon {
  131.   position: absolute;
  132.   top: 24%;
  133.   right: 0.5em;
  134.   color: #aaa;
  135.   }
  136.  }
  137.  input::-webkit-input-placeholder{
  138.   font-size: 14px;
  139.  }
  140.  .list-module {
  141.   max-height: 200px;
  142.   overflow-y: auto;
  143.   li {
  144.   &._self-hide {
  145.    display: none;
  146.   }
  147.   margin-top: 0.4em;
  148.   padding: 0.4em;
  149.   &:hover {
  150.    cursor:pointer;
  151.    color: #fff;
  152.    background: #00a0e9;
  153.   }
  154.   }
  155.  }
  156.  }
  157.  .tip-nodata {
  158.  font-size: 14px;
  159.  padding: 10px 0;
  160.  text-indent: 10px;
  161.  }
  162. </style>

父组件调用

  1. <dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>

  1. import Dropdown from '@/components/dropdown.vue'
  2. export default {
  3.  data() {
  4.  return {
  5.  itemlist: {
  6.  cur: {
  7.   val: "",
  8.   name: "所有产品"
  9.  },
  10.  data: [{
  11.   val: "",
  12.   name: "所有产品"
  13.  }, {
  14.   val: 1,
  15.   name: "梦幻西游"
  16.  }, {
  17.   val: 2,
  18.   name: "梦幻无双"
  19.  }, {
  20.   val: 3,
  21.   name: "大话西游"
  22.  }]
  23.  },
  24.  }
  25.  },
  26.  components: {
  27.  Dropdown,
  28.  },
  29.  methods :{
  30.  dropDownClick(e) {
  31.  console.log(e.name, e.val)
  32.  }
  33.  }
  34. }

默认是不带搜索框，如果需要可以传这个:isNeedSearch="true"。

ps：下面看下vue组件实践-可搜索下拉框

实践加深对vue的理解和运用有效途径，本文是基于vue的可搜索下拉框定制组件实现，在此记录.

一、效果

二、组件代码

dropdown.vue

  1. <template>
  2.  <div class="vue-dropdown default-theme" v-show-extend="show">
  3.   <div class="search-module clearfix" v-show="itemlist.length">
  4.    <input class="search-text" 
  5.    @keyup='search($event)' :placeholder="placeholder" />
  6.    <span class="glyphicon glyphicon-search search-icon"></span>
  7.   </div>
  8.   <ul class="list-module" v-show="length">
  9.    <li v-for ="(item,index) in datalist" @click="appClick(item)" 
  10.    :key="index">
  11.     <span class="list-item-text">{{item.name}}</span>
  12.    </li>
  13.   </ul>
  14.   <div class="tip__nodata" v-show="!length">{{nodatatext}}</div>
  15.  </div>
  16. </template>
  17. <script>
  18.  export default {
  19.   data(){
  20.    return {
  21.     datalist:[]
  22.    }
  23.   },
  24.   props:{
  25.    'show':{//用于外部控制组件的显示/隐藏
  26.     type:Boolean,
  27.     default:true
  28.    },
  29.    'itemlist':Array,
  30.    'placeholder':String,
  31.    'nodatatext':String
  32.   },
  33.   watch:{
  34.    itemlist:function(val){
  35.     this.datalist = val.concat();
  36.    }
  37.   },
  38.   directives:{
  39.    'show-extend':function(el,binding,vnode){//bind和 update钩子
  40.     let value = binding.value,searchInput = null;
  41.     if(value){
  42.      el.style.display='block';
  43.     }else{//隐藏后，恢复初始状态
  44.      el.style.display='none';
  45.      searchInput = el.querySelector(".search-text");
  46.      searchInput.value = '';
  47.      vnode.context.datalist = vnode.context.itemlist;//还原渲染数据
  48.     }
  49.    }
  50.   },
  51.   methods:{
  52.    appClick:function(data){
  53.     this.$emit('item-click',data);
  54.    },
  55.    search:function(e){
  56.     let vm = this,searchvalue = e.currentTarget.value;
  57.     vm.datalist = vm.itemlist.filter(function(item,index,arr){
  58.      return item.name.indexOf(searchvalue) != -1;
  59.     });
  60.    }
  61.   },
  62.   computed:{
  63.    length:function(){
  64.     return this.datalist.length;
  65.    }
  66.   }
  67.  }
  68. </script>
  69. <style lang="scss" scoped>
  70.  .vue-dropdown.default-theme {
  71.   position: absolute;
  72.   left:15%;
  73.   display: none;
  74.   width: 70%;
  75.   margin: 0 auto;
  76.   margin-top: 1em;
  77.   padding: 1em;
  78.   z-index:10;
  79.   box-shadow: 0px 0px 10px #ccc;
  80.   &._self-show {
  81.    display: block!important;
  82.   }
  83.   .search-module {
  84.    position: relative;
  85.    .search-text {
  86.     width: 100%;
  87.     height: 30px;
  88.     padding-right: 2em;
  89.     padding-left:0.5em;
  90.     border-radius: 0.5em;
  91.     box-shadow: none;
  92.     border: 1px solid #ccc;
  93.     &:focus {
  94.      border-color: #2198f2;
  95.     }
  96.    }
  97.    .search-icon {
  98.     position: absolute;
  99.     top: 24%;
  100.     right: 0.5em;
  101.     color: #aaa;
  102.    }
  103.   }
  104.   .list-module {
  105.    max-height: 200px;
  106.    overflow-y: auto;
  107.    li {
  108.     &._self-hide {
  109.      display: none;
  110.     }
  111.     margin-top: 0.5em;
  112.     padding: 0.5em;
  113.     &:hover {
  114.      cursor:pointer;
  115.      color: #fff;
  116.      background: #00a0e9;
  117.     }
  118.    }
  119.   }
  120.  }
  121.  .tip__nodata {
  122.   font-size: 12px;
  123.   margin-top: 1em;
  124.  }
  125. </style>

三、组件使用

  1. <dropdown :itemlist="itemlist" :placeholder="placeholder" 
  2. :nodatatext="nodatatext"></dropdown>

总结

以上所述是小编给大家介绍的vue下拉菜单组件（含搜索）功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！