更新时间:2020年3月26日 17:02:13 作者:wl_
本文主要详细介绍基于Vue的可搜索下拉框定制组件的实现。 文章中的示例代码非常详细javascript 下拉框,具有一定的参考价值。 有兴趣的男士可以参考一下
实践加深了对Vue的理解并使用有效的方法。 本文是基于vue的可搜索下拉框自定义组件的实现javascript 下拉框,记录于此。
1、效果
2. 组件代码
下拉菜单.vue
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 }, 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){ this.$emit('item-click',data); }, 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; }); } }, mounted:function(){ } } .vue-dropdown.default-theme { position: absolute; left:15%; display: none; width: 70%; margin: 0 auto; margin-top: 1em; padding: 1em; z-index:10; box-shadow: 0px 0px 10px #ccc; &._self-show { display: block!important; } .search-module { position: relative; .search-text { width: 100%; height: 30px; padding-right: 2em; padding-left:0.5em; border-radius: 0.5em; box-shadow: none; border: 1px solid #ccc; &:focus { border-color: #2198f2; } } .search-icon { position: absolute; top: 24%; right: 0.5em; color: #aaa; } } .list-module { max-height: 200px; overflow-y: auto; li { &._self-hide { display: none; } margin-top: 0.5em; padding: 0.5em; &:hover { cursor:pointer; color: #fff; background: #00a0e9; } } } } .tip__nodata { font-size: 12px; margin-top: 1em; }
- {{item.name}}
{{nodatatext}}
3. 组件的使用
更多关于搜索功能实现的精彩文章请点击主题:javascript搜索功能总结学习
以上就是本文的全部内容。 希望对您的学习有所帮助,也希望您多多支持脚本之家。