例-2020-0527-写一个弹层—模态和async父组件控制显示

00.使用：

    <base-filter :show-pop.sync="showPopParent" @getdata="getData2" ref="basefilter" />

01.弹层：

<template>
  <div class="container">
    <div class="content">
      <div class="select-content">
        <div class="input-content" @click.stop="openValue">
          <input v-model="selectValue" disabled type="text" placeholder="全部" />
        </div>
        <div class="list-content" v-show="showPop">
          <ul>
            <li :class='active===index?"actived":""' @click="getValue(index,item)" v-for="(item,index) in listData2" :key="index"><span class="li-text">
                {{ item.keyWords }}
              </span></li>
          </ul>
        </div>
      </div>
      <div style="margin-left:-10px;z-index:1002" @click.stop="openValue">
        <span v-show="showPop" class="iconfont icon-arrowup"></span>
        <span v-show="!showPop" class="iconfont icon-arrowdown"></span>
      </div>
      <div class="search-content">
        <van-search background="background:#fff" shape="round" placeholder="按内容搜索" v-model="searchVal" @search="onSearch">
        </van-search>
      </div>
    </div>
    <div class="mask" v-show="showPop"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'BaseFilter',
  props: {
    showPop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectValue: '',
      searchVal: '',
      active: 0
    }
  },
  watch: {
    showPop(newVal) {
      if (!newVal) {
        this.$emit('update:showPop', false)
      }
    }
  },
  computed: {
    ...mapState({
      listData2: state => state.tClassStore.baseFilterList
    })
  },
  methods: {
    //document事件
    clickShow() {
      if (this.showPop) {
        this.$emit('update:showPop', !this.showPop)
      }
    },
    // 搜索
    onSearch(val) {
      this.searchVal = val
      this.selectValue = '全部'
      this.active = 0
      // console.log('搜索按钮keyWords:', val)
      this.getdata(val, '')
    },
    openValue() {
      this.$emit('update:showPop', !this.showPop)
    },
    // 下拉选择
    getValue(index, item) {
      this.selectValue = item.keyWords
      this.searchVal = ''
      this.active = index
      if (item.keyWords === '全部') {
        // console.log('全部')
        this.getdata('', '')
      } else {
        // console.log('非全部')
        // this.getdata('', item.categoryCode)
        this.getdata('', [item.categoryCode])
      }
    },
    getdata(val, categoryCode) {
      // console.log('searche——提交的数据', this.formItem)
      this.$emit('getdata', { categoryCode: categoryCode, keyWords: val })
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.clickShow)
  },
  mounted() {
    // 2020.0527 增加点击事件
    document.addEventListener('click', this.clickShow)
  }
}
</script>
<style lang="less" scoped>
.container {
  display: flex;
  // height: 80px;
  // align-items: center;
  // z-index: 99;
  // padding-top: 5px;
  // background: #fff;
  .content {
    height: 80px;
    display: flex;
    align-items: center;
    padding-top: 5px;
    background: #fff;
    //
    z-index: 9999;
    position: fixed;
    border-bottom: 1px #e5e5e5 solid;
    width: 100%;
  }
  .select-content {
    z-index: 1002;
    flex: 3;
    font-size: #333333;
    .input-content {
      height: 70px;
      line-height: 70px;
      padding-left: 40px;
      position: relative;
      // width: auto;
      width: 150px;
      input {
        width: 100%;
        border: none;
        outline: none;
        background: #fff;
        font-size: 28px;
      }
      input::-webkit-input-placeholder {
        color: #333333;
        font-size: 28px;
      }
    }
    .list-content {
      width: 100%;
      list-style: none;
      overflow: hidden;
      position: absolute;
      z-index: 1001;
      // margin-top: 11px;
      // border-top: 1px grey solid;
      .actived {
        color: red;
      }
      ul {
        z-index: 1002;
        position: relative;
        background: #ffffff;
        li {
          width: 100%;
          height: 76px;
          cursor: pointer;
          line-height: 76px;
          padding-left: 10px;
          border-bottom: solid 4px #f8f8f8;
          .li-text {
            padding-left: 40px;
          }
        }
        li:hover {
          color: #fff;
          background-color: #ff8688;
          // background-color: yellow;
        }
      }
    }
  }
  .search-content {
    flex: 8;
    /deep/ .van-cell {
      background-color: #dfdfdf;
    }
  }
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #333;
    z-index: 999;
    opacity: 0.3;
  }
}
</style>