Skip to content

<SceneConfigureWidget>

INFO

<SceneConfigureWidget> 组件必须在 <Provider> 组件内使用。

<SceneConfigureWidget> 组件用于展示和配置场景属性。通过此组件,用户可以查看并调整与场景相关的设置和参数。

使用示例

精简版

在精简版中,直接使用 <SceneConfigureWidget> 组件来显示场景配置项,无需额外定制:

vue
<template>
    <SceneConfigureWidget></SceneConfigureWidget>
</template>

定制版

通过插槽功能,您可以定制不同部分的内容。例如,您可以自定义头部、组头部以及空数据时的提示内容:

vue
<template>
    <SceneConfigureWidget>
        <template #header="item">{{ item.label }}</template>
        <template #groupHeader="item">{{ item.label }}</template>
        <template #before="item"><span>1</span></template>
        <template #after="item"><span>2</span></template>
        <template #empty>没有数据</template>
    </SceneConfigureWidget>
</template>

插槽说明

  • #header:自定义场景配置项的头部内容,接收一个 item 参数,用于渲染每个配置项的标题。
  • #groupHeader:自定义每个配置组的标题。
  • #before:在每个配置项的前面插入自定义内容。
  • #after:在每个配置项的后面插入自定义内容。
  • #empty:当没有配置项时显示的内容提示。

注意事项

  • <Provider> 组件<SceneConfigureWidget> 必须被包含在 <Provider> 组件内,以确保正确的上下文和功能支持。
  • 插槽自定义:您可以通过插槽自定义每个部分的渲染方式,以适应不同的使用需求。
  • 数据格式item 参数通常包含每个配置项的标签、值或其他属性。确保传递的数据结构符合组件要求。