Vue에서 팝업 레이어와 모달 상자를 구현하는 방법은 무엇입니까?

Vue는 단일 페이지 애플리케이션(SPA) 인터페이스 및 사용자 상호 작용을 구축하기 위한 다양한 편리한 도구와 구성 요소를 제공하는 JavaScript 기반 프런트 엔드 프레임워크입니다. 그 중 팝업 레이어(modal)와 모달 박스(popover)는 일반적인 UI 컴포넌트로, Vue에서도 쉽게 구현할 수 있습니다. 이 글에서는 Vue에서 팝업 레이어와 모달 상자를 구현하는 방법을 소개합니다.

1. 팝업 레이어

팝업 레이어는 일반적으로 메시지 표시, 메뉴 또는 조작 패널 표시에 사용되며 일반적으로 전체 페이지 또는 영역의 일부를 덮어야 합니다. Vue에서 팝업 레이어를 구현하려면 동적 구성 요소와 슬롯을 사용해야 합니다.

1. 팝업 레이어 구성 요소 만들기

먼저 팝업 레이어 구성 요소를 만들어야 합니다. 여기서는 Modal이라는 팝업 레이어 구성 요소를 만들고 표시해야 하는 콘텐츠를 동적으로 로드하기 위한 슬롯을 포함합니다.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

위 코드에서는 먼저 Modal이라는 구성 요소를 정의하고 팝업 레이어 표시 여부를 제어하는 ​​데 사용되는 show라는 props를 전달합니다. 구성 요소 템플릿에서는 동적 슬롯을 사용하여 팝업 레이어에 표시해야 하는 콘텐츠를 표시합니다. 그런 다음 팝업 레이어를 중앙에 배치하도록 일부 스타일을 설정하고 반투명 배경색을 추가했습니다.

2. 팝업 레이어를 표시해야 하는 컴포넌트에 Modal 컴포넌트를 사용하세요

다음으로 팝업 레이어를 표시해야 하는 컴포넌트에 Modal 컴포넌트를 사용해야 합니다. 여기서는 App이라는 루트 구성 요소를 만들고 해당 구성 요소에 팝업 레이어 표시를 트리거하는 버튼을 추가합니다.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

위 코드에서는 먼저 이전에 정의된 Modal 구성 요소를 가져오고 구성 요소 템플릿에 버튼을 추가하여 팝업 레이어 표시를 트리거했습니다. 그런 다음 v-bind 지시어를 사용하여 showModal 속성을 Modal 구성 요소의 show 속성에 바인딩합니다. 마지막으로 팝업 레이어에 표시해야 하는 콘텐츠를 Modal 구성 요소의 슬롯에 배치합니다.

2. 모달 상자

모달 상자는 일반적으로 사용자가 작업을 수행하기 전에 다른 작업을 수행하지 못하도록 확인하거나 선택하라는 메시지를 표시하는 데 사용됩니다. 팝업 레이어와 마찬가지로 Vue에서 모달 상자를 구현하려면 동적 구성 요소와 슬롯도 필요합니다.

1. 모달 구성 요소 만들기

먼저 모달 구성 요소를 만들어야 합니다. 여기서는 확인이라는 모달 구성 요소를 만들고 두 개의 슬롯을 포함합니다. 하나는 프롬프트 정보를 표시하기 위한 것이고 다른 하나는 확인 및 취소 버튼을 표시하기 위한 것입니다.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

위의 코드에서는 확인이라는 모달 상자 구성 요소를 만들고 모달 상자 표시 여부를 제어하고 작업을 취소하고 작동을 확인하는 데 사용되는 show, onCancel 및 onConfirm이라는 속성을 전달했습니다. 구성 요소 템플릿에서는 두 개의 슬롯을 사용합니다. 하나는 프롬프트 정보 표시용이고 다른 하나는 확인 및 취소 버튼 표시용입니다. 메서드에서는 취소 및 확인 작업을 처리하기 위한 취소 및 확인 메서드를 정의하고 이러한 메서드에서 상위 구성 요소가 전달한 콜백 함수를 트리거합니다.

2. 모달 상자를 표시해야 하는 컴포넌트에서 확인 컴포넌트를 사용하세요

다음으로 모달 상자를 표시해야 하는 컴포넌트에서 확인 컴포넌트를 사용해야 합니다. 여기서는 App이라는 루트 구성 요소를 만들고 구성 요소에 버튼을 추가하여 확인 구성 요소를 트리거하여 모달 상자를 표시합니다.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

위 코드에서는 확인 구성 요소를 모달 상자 구성 요소로 사용하고 showModal 속성, 취소 메서드 및 확인 메서드를 확인 구성 요소의 속성에 바인딩합니다. 확인 구성 요소의 슬롯에는 표시할 프롬프트 정보가 표시됩니다. Vue 템플릿에서는 v-slot 지시문을 사용하여 확인 구성 요소에 사용되는 슬롯과 슬롯 이름(본문)을 정의합니다. 상위 구성 요소에서는 취소 및 확인 작업을 처리하기 위한 취소 메서드와 확인 메서드를 정의하고 확인 작업 중에 삭제가 성공했다는 메시지를 사용자에게 표시합니다.

Summary

Vue에서 팝업 레이어와 모달 상자를 구현하려면 동적 구성 요소와 슬롯을 사용해야 합니다. 구성 요소를 팝업 레이어나 모달 상자로 사용하면 이러한 공통 UI 구성 요소를 쉽게 구현할 수 있습니다. 동시에 콜백 함수를 하위 구성 요소에 전달하면 하위 구성 요소에서 사용자 작업을 쉽게 처리하고 결과를 상위 구성 요소에 다시 공급할 수 있습니다.

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