自定义模块 Custom Modules

扩展入口点

模块的入口点是扩展包的 src/ 文件夹中的 index 文件。 它导出一个带有选项的配置对象来配置你的模块的行为。 加载模块时，该对象由 Directus 主机导入。

入口点示例：

import ModuleComponent from './module.vue'

export default {
  id: 'custom',
  name: 'Custom',
  icon: 'box',
  routes: [
    {
      path: '',
      component: ModuleComponent,
    },
  ],
}

可用选项

• id — 此模块的唯一密钥。 使用作者前缀来限定专有模块的范围是一种很好的做法。
• name — 此模块的人类可读名称。
• icon — 来自 material icon set 的图标名称，或 Directus 自定义图标的扩展列表。
• color — 与模块关联的颜色。
• routes — 详细说明模块中的路由。 这些路由被注册为嵌套路由，模块的“id”作为基本路径。
• hidden — 一个布尔值，指示模块是否应该从模块栏中隐藏。
• preRegisterCheck — 接收当前用户作为第一个参数和该用户的权限作为第二个参数的函数。 它应该返回一个布尔值，指示检查是否成功。

路由数组

模块的 routes 数组与 Vue Router 的 routes 数组非常相似。 唯一的区别是模块的路由被注册为 /<module-id> 路由的子路由。

routes 数组应包含一个或多个具有 path 属性的路由对象。 因为路由被注册为子路由，所以 path 属性应该是没有前导斜杠的相对路径。 由于模块栏中与您的模块对应的按钮链接到/<module-id>路由，因此routes数组应包含一个路径为空的_root_路由。

如果路由应该渲染某些东西，路由对象应该有一个 component 属性，并引用路由组件。

要了解更多关于路由对象的属性，可以参考Vue Router Docs。

路由组件

单个模块可以在不同的路由下注册多个路由组件。 每当访问某个路由时，就会渲染对应的路由组件，占据整个浏览器窗口。 路由组件必须是 Vue 组件。 编写 Vue 组件最直接的方法是使用 Vue 单文件组件语法。

使用 Vue SFC 语法的路由组件示例：

<script>
export default {}
</script>

<template>
  <private-view title="My Custom Module">
    Content goes here...
  </private-view>
</template>

路由组件提供了一个空白画布来创建您需要的任何东西。 您可以使用全局注册的 private-view 组件来访问由模块栏、导航、侧边栏、标题和主要内容区域组成的 Directus 页面结构。

访问内部系统

要访问 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()

    // ...
  },
}

示例：从您的扩展中访问 API

Directus App 的 Vue 应用程序实例提供了一个名为 api 的字段，可以使用 Vue 的注入框架 将其注入到 Vue 组件中。 这个 api 字段包含一个名为 api 的属性，它是一个经过身份验证的 Axios 实例。 以下是如何使用它的示例：

<script>
export default {
  inject: ['api'],
  data() {
    return {
      collections: null,
    }
  },
  mounted() {
    // 记录系统字段，以便您可以看到它下面有哪些可用属性完成后删除此行。
    console.log(this.api)

    // 获取要与此模块一起使用的所有可用集合的列表
    this.api.get('/collections?limit=-1').then((res) => {
      this.collections = res.data.data
    })
  },
  methods: {
    logToConsole() {
      console.log(this.collections)
    },
  },
}
</script>

<template>
  <private-view title="Example Collection List">
    <v-list>
      <v-list-item v-for="col in collections" :key="col.collection">
        {{ col.collection }}
      </v-list-item>
    </v-list>
    <v-button @click="logToConsole">
      Log collections to console
    </v-button>
  </private-view>
</template>

在上面的示例中，您可以看到：

• api 字段被注入到组件中并作为组件的属性可用(即 this.api)
• 安装组件时，它使用 this.api.get 请求所有可用集合的列表
• 集合的名称呈现在组件模板中的列表中
• 添加了一个按钮，其中包含一种将集合的所有数据记录到控制台的方法

这只是一个基本示例。 访问和使用集合列表的更有效方法是使用提供的 stores 获取 collectionsStore 的实例并访问 stores.useCollectionsStore() ，但这超出了本指南的范围。