VantUI 팝 업 창 이 꺼 지지 않 거나 겹 치지 않 는 문 제 를 해결 합 니 다.

배경
\#\#\#\#구성 요소 PopupTime.vue
vant 홈 페이지 의 popup+시간 선택 기 를 구성 요소 로 추출 합 니 다:
popup1show:true 즉 팝 업 창 표시

<template>
 <div class="PopupTime">
  <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOverlay">
   <van-datetime-picker show-toolbar
         :title="popupTitle.popupName"
         v-model="currentDate"
         type="datetime"
         @cancel="onCancel" @confirm="onConfirm" class="font14"/>
  </van-popup>
 </div>
</template>

<script type="text/ecmascript-6">

 export default {
  props:{
   popupTitle:Object,
  },


  data() {
   return {
    popup1show: true,
    currentDate: new Date(),
   };
  },
 methods：{
 clickOverlay() {
 this.onCancel();
 },
 onCancel() {},
 onConfirm(value, index) {},
 }
 </script>

test.vue 에서 이 구성 요 소 를 호출 합 니 다.

 <popup-time 
 v-show="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime  ，  components   

별 문제 가 없 는 것 처럼 보 였 으 나 isShowdlay 가 rue 일 때 팝 업 창 은 몽 층 이 없 는 것 으로 나 타 났 고 두 번 째 클릭 으로 는 켜 지지 않 았 다.
문제 해결
vant 의 문제 인 줄 알 고 한참 을 찾 았 는데 v-show 의 문제 로 v-if 로 바 꾸 면 문제 가 없습니다.

 <popup-time 
 v-if="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime  ，  components   

기괴 한 질문,홈 페이지 에 가서 한 번 보 세 요:
v-if vs v-show
v-if 는'진짜'조건 렌 더 링 입 니 다.전환 과정 에서 조건 블록 안의 이벤트 모니터 와 하위 구성 요소 가 적당 하 게 소각 되 고 재 구축 되 는 것 을 확보 하기 때 문 입 니 다.
v-if 도 타성 이다.초기 렌 더 링 시 조건 이 가짜 라면 아무것도 하지 않 는 다―조건 이 처음으로 진짜 로 변 할 때 까지 조건 블록 을 렌 더 링 하기 시작한다.
이에 비해 v-show 는 훨씬 간단 합 니 다.초기 조건 이 무엇이든 요 소 는 항상 렌 더 링 되 고 DOM 에 보 존 됩 니 다.v-show 요 소 를 간단하게 전환 하 는 CSS 속성 display
일반적으로 v-if 는 더 높 은 전환 비용 이 있 고 v-show 는 더 높 은 초기 렌 더 링 비용 이 있 습 니 다.따라서 매우 빈번 한 전환 이 필요 하 다 면 v-show 를 사용 하 는 것 이 좋 습 니 다.실행 할 때 조건 이 바 뀌 지 않 으 면 v-if 를 사용 하 는 것 이 좋 습 니 다.
응...아니면 이 문제 가 어떻게 발생 했 는 지 모 르 겠 습 니까?
보충 지식:vant-----Picker 와 Popup 선택 기와 마스크 의 완벽 한 결합
초보 자 들 은 이런 문제 에 부 딪 힌 적 이 있 을 것 이다.아래 를 쓰 고 싶 고,또 마스크 를 쓰 고 싶다.두 개 를 합 쳐 쓰 고 커버 높이:100%,width:100%,z-index:999 등 을 써 서 정 하 세 요.
번 거 롭 고 번 거 로 운 체험 감 이 꼭 있 는 것 은 아니다.
vant 의 picker 와 popup 을 집합 하여 편리 하고 실 용적 입 니 다.
1.main.js 에 도입

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant'; 
Vue.use(Picker);

2.

<van-popup v-model="show" position="bottom" :overlay="true">
 <van-picker show-toolbar title="         " :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
</van-popup>

position:top or bottom or center 를 스스로 정의 할 수 있 습 니 다.물론 보통 bottom 입 니 다.
:overlay:false or true 개인 적 인 요구 사항 보기
title:당신 의 요구 에 따라 정의
js:

효과 그림:

이상 의 열 자 는 모두 소생 이 스스로 실천 하 는 것 이 니 여러분 께 참고 가 되 기 를 바 랍 니 다.여러분 들 도 우 리 를 많이 지지 해 주시 기 바 랍 니 다.