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

爱被打了一巴掌 2022-12-20 02:58 294阅读 0赞

### 手机端制作： ###

首先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);
          }
        }
      },