Vue 3教程 - 创建一个Modal组件

Modal.vue

首先添加Modal.vue:

vue

<script lang="ts" setup>
const emit = defineEmits(['closeModal'])
</script>

<template>
  <div class="modal-overlay">
    <div class="modal">
      <div class="flex justify-end" @click="emit('closeModal')">
        <button class="text-3xl">X</button>
      </div>
      <slot>content</slot>
      <button class="button" @click="emit('closeModal')">Close</button>
    </div>
  </div>
</template>

<style scoped>
.modal-overlay {
  @apply fixed inset-0 flex justify-center;
  background-color: #000000da;
}

.modal {
  @apply rounded-xl p-5 text-center bg-white;
  max-width: 500px;
  max-height: 400px;
  margin-top: 10%;
}
.button {
  @apply cursor-pointer rounded w-40 h-16 mt-4 py-2 px-4 text-white text-center text-2xl;
  background-color: #660099;
}

.button:hover {
  background-color: #822eab;
}

.button:active {
  background-color: #822eab;
  border-color: #ffcc33;
}
</style>

调用Modal

通过ref属性来控制是否显示Modal：

JavaScript

const showModal = ref(false)

const clickHandler = () => {
  if (!termsAndConditionsAccepted.value) {
    showModal.value = true
  }
}

markup

<Modal v-show="showModal" @closeModal="showModal = false">
  <Carbon:warningFilled class="text-red-600 fill-red-600 text-6xl inline" />
  <h3 class="text-3xl font-bold py-3">Your text in Modal.</h3>
</Modal>