Drawer 抽屉

---

抽屉菜单

使用指南

在 Taro 文件中引入组件

import { AtDrawer } from 'taro-ui'

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

@import '~taro-ui/dist/style/components/drawer.scss';
@import '~taro-ui/dist/style/components/list.scss';

用法

<AtDrawer
  show={this.state.show}
  mask
  onClose={this.onClose.bind(this)}
  items={['菜单1', '菜单2']}
></AtDrawer>

右边弹出

<AtDrawer
  show={this.state.show}
  right
  mask
  onClose={this.onClose.bind(this)}
  items={['菜单1', '菜单2']}
></AtDrawer>

自定义内容

<AtDrawer show="{this.state.show}" mask>
  <View className="drawer-item">优先展示items里的数据</View>
  <View className="drawer-item">如果items没有数据就会展示children</View>
  <View className="drawer-item"
    >这是自定义内容 <AtIcon value="home" size="20"
  /></View>
  <View className="drawer-item">这是自定义内容</View>
</AtDrawer>

Drawer 参数

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

Drawer 事件

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