• 插件

  • 插件如何自定义输入组件

目前halo官方提供了部分自定义输入组件，但是依旧不能满足插件的需求。
在查阅halo文档表单定义时，发现可以实现类似menuRadio、postSelect、tagSelect等输入组件，查阅到formkit的Custom inputs支持createInput创建输入，但是不知道该如何在halo插件中使用，请问是否可以指导一下，或者在halo插件开发文档中完善教程。

liuyiwuqing 这种方式稍微有点硬核了，以下是实现步骤：

Schema 定义：

- $cmp: CoreRouteSelectorInput
  name: to
  props:
    context: "$node.context"

CoreRouteSelectorInput.vue：

<script lang="ts" setup>
import type { FormKitFrameworkContext } from '@formkit/core';
import { ref, type PropType } from 'vue';
import TablerLinkPlus from '~icons/tabler/link-plus';
import CoreRouteSelectorModal from '../components/CoreRouteSelectorModal.vue';

const props = defineProps({
  context: {
    type: Object as PropType<FormKitFrameworkContext>,
    required: true
  }
})

const selectorModal = ref(false)

async function onInput(value: string) {
  await props.context.node.settled

  const rawValue = props.context.value
  rawValue.to = value

  props.context.node.input(rawValue)
}

function onSelect(url: string) {
  onInput(url)
}
</script>

<template>
  <FormKit
    ref="inputRef"
    type="text"
    :model-value="context.value.to"
    validation="required"
    label="重定向目标"
    @input="onInput"
  >
    <template #suffix>
      <div
        v-tooltip="'选择网站内部链接'"
        class="seo-group seo-flex seo-h-full seo-cursor-pointer seo-items-center seo-border-l seo-px-3 seo-transition-all hover:seo-bg-gray-100"
        @click="selectorModal = true"
      >
        <TablerLinkPlus class="seo-h-4 seo-w-4 seo-text-gray-500 group-hover:seo-text-gray-700" />
      </div>
    </template>
  </FormKit>
  <CoreRouteSelectorModal v-if="selectorModal" @close="selectorModal = false" @select="onSelect" />
</template>

在插件入口注册为全局组件：

export default definePlugin({
  components: {
    CoreRouteSelectorInput
  },
})