Skip to main content

抽屉

WdDrawer

适用场景​

用于实现侧边抽屉展示效果，常用于导航菜单、详情面板、筛选器等场景。支持从页面四个方向滑出。

基础功能​

1. 打开/关闭抽屉​

  • 在抽屉的【默认打开抽屉】属性，控制首次抽屉的开关。

  • 在【事件-组件方法】中调用抽屉的打开/关闭方法，可动态控制抽屉开关。

  • 打开或关闭抽屉时，您可以配置 info 为传入的参数，传入后通过$w.drawer1.openInfo或$w.drawer1.closeInfo获取参数。其中 drawer1 是抽屉组件 ID。

示例：按钮打开抽屉​
  1. 加入按钮和抽屉组件
  1. 选中抽屉组件，设置抽屉为默认关闭，关闭抽屉属性【默认打开抽屉】
  1. 选中按钮组件，添加点击事件
  1. 选择要打开的抽屉，和执行方法。然后选中页面的组件，调用【打开抽屉 open】方法，即可实现点击按钮打开抽屉。

交互式预览​

样式 API 自定义样式​

属性说明​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
抽屉默认打开状态visibleboolean

设置默认打开状态。在【事件-组件方法】中调用抽屉的打开/关闭方法，可动态控制抽屉开关。查看指引

示例：true

抽屉方向placementstring

抽屉方向。可选项：left/right/top/bottom

示例："right"

关闭方式closeTypearray

点击键盘ESC键关闭抽屉仅在PC端生效

多选模式，outerClick-点击面板外收起面板，esc-点击键盘ESC关闭（仅在PC端生效）

示例：[ "outerClick" ]

展示遮罩maskboolean

示例：true

顶部插槽enableHeaderSlotboolean

默认值：true

内容插槽enableContentSlotboolean

默认值：true

底部插槽enableFooterSlotboolean

事件说明​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
抽屉打开时openobject
  • info:

    透传信息，在触发抽屉打开时接收该信息，信息来自于调用组件open方法的info
兼容三端

-

抽屉关闭时closeobject
  • info:

    透传信息，在触发抽屉关闭时接收该信息，信息来自于调用组件close方法的info
兼容三端

-

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
抽屉状态modalStatestring
openInfo

透传信息，在触发抽屉打开时接收的信息，信息来自于调用组件open方法的info

closeInfo

透传信息，在触发抽屉关闭时接收的信息，信息来自于调用组件close方法的info

方法 API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
打开抽屉openobject
  • info:

    透传信息，在监听到抽屉打开时会传递该信息

-

关闭抽屉closeobject
  • info:

    透传信息，在监听到抽屉关闭时会传递该信息

-

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-drawer组件根元素

      :scope.wd-drawer  {
        /* 在这里编写CSS 样式 */
      }
PC 端根元素.wd-pc-drawer组件根元素

      :scope.wd-pc-drawer  {
        /* 在这里编写CSS 样式 */
      }
H5 端根元素.wd-h5-drawer可以为 H5 端的编写样式

      :scope.wd-h5-drawer  {
        /* 在这里编写CSS 样式 */
      }
小程序 端根元素.wd-mp-drawer可以为 小程序 端的编写样式

      :scope.wd-mp-drawer  {
        /* 可以为 小程序 端的编写样式 */
      }
抽屉遮罩层样式.wd-drawer-mask可以为遮罩层编写样式

      :scope .wd-drawer-mask  {
        /* 可以为遮罩层编写样式 */
        background-color: rgba(0, 0, 0, 0.5)
      }
抽屉主体容器样式.wd-drawer-content-wrapper可以为主体容器编写样式

      :scope .wd-drawer-content-wrapper  {
        /* 可以为主体容器编写样式 */
        inset-inline-start: auto;
        inset-inline-end: 0;
      }
抽屉顶部容器样式.wd-drawer-header可以为顶部容器编写样式

      :scope .wd-drawer-header  {
        /* 可以为顶部容器编写样式*/
        padding: 0;
      }
抽屉内容容器样式.wd-drawer-body可以为内容容器编写样式

      :scope .wd-drawer-body  {
        /* 可以为内容容器编写样式 */
        padding: 0;
      }
抽屉底部容器样式.wd-drawer-footer可以为底部容器编写样式

      :scope .wd-drawer-footer  {
        /* 可以为底部容器编写样式 */
         padding: 0;
      }

了解样式 API