跳到主要内容

应用显示模式

显示选项​

Editor widget 可以通过多种方式显示，以适应不同的界面设计和用户交互需求。它可以作为内联表单、模态对话框或侧边栏面板出现。侧边栏面板布局还支持单列或双列排列，以便组织输入项。

将 Editor 显示为内联表单​

<script setup>
    import { Editor } from "@svar-ui/vue-editor";
    const items = [ /*editor config*/ ];
</script>

<template>
    <Editor :items="items" placement="inline" />
</template>

内联表单布局将编辑器直接嵌入页面内容中。此选项适用于编辑器需要融入连续工作流且不中断用户导航的场景。它常用于仪表盘或管理视图，使编辑器无缝嵌入其中。

Inline

将 Editor 显示为模态对话框​

<script setup>
    import { Editor } from "@svar-ui/vue-editor";
    const items = [ /*editor config*/ ];
</script>

<template>
    <Editor :items="items" placement="modal" />
</template>

模态对话框布局将编辑器以居中覆盖层的形式打开。当编辑过程需要用户的完全注意力、不应与其他页面元素混杂时，此方式最为理想。它常用于创建或编辑重要记录的场景，需要高度专注且相对隔离的操作环境。

Modal

相关示例： Modal Editor

将 Editor 显示为侧边栏面板​

<script setup>
    import { Editor } from "@svar-ui/vue-editor";
    const items = [ /*editor config*/ ];
</script>

<template>
    <Editor :items="items" placement="sidebar" />
</template>

侧边栏面板布局将编辑器附加到屏幕侧边。此布局适用于编辑器作为主内容的辅助功能、但仍需保持可访问性的工作流。它适合用于用户在保持主要上下文可见的同时执行查看详情或快速编辑等任务的应用场景。

Sidebar

相关示例： Sidebar Editor

将 Editor 显示为双列布局​

column?: "left" | "right"
<script setup>
    import { Editor } from "@svar-ui/vue-editor";

    const items = [
        { comp: "text", key: "name", label: "Name", column: "left" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
            column: "left", // move to left column
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];
</script>

<template>
    <Editor :items="items" :values="data" layout="columns" />
</template>

双列布局将输入项分组到侧边栏的左右两个区域中。当输入项较多时，通过视觉分组帮助用户更高效地理解和浏览表单，此配置非常实用。例如，可以将关键详情放置在左列，而将补充选项显示在右列。

columns

相关示例： Modal Editor with columns