<partition-container />

Controller：PartitionController 查看>

基本介绍

<partition-container /> 是通用分屏容器组件，一般用于容纳存在分配的页面。

如何使用

<partition-container options="options">
  <!--  内容  -->
</partition-container>

参数

1. options： 定义获取配置项，一般挂载在页面options上。

options

options.getPartitionConfig 是可选参数，返回的内容与默认参数进行合并：

export default {
  // 用于获取 partition-container 的默认配置
  getPartitionConfig () {
      return {
        scope: 'global', // 配置项单例作用域
        mode: 'bottom', // 分配模式，bottom（默认）/right
        isStatic: false, // 分配模式不可变更
        fullSize: false, // 是否全屏
        height: 25, // 高度比例（默认25vh）
        rightModeStaticWidth: null // 右侧滑窗固定宽度
      }
  },
}

触发分屏

在组件内部触发 push-side HTML事件，添加一个分屏组件。

可参考 NextCollectionController.getSideItem 。

event.detail 参数

• type (String)： 数据类型。
  组件内部已定义一些通用类型（物料型号、品牌等）。

• from (String)： 来源页面。

• id (*)： 数据的id。

• data (*)： 数据内容。
  from/id/data将通过props传给组件。

• component (Component)： 需要渲染的组件。
  当type=default时必须提供。

• menus (Array)： 数据菜单。

• onMenuClick (Function)： 按钮点击回调函数。
  menus/onMenuClick将组装成 builder 工具条传给组件。

• onVisible (Function)： 显示时回调函数。

• onHidden (Function)： 隐藏时回调函数。
  组件显示/隐藏时回调函数。

举个栗子

推入一个分屏组件

tools.dispatchHTMLEvent('push-side', this.$el, {
  id,
  data,
  menus,
  type: 'default',
  from: router.currentRoute.name,
  component: tools.unobservable(component),
  onMenuClick: (menu) => {
    this.onMenuClick(menu, [data])
  },
  onVisible: () => {
      // 显示回调
  },
  onHidden: () => {
      // 隐藏回调
  }
})