用Vue手写mobile和PC端的下拉框

手机端制作：

首先div制作一个蒙层和模板，利用showTeam状态切换显示和隐藏。

<div @click="openSelectModal">我是选择栏</div>
<div class="select-bg" v-if="showTeam" @click="closeModal"></div>
	<div class="select-modal" v-if="showTeam">
	 <div class="title">请选择xxxx</div>
	  <div class="item" v-show="showTeam" v-for="item in workList" :key="item.id">
	    <p>{{item.title}}</p>
	    <div class="img-box">
	      <img v-if="false" src="../../static/images/duigou.png" alt="" />
	      <img src="../../static/images/weixuan.png" alt="" />
	    </div>
	  </div>
	 <div class="btn">确定</div>
</div>

此处是较为好看的模板css，需要注意的是给模板加固定定位，给蒙层加绝对定位：

.select-bg {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.select-modal {
  width: 100%;
  position: fixed;
  bottom: -90px;
  left: 0;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;

  .title {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    font-weight: 500;
    color: #999999;
    text-align: center;
    border-bottom: 1px solid #EEEEEE;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #EEEEEE;
    margin-bottom: 1px;

    p {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
    }

    .img-box {
      width: 20px;
      height: 20px;
    }
  }

最后虽然也是最初应该写的JS控制状态：

 data() {
    return {
      showTeam: false,
      workList: [
        {
          id: 1,
          title: "dada~",
        },
        {
          id: 2,
          title: "wawa`",
        },
        {
          id: 3,
          title: "qaqa、",
        },
      ],
    };
  },
  methods: {
    openSelectModal(type) {
      this.showTeam= true;
    },
    closeModal(type) {
      this.showTeam = false;
    },
  },

PC端制作：

首先制作一个绝对定位的下拉框，用showIndustry状态切换显示隐藏。

<div class="select-box one" @mouseleave="onMouseLeave('industry')">
	 <img
	   v-if="showIndustry"
	   src="../../static/images/team/xiangshang.png"
	 />
	 <img v-else src="../../static/images/team/xiangxia.png" />
	 <div class="select" @click="openSelectItem('industry')">
	   {{ !formData.industry? "请选择xxxx" : formData.industry }}
	 </div>
	 <transition name="select-down" v-if="showIndustry">
	   <div class="select-option">
	     <div
	       class="select-item"
	       :class="{ active: false }"
	       @click="getSelectItem('industry', item)"
	       v-for="item in industryList"
	       :key="item.id"
	     >
	       {{ item.title }}
	     </div>
	   </div>
	</transition>
</div>

接下来还是漂亮css，赞美设计~

.select {
  margin: 0 40px 24px 0;
  box-sizing: border-box;
  padding-left: 40px;
  width: 360px;
  height: 54px;
  background: #FFFFFF;
  box-shadow: 0px 5px 20px 5px rgba(185, 185, 185, 0.2);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  border: 0;
  line-height: 54px;
}

.select-box {
  position: relative;

  img {
    position: absolute;
    right: 80px;
    top: 28px;
  }
}

.select-box.one {
  z-index: 6; //当存在多个下拉框时，相对定位会遮住上面的绝对定位，因此设置z-index。
}

.select-option {
  position: absolute;
  top: 58px;
  left: 0;
  box-shadow: 0px 3px 17px 3px rgba(185, 185, 185, 0.15);
  border-radius: 4px;
  background: #fff;
}

.select-item {
  line-height: 54px;
  padding-left: 40px;
  box-sizing: border-box;
  width: 360px;
  height: 54px;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  z-index: 3;
}

.select-item:hover {
  background: rgba(255, 192, 0, 0.1);
}

.select-item.active {
  background: #FFC000;
}

JS控制状态：

data() {
    return {
      showIndustry: false,
      showWork: false,
      workList: [
        {
          id: 1,
          title: "xx",
        },
        {
          id: 2,
          title: "aa",
        },
        {
          id: 3,
          title: "nn",
        },
      ],
      formData: {},
    };
  },
  methods: {
    openSelectItem(type) {
      if (type == "industry") {
        this.showIndustry = true;
      } else if (type == "work") {
        this.showWork = true;
      }
    },
    getSelectItem(type, item) {
      if (type == "industry") {
        this.showIndustry = false;
        this.$set(this.formData, "industry", item.title); //$set动态修改数组/对象
      } else if (type == "work") {
        this.showWork = false;
        this.$set(this.formData, "intention", item.title);
      }
    },
    onMouseLeave(type) {
      if (type == "industry") {
        this.showIndustry = false;
      } else if (type == "work") {
        this.showWork = false;
      }
    },
    getInputValue(type, e) { //iput输入框的数据采集，与下拉框无关。
      if (type != "") {
        this.$set(this.formData, type, e.target.value);
      }
    }
  },