ui-drawer-h 横向抽屉组件

版本：v2.3.11

横向抽屉组件，支持从左、右、上、下四个方向滑出的抽屉面板

基本使用

<template>
  <view class="drawer-h-demo">
    <ui-button type="primary" @click="openDrawer">打开左侧抽屉</ui-button>
    <ui-drawer-h ref="drawer" mode="left" width="70%">
      <view class="drawer-content">
        <view class="ui-title">抽屉内容</view>
        <view class="padding-10">这是抽屉的内容区域</view>
        <ui-button type="default" @click="closeDrawer">关闭抽屉</ui-button>
      </view>
    </ui-drawer-h>
  </view>
</template>

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

const drawer = ref(null)

const openDrawer = () => {
  drawer.value.open()
}

const closeDrawer = () => {
  drawer.value.close()
}
</script>

<style scoped>
.drawer-h-demo {
  padding: 20px;
}

.drawer-content {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
mode	String	'left'	显示模式，可选值：top、left、right、bottom
bgColor	String	'#ffffff'	抽屉背景颜色
maskClick	Boolean	true	遮罩是否可点击关闭
mask	Boolean	true	是否显示蒙层
width	String	'100%'	抽屉宽度（左右模式时有效）
height	String	'100%'	抽屉高度（上下模式时有效）
zIndex	Number	999	显示层级

Events

事件名	说明	回调参数
open	抽屉打开时触发	-
close	抽屉关闭时触发	-

Slots

名称	说明
default	抽屉内容

方法

方法名	说明
open	打开抽屉
close	关闭抽屉

示例

不同方向的抽屉

<template>
  <view class="drawer-h-demo">
    <ui-button type="primary" @click="openLeft">左侧抽屉</ui-button>
    <ui-button type="success" @click="openRight">右侧抽屉</ui-button>
    <ui-button type="warning" @click="openTop">顶部抽屉</ui-button>
    <ui-button type="danger" @click="openBottom">底部抽屉</ui-button>
    
    <ui-drawer-h ref="drawerLeft" mode="left" width="70%">
      <view class="drawer-content">左侧抽屉内容</view>
    </ui-drawer-h>
    
    <ui-drawer-h ref="drawerRight" mode="right" width="70%">
      <view class="drawer-content">右侧抽屉内容</view>
    </ui-drawer-h>
    
    <ui-drawer-h ref="drawerTop" mode="top" height="50%">
      <view class="drawer-content">顶部抽屉内容</view>
    </ui-drawer-h>
    
    <ui-drawer-h ref="drawerBottom" mode="bottom" height="50%">
      <view class="drawer-content">底部抽屉内容</view>
    </ui-drawer-h>
  </view>
</template>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. mode 参数只在组件初始化时生效，运行时修改无效
2. 左右模式使用 width 控制宽度，上下模式使用 height 控制高度
3. 通过 ref 调用 open() 和 close() 方法来控制抽屉的显示和隐藏
4. maskClick 为 true 时，点击遮罩层会自动关闭抽屉

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/drawer/drawer