VANT 移动端的下拉组件

VANT 移动端的下拉组件
这个是用来使list选项悬浮

`style="position: absolute; z-index: 10;width:100%"

item.indexOf(value)!=-1用来进行模糊搜索，判定字符串是否包含

<template>
  <div class="Droplist-wrap">
          <van-field v-model="value" 
          placeholder="请选择类名"
          right-icon="arrow-down"
          label="类别"
          @input="onchange1"
          @click-right-icon="clickright" 
          />
          <div>
    
          <van-list style="position: absolute; z-index: 10;width:100%"
          v-model="loading"
          :finished="finish"
        >
            <van-search v-model="value" 
            placeholder="请输入搜索"
             v-if=" showcell"
            />
          <van-cell 
            v-for="item in list"
            :key="item"
            :title="item"
            v-if="item.indexOf(value)!=-1 && showcell"
            @click="clickcell(item)"
          />
        
        </van-list>
      </div>
   
  </div>
</template>

<script>
export default {
  name: 'Droplist',
 data(){
   return{
    list: ['大型户外广告','高炮','看板','企业指示板','工地围挡','店招标牌','其他'],
      loading: false,
      finish: true,
      search1:'',
     value:'',
     value1:'',
     showcell:false,
     
   }
 },watch:{
  value:function(val) {
    this.$emit('transferdata',val);
        }//监听并传值给父组件
 },
 methods: {
  onchange1(){
          console.log(this.value,"change") ;
         },
  // focusfield(){this.showcell=true},
  // blurfield(){this.showcell=false},
  clickright(){this.showcell=!this.showcell;
                //  this.value='';
                console.log("d","d")
      },         
  clickcell(item)
  {
  this.value=item;
  this.showcell=false;
  console.log(this.value,"ss") ;}
 }
}
</script>
<style lang="scss" scoped></style>