免费微信小程序_基于vue完成可查找下拉框定制组

基于vue实现可搜索下拉框定制组件       这篇文章主要为大家详细介绍了基于vue实现可搜索下拉框定制组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

一、效果

二、组件代码

dropdown.vue

 template 
 div v-show-extend="show" 
 div v-show="length" 
 input 
 @keyup='search($event)' :placeholder="placeholder" / 
 span /span 
 /div 
 ul v-show="length" 
 li v-for ="(item,index) in datalist" @click="appClick(item)" 
 :key="index" 
 span {{item.name}} /span 
 /li 
 /ul 
 div v-show="!datalist.length" {{nodatatext}} /div 
 /div 
 /template 
 script 
 export default {
 data(){
 return {
 _datalist:this.itemlist.concat(),
 datalist:this.itemlist.concat(),
 length:this.itemlist.length
 pro凡科抠图:{
 '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(){
 /script 
 style lang="scss" scoped 
 .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;
 /style 

三、组件使用

 dropdown :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext" /dropdown 

更多搜索功能实现的精彩文章，请点击专题： 进行学习

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