跳到主要内容
版本:Next

AnnotationsForm

此组件用于提供统一的 Annotations 表单,可以根据 groupkind 属性自动渲染对应的表单项。

使用示例

<script lang="ts" setup>
import { ref } from "vue"

const annotationsFormRef = ref()
const currentAnnotations = ref()

function handleSubmit () {
annotationsFormRef.value?.handleSubmit();
await nextTick();

const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
annotationsFormRef.value || {};

// 表单验证不通过
if (customFormInvalid || specFormInvalid) {
return;
}

// 合并自定义数据和表单提供的数据
const newAnnotations = {
...annotations,
...customAnnotations,
};
}
</script>

<template>
<AnnotationsForm
ref="annotationsFormRef"
:value="currentAnnotations"
kind="Post"
group="content.halo.run"
/>

<VButton @click="handleSubmit">提交</VButton>
</template>

Props

属性名类型默认值描述
groupstring无,必填定义组件所属的分组。
kindstring无,必填定义组件的种类。
value{ [key: string]: string; } | nullnull可选,包含键值对的对象或空值,用于存储数据。