Vue.js에서 팝업 모달 상자 구성 요소를 개발하는 방법에 대한 소개-JS 튜토리얼-php.cn

Vue.js에서 팝업 모달 상자 구성 요소를 개발하는 방법에 대한 소개

黄舟

풀어 주다： 2017-07-26 16:10:39

원래의

3330명이 탐색했습니다.

이 글에서는 주로 Vue.js 팝업 모달박스 컴포넌트 개발을 위한 샘플 코드를 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라가서 함께 살펴볼까요

머리말

프로젝트를 개발하는 과정에서 팝업 상자 효과를 개발해야 하는 경우가 종종 있는데 기본 경고 및 확인 기능이 프로젝트 요구 사항을 충족하지 못하는 경우가 많습니다. . 이번에는 Vue.js를 기반으로 읽기용 WebApp을 개발할 때 프롬프트를 표시해야 하는 곳이 총 2군데 있는데 처음에는 다른 컴포넌트 라이브러리가 도입되지 않았기 때문에 이제 모달 박스 컴포넌트를 직접 작성해야 합니다. 현재는 현재 프로젝트의 요구 사항만 충족하는 초기 버전일 뿐입니다. 이 프로젝트는 비교적 단순하기 때문에 많은 확장 기능을 유지하지 않습니다. 이 구성 요소에는 여전히 확장할 여지가 많으며 더 많은 사용자 정의 콘텐츠와 스타일을 추가할 수 있습니다. 여기에서는 모달 박스 컴포넌트를 개발하는 방법만 소개합니다. 더 많은 확장이 필요한 경우 필요에 따라 직접 개발할 수 있습니다.

구성 요소 템플릿

<template>
<p class="dialog">
 <p class="mask"></p>
 <p class="dialog-content">
  <h3 class="title">{{ modal.title }}</h3>
  <p class="text">{{ modal.text }}</p>
  <p class="btn-group">
   <p class="btn" @click="cancel">{{ modal.cancelButtonText }}</p>
   <p class="btn" @click="submit">{{ modal.confirmButtonText }}</p>
  </p>
 </p>
</p>
</template>

로그인 후 복사

모달 상자 구조는 헤더 제목, 프롬프트 내용 및 작업 영역으로 구분됩니다. 동시에 일반적으로 마스크 레이어가 있습니다. 이번에는 요구사항이 비교적 간단하고, 아이콘이나 기타 콘텐츠가 필요하지 않아 구조가 비교적 간단합니다. 실제 개발에서는 필요에 따라 구조를 조정할 수 있습니다.

컴포넌트 스타일

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

로그인 후 복사

스타일이 상대적으로 간단해서 자세히 설명하지 않겠습니다.

Component 인터페이스

export default {
 name: &#39;dialog&#39;,
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: &#39;&#39;,
   reject: &#39;&#39;,
   promise: &#39;&#39;, // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || &#39;提示&#39;,
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : &#39;取消&#39;,
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : &#39;确定&#39;,
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve(&#39;submit&#39;);
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject(&#39;cancel&#39;);
  },
  //显示confirm弹出,并创建promise对象，给父组件调用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise对象,给父级组件调用
  }
 }

}

로그인 후 복사

는 모달 상자 구성 요소에 세 가지 메서드를 정의합니다. 이 메서드는 Promise 개체를 호출하고 반환하기 위해 상위 구성 요소에 제공됩니다. Promise 객체를 사용하는 주요 목적은 비동기 호출을 위한 것입니다. 왜냐하면 모달 상자를 사용할 때 반환된 결과에 따라 다음 단계를 진행해야 하는 경우가 많기 때문입니다.

확장 팁:

확장해야 하는 경우 props의 대화 옵션을 통해 더 많은 필드를 전달하고 계산에서 판단할 수 있습니다. 예를 들어 isShowCancelButton 필드를 추가하면 취소 버튼 표시 여부를 제어할 수 있습니다. 다른 확장 프로그램도 마찬가지입니다.

Call

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
})

로그인 후 복사

소스 코드 주소

Dialog 구성 요소 소스 코드

효과 달성