自定义布局 Custom Layouts

扩展入口点

布局的入口点是扩展包的 src/ 文件夹中的 index 文件。 它导出一个配置对象，其中包含用于配置布局行为的选项。 加载布局时，此对象由 Directus 主机导入。

入口点示例：

import { ref } from 'vue'
import LayoutComponent from './layout.vue'

export default {
  id: 'custom',
  name: 'Custom',
  icon: 'box',
  component: LayoutComponent,
  slots: {
    options: () => null,
    sidebar: () => null,
    actions: () => null,
  },
  setup() {
    const name = ref('Custom Layout')

    return { name }
  },
}

可用选项

• id — 此布局的唯一键。 使用作者前缀来限定专有布局的范围是一种很好的做法。
• name — 此布局的人类可读名称。
• icon — 来自 material icon set 的图标名称，或 Directus 自定义图标的扩展列表。
• component — 对布局组件的引用。
• slots — 由您的布局添加的其他组件。
  • options — 对选项组件的引用。
  • sidebar — 对侧边栏组件的引用。
  • actions — 对动作组件的引用。
• setup — 设置布局组件和其他组件共享的反应状态的函数。 它接收一个 props 对象作为第一个参数，一个包含 emit() 函数的 context 对象作为第二个参数。

布局组件

布局组件是您的扩展的一部分，只要您的布局应该用于显示集合的项目，Directus 应用程序就会呈现该组件。 这个布局组件必须是 Vue 组件。 编写 Vue 组件最直接的方法是使用 Vue 单文件组件语法。

使用 Vue SFC 语法的布局组件示例：

<script>
export default {
  inheritAttrs: false,
  props: {
    collection: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
}
</script>

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Collection: {{ collection }}</p>
  </div>
</template>

除了一些预定义的 props 之外，组件还接收在 setup() 函数中定义的状态作为单独的 props。 除了一些预定义的 emits 之外，该组件还为 setup() 函数返回的每个属性提供 emits。 这些发射以 update: 为前缀。

这些 props 和 emits 在与您的布局关联的所有组件中都可用。

可用道具

• collection — 当前集合的名称。
• selection — 任何当前选择的项目。
• layoutOptions — 用户当前保存的布局选项。
• layoutQuery — 用户的布局查询参数。 (例如，排序、限制等)
• filter — 组合的有源滤波器。
• filterUser — 用户当前的活动过滤器。
• filterSystem — 系统当前活动的过滤器。
• search — 用户当前的搜索查询。
• selectMode — 一个布尔值，指示布局是否应处于选择模式。
• readonly — 一个布尔值，指示布局是否应处于只读模式。
• resetPreset — 重置预设的功能。

可用发射

• update:selection — 更新当前选择的项目。
• update:layoutOptions — 更新用户当前保存的布局选项。
• update:layoutQuery — 更新用户的布局查询参数。

除了这个与 Directus 应用程序通信的简单 API 和在组件之间共享状态的系统之外，布局组件是一个空白画布，允许您创建任何您需要的东西。

@directus/extensions-sdk 包提供了一些有用的可组合项来帮助创建布局：

• useSync() — 此函数可用于将可写 ref 与 prop 和相应的 emit 同步。
• useCollection() — 此函数可用于接收有关集合的信息。
• useItems() — 此函数可用于从 API 中获取项目。

Accessing Internal Systems

要访问 API 或商店等内部系统，您可以使用由“@directus/extensions-sdk”包导出的“useApi()”和“useStores()”可组合项。 它们可以像这样在 setup() 函数中使用：

import { useApi, useStores } from '@directus/extensions-sdk'

export default {
  setup() {
    const api = useApi()

    const { useCollectionsStore } = useStores()
    const collectionsStore = useCollectionsStore()

    // ...
  },
}