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

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

效果图：

子组件下拉菜单VUE

模板div class=' vue-下拉默认-主题' div class=' cur-name ' : class=' IsShow ' show ' : ' ' @ 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”: {//是否需要搜索框：型布尔值，default: false },“no data text”: { type : string，default : '未找到结果' //没有搜索到时的文本提示} }，创建了(){ 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}/样式父组件调用

下拉列表：项-单击=' DropDownClick ' : isNeedSearch=' true ' :项目列表='项目列表'/下拉列表

从" @/components/dropdown.vue "导入下拉式导出默认{ 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 '。

ps:下面看下某视频剪辑软件组件实践-可搜索下拉框

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

一、效果

二、组件代码

下拉列表。某视频剪辑软件

模板div class=' vue-下拉默认-主题' v-show-extend=' show ' div class=' search-module clear fix ' v-show='项目列表。length ' input class=' search-text ' @ keyup=' search($ event)' : placeholder=' placeholder '/span class=' glyphicon glyphicon-search-icon '/span/div ul class=' list-module ' v-show=' length ' Li v-for='(数据项，索引)in datalist ' @ click=' appClick '长度" { no data text } }/div/div/模板脚本导出默认值{ data(){ return { datalist :[]} }，prop : { ' show ' : {//用于外部控制组件的显示/隐藏type :布尔值，default:true }、“项目列表”:数组、占位符“:String”、“no data text”: string }、watch : { item list : function(val){ this。datalist=val。concat()；} }，指令： { ' show-extend ' :函数(El，binding，vnode){//bind和更新钩子让value=binding.value，searchInput=nullif(value){ El。风格。display=' block}else{//隐藏后，恢复初始状态埃尔。风格。display=" nonesearchInput=el.querySelector ' .搜索文本');searchInput.value=vnode。语境。datalist=vnode。语境。项目列表；//还原渲染数据} }，方法： { appclick :函数(数据){这个.$emit('item-click '，data)；}，search : function(e){ 0让vm=this，搜索值=e . CurrentTarget。价值；vm.datalist=vm.itemlist.filter(函数(项目，索引，arr){返回项目。名字。indexof(搜索值)！=-1;});} }，计算出： { length : function(){ return this。数据列表。长度；} } }/脚本样式lang="SCS "范围vue-下拉。默认-主题{绝对位置：左侧：15%;显示器：无；宽度： 70%;margin: 0自动页边距-top : 1em；padding: 1emz索引：10;盒影： 0px 0px 10px # CCC。_self-show { display: block！重要；} .搜索模块{位置：相对；搜索文本{宽度： 100%；高度： 30px填充-右： 2em左填充left:0.5em边界半径： 0.5 em盒子阴影：无；border: 1px固体# ccc:焦点{边框-颜色： # 2198 F2} } .搜索图标{ position : absolute top : 24%；right : 0.5 emcolor : # AAA } }。列表-模块{最大高度：200像素；溢出-y:自动；李._ self hide { display : none}边距-top : 0.5 em；padd : 0.5 em : hover { cursor : pointer color : # fff背景# 00a 0e 9 } } } } }。tip _ _无数据{ font-size : 12px页边距-top : 1em；}/样式三、组件使用

下拉列表：项目列表='项目列表' :占位符='占位符' : nodatext=' nodata text '/下拉列表总结

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