Vue에서 대화 상자 팝업 상자를 구현하는 방법

이제 Vue에서 간단한 팝업 대화 상자를 구현하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

효과는 다음과 같습니다. 대화 상자의 콘텐츠가 저절로 추가됩니다.

<template>
 <p>
 <p class="dialog-wrap">
  <p class="dialog-cover" v-if="isShow" @click="closeMyself"></p>
  <transition name="drop">
  <p class="dialog-content" v-if="isShow">
   <p class="dialog-close" @click="closeMyself">x</p>
   <slot>empty</slot>
  </p>
  </transition>
 </p>
 </p>
</template>

상위 구성 요소에서 isShow 매개 변수를 수신하고 닫을 때 맞춤 이벤트를 반환합니다.

<script>
 export default {
 props: {
  isShow: {
  type: Boolean,
  default: false
  }
 },
 data () {
  return {
  }
 },
 methods: {
  closeMyself () {
  this.$emit(&#39;on-close&#39;)
  }
 }
 }
</script>

<style scoped>
 .drop-enter-active {
 transition: all .5s ease;
 }
 .drop-leave-active {
 transition: all .3s ease;
 }
 .drop-enter {
 transform: translateY(-500px);
 }
 .drop-leave-active {
 transform: translateY(-500px);
 }
 .dialog-wrap {
 position: fixed;
 width: 100%;
 height: 100%;
 }
 .dialog-cover {
 background: #000;
 opacity: .3;
 position: fixed;
 z-index: 5;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 .dialog-content {
 width: 50%;
 position: fixed;
 max-height: 50%;
 overflow: auto;
 background: #fff;
 top: 20%;
 left: 50%;
 margin-left: -25%;
 z-index: 10;
 border: 2px solid #464068;
 padding: 2%;
 line-height: 1.6;
 }
 .dialog-close {
 position: absolute;
 right: 5px;
 top: 5px;
 width: 20px;
 height: 20px;
 text-align: center;
 cursor: pointer;
 }
 .dialog-close:hover {
 color: #4fc08d;
 }
</style>

위는 제가 컴파일한 것입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.

관련 기사:

Javascript에서 프로토타입과 __proto__ 사이의 관계에 대한 자세한 설명

Node.JS는 비어 있지 않은 폴더와 하위 디렉터리의 모든 파일을 삭제하고

document.write 및 js의 문서를 삭제합니다. writeln

의 차이점

위 내용은 Vue에서 대화 상자 팝업 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!