@tanzhenxing/zx-drawer v1.0.2

zx-drawer 抽屉组件

zx-drawer 是一个从屏幕边缘滑出的抽屉面板组件，适用于临时展示表单、文档等内容。

基本用法

<template>
  <view>
    <button @click="drawer = true">打开抽屉</button>
    
    <zx-drawer v-model="drawer" title="我是标题">
      <view>抽屉内容</view>
    </zx-drawer>
  </view>
</template>

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

const drawer = ref(false);
</script>

不同方向

抽屉可以从四个方向打开：

• 从右至左（默认）：direction="rtl"
• 从左至右：direction="ltr"
• 从上至下：direction="ttb"
• 从下至上：direction="btt"

<zx-drawer v-model="drawer" title="标题" direction="ltr">
  <view>从左侧打开的抽屉</view>
</zx-drawer>

自定义大小

可以通过 size 属性控制抽屉的大小，接受数字（像素值）或字符串（百分比）。

<zx-drawer v-model="drawer" title="标题" size="50%">
  <view>占屏幕宽度50%的抽屉</view>
</zx-drawer>

自定义头部

可以通过 header 插槽自定义头部内容：

<zx-drawer v-model="drawer">
  <template #header>
    <view class="custom-header">自定义头部</view>
  </template>
  <view>抽屉内容</view>
</zx-drawer>

底部插槽

通过 footer 插槽添加底部内容：

<zx-drawer v-model="drawer" title="标题">
  <view>抽屉内容</view>
  <template #footer>
    <view class="footer-btns">
      <button @click="drawer = false">取消</button>
      <button type="primary" @click="handleConfirm">确认</button>
    </view>
  </template>
</zx-drawer>

API

Props

事件

插槽