vant area组件简单修改

Posted 2020-12-12 shiazhen

可能需要的数据 省市数据

html

 <div class="area-box" :class="showArea?‘show‘:‘‘">
      <div class="area-box-sub" :class="showArea?‘show‘:‘‘">
        <van-area title="标题" :area-list="areaList" value="110101" @confirm="confirm" @cancel="cancle" />
      </div>
    </div>

style

.area-box {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  top: 0;
  height: 100vh;
  /* height: 100vh; */
  overflow: hidden;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease-in;
  visibility: hidden;
  opacity: 0;
  /* ops */
}



.area-box.show {
  visibility: visible;
  opacity: 1;
}

.area-box-sub {
  transform: translate(0, 100%);
  transition: transform 0.2s ease-in;
}



.area-box-sub.show {
  transform: translate(0, 0);
}