Drawer 抽屉

抽屉组件

含javascript

行内 Tailwind/UnoCSS 用法

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

查看代码

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

const showDrawer = ref(false)

function handleOpenDrawer() {
  showDrawer.value = true
}

function handleCloseDrawer() {
  showDrawer.value = false
}
</script>

<template>
  <button class="rounded-sm bg-green-500 px-4 py-2 text-white hover:bg-green-600"
    @click="handleOpenDrawer">
    打开抽屉
  </button>

  <!-- 抽屉 -->
  <div v-if="showDrawer"
    class="fixed inset-0 z-[9999] bg-black/50"
    @click="handleCloseDrawer">
    <div class="fixed right-0 top-0 h-full w-[480px] animate-[slideIn_0.3s_ease-out] bg-white py-6">
      <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="handleCloseDrawer">
          <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>
  </div>
</template>

<style>
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>

CSS 类用法

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

查看代码

html

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

const showDrawer = ref(false)

function handleOpenDrawer() {
  showDrawer.value = true
}

function handleCloseDrawer() {
  showDrawer.value = false
}
</script>

<template>
  <button class="rounded-sm bg-green-500 px-4 py-2 text-white hover:bg-green-600"
    @click="handleOpenDrawer">
    打开抽屉
  </button>

  <!-- 抽屉 -->
  <div v-if="showDrawer" class="drawer-overlay" @click="handleCloseDrawer">
    <div class="drawer-container">
      <div class="drawer-header">
        <h3>抽屉</h3>
        <button class="drawer-close" @click="handleCloseDrawer">
          <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="drawer-content">
        这是一个从抽屉示例。
      </div>
    </div>
  </div>
</template>

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

index.css

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

.drawer-container {
  @apply fixed right-0 top-0 h-full w-[480px] py-6 bg-white;
  animation: slideIn 0.3s ease-out;
}

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

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

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

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

.drawer-footer {
  @apply flex justify-end gap-2;
}

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

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

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}