vue下拉菜单组件（含搜索）的实现代码

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

效果图：

子组件 dropdown.vue

<template>
 <div class="vue-dropdown default-theme">
 <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div>
 <div class="list-and-search" :class="isShow?'on':''">
 <div class="search-module clearfix" v-show="isNeedSearch">
 <input class="search-text" 
 @keyup='search($event)' :placeholder="placeholder" />
 </div>
 <ul class="list-module">
 <li v-for ="(item,index) in datalist" @click="selectToggle(item)" 
 :key="index">
 <span class="list-item-text">{{item.name}}</span>
 </li>
 </ul>
 <div class="tip-nodata" v-show="isNeedSearch && datalist.length == 0">{{nodatatext}}</div>
 </div>
 </div>
</template>

<script>
 export default {
 data(){
 return {
 datalist:[],
 isShow:false
 }
 },
 props:{
 'itemlist':Object,//父组件传来的数据
 'placeholder':{
 type:String,
 default: '搜索' //input placeholder的默认值
 },
 'isNeedSearch':{ //是否需要搜索框
 type:Boolean,
 default: false
 },
 'nodatatext':{ //是否需要显示搜索
 type:String,
 default: '未找到结果' //没有搜索到时的文本提示
 } 
 },
 created(){
 this.datalist = this.itemlist.data;
 //点击组件以外的地方，收起
 document.addEventListener('click', (e) => {
 if (!this.$el.contains(e.target)){
 this.isShow = false; 
 }
 }, false)
 },
 methods:{
 selectToggle(data){
 this.itemlist.cur.name = data.name;
 this.isShow = false;
 this.$emit('item-click',data);
 },
 search(e){
 let searchvalue = e.currentTarget.value;
 this.datalist = this.itemlist.data.filter((item,index,arr)=>{
 return item.name.indexOf(searchvalue) != -1;
 });
 }
 }
 }
</script>

<style lang="less" scoped>
 .list-and-search{
 background: #fff;
 border: 1px solid #ccc;
 display: none;
 &.on{
 display: block;
 }
 }
 .cur-name{
 height: 32px;
 line-height: 32px;
 text-indent: 10px;
 position: relative;
 color: #777;
 &:after{
 position: absolute;
 right: 9px;
 top: 13px;
 content: " ";
 width: 0;
 height: 0;
 border-right: 6px solid transparent;
 border-top: 6px solid #7b7b7b;
 border-left: 6px solid transparent;
 border-bottom: 6px solid transparent;
 }
 &.show{
 &:after{
 right: 9px;
 top: 6px;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #7b7b7b;
 border-left: 6px solid transparent;
 border-top: 6px solid transparent;
 }
 }
 }
 .vue-dropdown.default-theme {
 width: 200px;
 z-index:10;
 border-radius:3px; 
 border: 1px solid #ccc;
 cursor: pointer;
 -webkit-user-select:none; 
 user-select:none;
 &._self-show {
 display: block!important;
 }
 .search-module {
 position: relative;
 border-bottom: 1px solid #ccc;
 .search-text {
 width: 100%;
 height: 30px;
 text-indent: 10px;
 // border-radius: 0.5em;
 box-shadow: none;
 outline: none;
 border: none;
 // &:focus {
 // border-color: #2198f2;
 // }
 }
 .search-icon {
 position: absolute;
 top: 24%;
 right: 0.5em;
 color: #aaa;
 }
 }
 input::-webkit-input-placeholder{
 font-size: 14px;
 }
 .list-module {
 max-height: 200px;
 overflow-y: auto;
 li {
 &._self-hide {
 display: none;
 }
 margin-top: 0.4em;
 padding: 0.4em;
 &:hover {
 cursor:pointer;
 color: #fff;
 background: #00a0e9;
 }
 }
 }
 }
 .tip-nodata {
 font-size: 14px;
 padding: 10px 0;
 text-indent: 10px;
 }
</style>

父组件调用

<dropdown :item-click="dropDownClick" :isNeedSearch="true" :itemlist="itemlist"></dropdown>
import Dropdown from '@/components/dropdown.vue'
export default {
 data() {
 return {
 itemlist: {
 cur: {
 val: "",
 name: "所有产品"
 },
 data: [{
 val: "",
 name: "所有产品"
 }, {
 val: 1,
 name: "梦幻西游"
 }, {
 val: 2,
 name: "梦幻无双"
 }, {
 val: 3,
 name: "大话西游"
 }]
 },
 }
 },
 components: {
 Dropdown,
 },
 methods :{
 dropDownClick(e) {
 console.log(e.name, e.val)
 }
 }
}

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

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