跳到主要内容

activeBatch

描述

可选。控制编辑器中当前激活的输入批次

用法

activeBatch?: string | number;

示例

每次显示一个批次

<script setup>
import { Editor } from "@svar-ui/vue-editor";
import { Combo } from "@svar-ui/vue-core";

registerEditorItem("combo", Combo);

const batchItems = [
{
comp: "text",
key: "name",
batch: "main",
label: "Name",
},
{
key: "theme",
batch: "cfg",
comp: "combo",
label: "Theme",
options: [
{ id: "light", label: "Light" },
{ id: "dark", label: "Dark" },
],
},
];

</script>

<template>
<Editor :items="items" activeBatch="cfg" />
</template>

使用标签栏控制可见性

<script setup>
import { ref } from "vue";
import { Combo, Tabs } from "@svar-ui/vue-core";
import { Editor } from "@svar-ui/vue-editor";

registerEditorItem("combo", Combo);

const options = [
{
id: "main",
label: "Personal",
},
{
id: "cfg",
label: "Settings",
},
];

const items = [
{
comp: "text",
key: "name",
batch: "main",
label: "Name",
},
{
key: "theme",
batch: "cfg",
comp: "combo",
label: "Theme",
options: [
{ id: "light", label: "Light" },
{ id: "dark", label: "Dark" },
],
},
];

const activeBatch = ref("cfg");
</script>

<template>
<Editor :items="items" v-model:activeBatch="activeBatch">
<Tabs :options="options" v-model:value="activeBatch"></Tabs>
</Editor>
</template>