跳到主要内容

items

描述​

可选。定义在 Editor 中渲染的组件

用法​

items?: {
   comp?: string | Component;
   key?: string;
   label?: string;
   labelTemplate?: (value: any) => string;
   column?: "right" | "left";
   batch?: string | number;
   hidden?: boolean;
   section?: string;
   sectionMode?: "accordion" | "exclusive";
   activeSection?: boolean;
   options?: {
      id?: string | number;
      label?: string;
      [key: string]: any;
   }[];
   required?: boolean;
   validation?: (value: any) => boolean;
   validationMessage?: string;
   config?: {
      [key: string]: any;
   };
   [key: string]: any;
	}[];

参数​

  • comp – （必填）指定组件类型（例如 "text"、"textarea"、"select"）或一个 Svelte 组件。若未找到或未提供该组件，则默认使用 "text"。
  • key – （必填）将条目绑定到编辑器 values 对象中某个属性的唯一键
  • label – （可选）显示在控件旁边的文本标签
  • labelTemplate – （可选）根据当前值返回自定义标签字符串的函数
  • column – （可选）定义控件渲染所在的列："left" | "right"
  • batch – （可选）将条目归组，以便进行集体渲染或处理
  • hidden – （可选）若为 true，该条目将不会被渲染
  • section – （可选）将条目分配到指定名称的分区
  • sectionMode – （可选）定义可折叠分区的行为：
    • "accordion" – 多个分区可同时展开
    • "exclusive" – 同一时间只能有一个分区处于展开状态
  • activeSection – （可选）若为 true，该分区默认展开
  • options – （可选）定义可选项列表，供 select、radio 等组件使用
  • required – （可选）将字段标记为必填
  • validation – （可选）自定义验证函数。有效值须返回 true，否则返回 false
  • validationMessage – （可选）验证失败时显示的提示信息
  • config – （可选）直接传递给组件的任意配置对象
  • [key: string] – （可选）允许为编辑器条目附加额外的属性或特性

示例​

在编辑器中渲染可编辑文本控件​

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染只读块​

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "readonly",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染单选按钮​

<script>
   import { RadioButtonGroup } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("radio-group", RadioButtonGroup);

   const items = [
      {
        comp: "radio-group",
        key: "name",
        label: "Name",
        options: [
           {
              value: "s",
              label: "Scorpions",
           },
           {
              value: "m",
              label: "Muse",
           },
        ]
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染文本域控件​

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   registerEditorItem("textarea", TextArea);

   const items = [
      {
        comp: "textarea",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染滑块控件​

<script>
   import { Slider } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("slider", Slider);

   const items = [
      {
        comp: "slider",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染富选择控件​

<script>
   import { RichSelect } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("select", RichSelect);

   const items = [
      {
        comp: "select",
        key: "name",
        label: "Name",
        options: [
           { id: 1, label: "High", color: "#DF282F" },
           { id: 2, label: "Medium", color: "#FFC975" },
           { id: 3, label: "Low", color: "#65D3B3" },
        ]
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染日期选择器控件​

<script>
   import { DatePicker } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("datepicker", DatePicker);

   const items = [
      {
        comp: "datepicker",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

在编辑器中渲染颜色选择器控件​

<script>
   import { ColorSelect } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("colorselect", ColorSelect);

   const items = [
      {
        comp: "colorselect",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

向编辑器添加评论​

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const users = [
      {
        id: 1,
        name: "John Doe",
        avatar: "https://via.placeholder.com/150",
      },
   ];

   const items = [
      {
        comp: "comments",
        key: "comments",
        label: "Comments",
        users,
        activeUser: 1,
      },

   ];

   const data = {
      comments: [
        {
           id: 1,
           user: 1,
           content: "Greetings, fellow colleagues.",
           date: new Date(),
        },
      ],
   }
</script>

<Editor {items} values={data} />

向编辑器添加任务列表​

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { TaskList } from "@svar-ui/svelte-tasklist";

   registerEditorItem("tasks", Tasklist);
   const items = [
      {
        comp: "tasks",
        key: "task",
        label: "Task",
      },
   ];

   const data = {
      task: [
        {
           id: 1,
           title: "Task 1",
           status: 1,
        },
      ],
   }
</script>

<Editor {items} values={data} />

将表单拆分为多个分区​

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

所有字段均渲染在可折叠分区内。

将字段标记为必填​

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<Editor {items} />

本示例展示了如何在编辑器中将 name 字段标记为必填。

为字段定义验证规则​

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      }
   ];
</script>

<Editor {items} />

本示例为"Name"字段定义了一条验证规则，要求输入内容匹配特定的正则表达式。若输入不符合要求，将显示验证消息"wrong name format"。