Modal 模态框

模态框组件

含javascript

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

查看代码

<script setup>
import { ref } from 'vue'

const showModal = ref(false)

function handleOpenModal() {
  showModal.value = true
}

function handleCloseModal() {
  showModal.value = false
}
</script>

<template>
  <!-- 基础模态框 -->
  <button class="rounded-sm bg-primary px-4 py-2 text-white hover:bg-blue-600"
    @click="handleOpenModal">
    打开基础模态框
  </button>

  <div v-if="showModal"
    class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
    @click="handleCloseModal">
    <div class="w-[480px] rounded-lg bg-white py-6 shadow-sm [animation:modal-show_0.3s_ease_forwards]">
      <div class="mb-4 flex items-center justify-between px-6">
        <h3 class="text-xl font-semibold">
          基础模态框
        </h3>
        <button class="text-gray-500 hover:text-gray-700"
          @click="handleCloseModal">
          <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="mb-4 px-6">
        这是一个基础的模态框示例，点击外部或关闭按钮可以关闭。
      </div>
      <div class="flex justify-end gap-2 px-6">
        <button class="rounded-sm border px-4 py-2 hover:bg-gray-100"
          @click="handleCloseModal">
          取消
        </button>
        <button class="rounded-sm bg-primary px-4 py-2 text-white hover:bg-blue-600"
          @click="handleCloseModal">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<style>
@keyframes modal-show {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

CSS 类用法

使用预定义的CSS类。复制index.css的样式即可使用

查看代码

html

<script setup>
import { ref } from 'vue'

const showModal = ref(false)

function handleOpenModal() {
  showModal.value = true
}

function handleCloseModal() {
  showModal.value = false
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- 基础模态框 -->
    <div>
      <button class="rounded-sm bg-primary px-4 py-2 text-white hover:bg-blue-600"
        @click="handleOpenModal">
        打开基础模态框
      </button>

      <div v-if="showModal" class="modal-overlay" @click="handleCloseModal">
        <div class="modal-container">
          <div class="modal-header">
            <h3>基础模态框</h3>
            <button class="modal-close" @click="handleCloseModal">
              <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div class="modal-content">
            这是一个使用CSS类构建的模态框示例。
          </div>
          <div class="modal-footer">
            <button class="modal-btn-secondary" @click="handleCloseModal">
              取消
            </button>
            <button class="modal-btn-primary" @click="handleCloseModal">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
@import './index.css';
</style>

index.css

.modal-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-[9999];
}

@keyframes modal-show {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-container {
  @apply bg-white rounded-lg w-[480px] py-6 shadow-sm [animation:modal-show_0.3s_ease_forwards];
}

.modal-header {
  @apply flex justify-between items-center mb-4 px-6;

  h3 {
    @apply text-xl font-semibold;
  }
}

.modal-close {
  @apply text-gray-500 hover:text-gray-700;
}

.modal-content {
  @apply mb-4 px-6;
}

.modal-footer {
  @apply flex justify-end gap-2 px-6;
}

.modal-btn-primary {
  @apply px-4 py-2 bg-primary text-white rounded-sm hover:bg-blue-600;
}

.modal-btn-secondary {
  @apply px-4 py-2 border rounded-sm hover:bg-gray-100;
}