<next-side-viewer />

Controller：NextSideController

基本介绍

<next-side-viewer /> 是通用详情视图组件，一般用于定义详情视图页面。

组件一般嵌入在 <next-side-viewer /> 中使用。

如何使用

<next-side-viewer :options="options" />

参数

1. options： 是详情视图的选项参数。

options

options 是组织详情视图的选项参数，必填。以下是 options 的默认参数值：

export default {
  // 用于获取基础配置信息
  getBaseConfig () {
    return {
      // options 作用域，用于记录详情chunk打开记录
      scope: '',
      // 列表头部 icon
      icon: 'ni-menuicon-default',
      // 列表头部 title
      title: '',
      // 头部 information 的数据来源
      informationBy: 'props.data'
    }
  },
  // 用于获取统一的props
  getUnifyProps: null,
  // 获取初始化数据
  getContentData: () => null,
  // 获取页面顶部信息
  getHeaderRows: () => []
}

options配置

在 NextBodyController 控制器中，会将默认options与外部传入的 options 进行合并。

getBaseConfig

该执行函数用于获取基础配置信息。默认值：

// 用于获取基础配置信息
function getBaseConfig () {
  return {
    // options 作用域，保留字段
    scope: '',
    // 列表头部 icon
    icon: 'ni-menuicon-default',
    // 列表头部 title
    title: '',
    // 头部 information 的数据来源
    informationBy: 'props.data'
  }
}

getUnifyProps

在 <next-side-viewer /> 中，默认会取出来自 <partition-container /> 的详情参数作为 props。

该执行函数用于获取统一的props。抹平由于不同入口导致的参数差异。

在任意事件中均可使用 nvt.props 获取当前函数的返回值。

function getUnifyProps (nvt) {
    return null
}

getContentData

该执行函数用于获取页面渲染需要的数据。

function getContentData (nvt) {
  return {
    // 数据
  }
}

getHeaderRows

该执行函数用于获取页面顶部信息。

function getHeaderRows (nvt) {
  return []
}

如何实现

props

任意选项回调中，均可使用 nvt.props 获取 props。

init

NextCollectionController 使用 init 单例函数进行初始化。

单例函数

因为是单例函数，所以可以直接调用函数检测等待初始化完毕。

// 初始化完毕后执行
await controller.init()

执行顺序

init 内部的执行内容/顺序如下：

// 初始化 Actuator
await this._initActuator()

// 初始化props
// 【hook】 getUnifyProps
await this._initProps()

// 初始化config
// 【hook】 getBaseConfig
await this._initConfig()

getContentData

NextCollectionController 使用 getContentData 单例函数获取页面渲染需要的数据。

任意选项回调中，均可使用 nvt.getContentData 获取页面渲染数据。

单例函数

因为是单例函数，所以可以直接调用函数检测等待页面渲染数据加载完毕。

// 渲染数据加载完毕后执行
const state = await controller.getContentData()