vue下拉菜单组件实现代码(含搜索)

我之前写过这个小部件，但是最近遇到了在select下添加搜索的功能，所以我会稍微改进一下。

渲染：

子组件下拉列表. vue

模板div class=' vue-下拉默认-主题' div class=' cur-name ' @ click=' IsShow=！IsShow"{项目列表。cur。name } }/div class=' list-and-search ' : class=' is show？on ' : ' ' ' div class=' search-module clear fix ' v-show=' isNeedSearch ' input class=' search-text ' @ key up=' 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='父组件传来的数据占位符" :{ type:String，default: '搜索//输入占位符的默认值}、“isNeedSearch”: {//是否需要搜索框：型布尔值，默认值： false }，“no data text”: {//是否需要显示搜索类型：字符串，默认值： '未找到结果' //没有搜索到时的文本提示} }，创建了(){ this。datalist=this。项目列表。数据；//点击组件以外的地方，收起文件。addeventlistener(' click '，(e)={ if(！这个$ El。包含(e . target)){这个。isshow=false} }，false) }，methods:{ selectToggle(数据){这个。项目列表。cur。名称=数据。姓名；this.isShow=false这个$emit('item-click '，data)；}，搜索(e){ 0让搜索值=e . CurrentTarget。价值；这个。datalist=this。项目列表。数据。filter((item，index，arr)={ return item。名字。indexof(搜索值)！=-1;});} } }/脚本样式lang="less "范围。列表和搜索{ background : # fffborder : 1px固体# cccdisplay:无；在{显示：块上；} } .cur-name { height : 32px；线高： 32px文本缩进： 10px相对位置：{ position : absoluteright : 9pxtop : 13 xcontent : " "；宽度： 0;高度： 0;右边框： 6px纯色透明；边框-top: 6px实心# 7b7b7b边框-左侧： 6px实心透明；边框-底部： 6px固体透明；} .在{ right : 9pxtop : 6pxborder-right : 6px纯色透明；边框-底部： 6px实心# 7b7b7b边框-左侧： 6px实心透明；边框-top: 6px纯色透明；} } } .vue-下拉。默认-主题{宽度： 200像素索引：10;边界半径：3 pxborder: 1px固体# ccccccursor :指针；-网络工具包-用户-选择：无；用户选择：无；_self-show { display: block！重要；} .搜索模块{位置：相对；边框-底部： 1px实心# ccc .搜索文本{宽度： 100%；height : 30pxtext-缩进： 10px//边框-半径：0.5 em；盒子阴影：无；大纲：无；border:无；//:焦点{//边框-颜色： # 2198 F2//} } .搜索图标{ position : absolute top : 24%；right : 0.5 emcolor : # AAA } }输入：-web kit-输入-占位符{ font-size : 14px} .列表-模块{最大高度：200像素；溢出-y:自动；李._ self hide { display : none}边距-top : 0.4 em；padd : 0.4 em : hover { cursor : pointer color : # fff背景# 00a 0e 9 } } } } }。tip-无数据{ font-size : 14pxpadd : 10px 0；文本缩进： 10px}/样式父组件调用

下拉： item-click=' DropDownClick ' : isNeedSearch=' true ' : item list=' item list '/DropDown从' @/components/下拉中导入下拉列表。vue ' export default { data(){ return { item list : { cur : { val : }，name: '所有产品}，data: [{ val: ' '，name: '所有产品}，{ val: 1，name: '梦幻西游}，{ val: 2，name: '梦幻无双}，{ val: 3，name: '大话西游}] }，} }，组件： { Download，}，方法： { DropDorclick(e){ console。日志(e . name，e.val) } }默认是不带搜索框，如果需要可以传这个：isNeedSearch='true '。

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