下拉表搜索

<template>
  <div class="pageContainer">
    <div class="mask" v-show="isDropdownVisible"></div>
    <div class="dropdown">
      <div class="inputContainer">
        <input type="text" class="inputItem" v-model="inputValue" />
        <div
          class="selBtn"
          @click="showDropdown"
          :class="isDropdownVisible ? 'visibleText' : ''"
        >
          筛选
        </div>
      </div>

      <ul class="dropdown-menu" ref="ulDom">
        <li
          v-for="item in dropdownItems"
          :key="item.id"
          @click="selectItem(item)"
        >
          <div class="dropdownContener">
            <div class="selectItemTitle">类型</div>
            <div class="selectItem">
              <div class="itemBtn">起期单</div>
              <div class="itemBtn">二次缴费期</div>
            </div>
            <div class="selectItemTitle">审核状态</div>
            <div class="selectItem">
              <div class="itemBtn">审核中</div>
              <div class="itemBtn">不通过</div>
            </div>
            <div class="footer">
              <div class="itemResetBtn">重置</div>
              <div class="itemComfirmBtn">确认</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  data() {
    return {
      inputValue: "",
      isDropdownVisible: false,
      dropdownItems: [{ id: 1, name: "Item 1" }],
    };
  },
  methods: {
    showDropdown() {
      this.isDropdownVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs.ulDom);
        this.$refs.ulDom.style.height = "250px";
      });
    },
    selectItem(item) {
      this.inputValue = item.name;
      this.$nextTick(() => {
        console.log(this.$refs.ulDom);
        this.$refs.ulDom.style.height = "0px";
        this.$refs.ulDom.style.transition = "height 0.1s ease;";
        this.isDropdownVisible = false;
      });
      // this.isDropdownVisible = false;
    },
  },
};
</script>

<style scoped>
.pageContainer {
  width: 100%;
  height: 100vh;
  position: relative;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(101, 10, 10, 0.4);
}
.pageContainer {
  width: 100%;
  height: 100vh;
  /* background: #ccc; */
}
.dropdown {
  position: relative;
  width: 100%;
  /* background: #ccc; */
}
.inputContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.inputItem {
  width: 86%;
}
.selBtn {
  flex: 1;
}

.dropdown-menu {
  position: absolute;
  width: 100%;
  /* height: 250px; */
  box-sizing: border-box;
  top: 100%;
  left: 0;
  display: block;
  background-color: #fff;
  padding: 0.5rem;
  /* border-bottom: 1px solid #ccc; */
  list-style: none;
  margin: 0;
  padding: 0;
  height: 0;
  transition: height 0.5s ease;
  overflow: hidden;
}
.visibleText {
  color: aqua;
}

.dropdownContener {
  text-align: left;
  padding: 0;
}
.selectItem {
  display: flex;
}
.selectItemTitle {
  padding: 16px 0;
}
.itemBtn {
  margin-right: 20px;
}
.footer {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.itemResetBtn {
}
</style>