Interfaces Custom Interfaces

扩展入口点

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

入口点示例：

import InterfaceComponent from './interface.vue'

export default {
  id: 'custom',
  name: 'Custom',
  icon: 'box',
  description: 'This is my custom interface!',
  component: InterfaceComponent,
  options: null,
  types: ['string'],
}

可用选项

• id — 此接口的唯一键。 使用作者前缀来限定专有接口的范围是一种很好的做法。
• name — 此接口的人类可读名称。
• icon — 材料图标集 中的图标名称，或 Directus 自定义图标的扩展列表。
• description — 应用程序中显示的此界面的简短描述(<80 个字符)。
• component — 对您的界面组件的引用。
• options — 界面的选项。 可以是选项对象或专用的 Vue 组件。
• types — 一组支持的类型。
• localTypes — 局部类型数组。 接受 standard、file、files、m2o、o2m、m2m、m2a、presentation、translations 和 group。 默认为standard.
• group — 创建字段时显示此界面的组。 接受“标准”、“选择”、“关系”、“组”或“其他”。
• relational — 指示此接口是否为关系接口的布尔值。
• recommendedDisplays — 建议与此界面一起使用的显示名称数组。

接口组件

界面组件是您的扩展的一部分，只要您的界面应该用于将某些值输入到字段中，Directus 应用程序就会呈现该部分。 这个界面组件必须是 Vue 组件。 编写 Vue 组件最直接的方法是使用 Vue 单文件组件语法。

使用 Vue SFC 语法的界面组件示例：

<script>
export default {
  props: {
    value: {
      type: String,
      default: null,
    },
  },
  emits: ['input'],
  setup(props, { emit }) {
    return { handleChange }

    function handleChange(value) {
      emit('input', value)
    }
  },
}
</script>

<template>
  <input :value="value" @input="handleChange($event.target.value)">
</template>

该字段的当前值通过“value”属性提供给组件。 如果该值在您的组件内部发生更改，则应使用“input”emit 将其发送到 Directus 应用程序。

可用Props

• value — 字段的值。
• width — 字段的布局宽度。 half、half-right、full 或 fill。
• type — 字段的类型。
• collection — 字段的集合名称。
• field — 领域的关键。
• primaryKey — 当前项的主键。

可用Emits

• input — 更新字段的值。
• setFieldValue - 用于设置其他字段的值。

除了这个与 Directus 应用程序通信的简单 API 之外，界面组件是一个空白画布，允许您创建任何您需要的东西。

访问内部系统

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

    // ...
  },
}