Basic Components

<Button @click="showModal">Open Modal</Button>
<Modal v-model="isModalOpen">
  <div class="p-6">
    <h3>Modal Title</h3>
    <p>Modal content</p>
    <Button @click="isModalOpen = false">Close</Button>
  </div>
</Modal>

<template>
  <div>
    <!-- 小尺寸模态框 -->
    <div class="mb-4">
      <Button @click="showSmallModal">Small Modal</Button>
      <Modal v-model="isSmallModalOpen">
        <div class="p-4 max-w-sm">
          <h3 class="text-lg font-medium mb-2">Small Modal Title</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-4">This is a small modal dialog content.</p>
          <div class="flex justify-end">
            <Button @click="isSmallModalOpen = false">Close</Button>
          </div>
        </div>
      </Modal>
    </div>

    <!-- 中尺寸模态框 -->
    <div class="mb-4">
      <Button @click="showMediumModal">Medium Modal</Button>
      <Modal v-model="isMediumModalOpen">
        <div class="p-6 max-w-md">
          <h3 class="text-xl font-medium mb-3">Medium Modal Title</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-4">This is a medium-sized modal with more content.</p>
          <div class="flex justify-end space-x-2">
            <Button variant="outline" @click="isMediumModalOpen = false">Cancel</Button>
            <Button @click="isMediumModalOpen = false">Confirm</Button>
          </div>
        </div>
      </Modal>
    </div>

    <!-- 大尺寸模态框 -->
    <div class="mb-4">
      <Button @click="showLargeModal">Large Modal</Button>
      <Modal v-model="isLargeModalOpen">
        <div class="p-8 max-w-2xl">
          <h3 class="text-2xl font-medium mb-4">Large Modal Title</h3>
          <div class="text-gray-600 dark:text-gray-300 mb-6">
            <p class="mb-4">This is a large modal dialog with a lot of content.</p>
            <p>You can add multiple paragraphs and more complex content here.</p>
          </div>
          <div class="flex justify-end space-x-3">
            <Button variant="outline" @click="isLargeModalOpen = false">Cancel</Button>
            <Button @click="isLargeModalOpen = false">Confirm</Button>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 控制不同尺寸模态框的显示状态
    const isSmallModalOpen = ref(false)
    const isMediumModalOpen = ref(false)
    const isLargeModalOpen = ref(false)
    
    // 显示不同尺寸的模态框
    function showSmallModal() {
      isSmallModalOpen.value = true
    }
    
    function showMediumModal() {
      isMediumModalOpen.value = true
    }
    
    function showLargeModal() {
      isLargeModalOpen.value = true
    }

    return {
      isSmallModalOpen,
      isMediumModalOpen,
      isLargeModalOpen,
      showSmallModal,
      showMediumModal,
      showLargeModal
    }
  }
}
</script>