跳到主要内容
版本:2.19

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; } | null | null可选,包含键值对的对象或空值,用于存储数据。