qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Drawer 抽屉

抽屉菜单

使用指南

在 Taro 文件中引入组件

import { AtDrawer } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/drawer.scss";

用法

<AtDrawer 
  :show="show" 
  mask 
  @close="onClose" 
  :items="['菜单1', '菜单2']"
></AtDrawer>

右边弹出

<AtDrawer 
  :show="show" 
  right 
  mask 
  @close="onClose"
  :items="['菜单1', '菜单2']"
></AtDrawer>

自定义内容

<AtDrawer
  :show="show"
  mask
>
  <view class='drawer-item'>优先展示items里的数据</view>
  <view class='drawer-item'>如果items没有数据就会展示children</view>
  <view class='drawer-item'>这是自定义内容 <AtIcon value='home' size='20' /></view>
  <view class='drawer-item'>这是自定义内容</view>
</AtDrawer>

Drawer 参数

参数说明类型可选值默认值
show展示或隐藏Boolean-false
mask是否需要遮罩Boolean-true
width抽屉宽度String合法的 CSS 宽度单位230px
right是否从右侧滑出Boolean-false
items菜单列表Array--

Drawer 事件

事件名称说明返回参数
onItemClick点击菜单时触发index（菜单序号）
onClose动画结束组件关闭的时候触发-