如何在FormKit Schema中绑定图标点击处理器属性与处理器函数？

在常规FormKit组件里，你可以直接通过:icon-click绑定处理器函数，但在Schema中需要调整写法，以下是两种可行方案：

1. 直接在Schema对象中绑定函数 #

如果你的Schema是在组件内部定义的，直接将处理器函数赋值给对应字段的props.iconClick即可（注意Schema中要用驼峰式命名，对应组件的icon-click属性）：

<template>
  <FormKitSchema :schema="formSchema" />
</template>

<script setup>
// 定义图标点击逻辑
const handleIconClick = () => {
  console.log('图标被点击了！');
  // 这里可以添加你的业务逻辑，比如切换密码可见性等
};

// 构建表单Schema
const formSchema = {
  type: 'form',
  children: [
    {
      type: 'text',
      label: '用户名',
      props: {
        // 直接绑定处理器函数
        iconClick: handleIconClick
      }
    }
  ]
};
</script>

2. 通过上下文传递处理器（适用于独立Schema文件） #

如果你的Schema是单独维护的（比如外部JSON/JS文件），可以通过context属性将处理器传递给Schema：

首先定义独立的Schema文件：

// src/schemas/userForm.js
export const userFormSchema = {
  type: 'form',
  children: [
    {
      type: 'password',
      label: '密码',
      props: {
        // 使用$前缀引用上下文中的函数
        iconClick: '$togglePasswordVisibility'
      }
    }
  ]
};

然后在组件中引入并传递上下文：

<template>
  <FormKitSchema 
    :schema="userFormSchema"
    :context="{ togglePasswordVisibility }"
  />
</template>

<script setup>
import { userFormSchema } from '@/schemas/userForm.js';
import { ref } from 'vue';

const passwordVisible = ref(false);

// 密码可见性切换逻辑
const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
  // 可以通过FormKit实例修改字段属性，比如切换type
  const input = document.querySelector('[data-type="password"]');
  input.type = passwordVisible.value ? 'text' : 'password';
};
</script>

关键注意点 #

• Schema中组件属性使用驼峰式（iconClick）对应FormKit组件的短横线式（icon-click）。
• 确保处理器函数在Schema的作用域内可访问：要么直接在定义Schema的setup中声明，要么通过context传递。
• 无论是使用<FormKitSchema>组件还是<FormKit>的schema prop，写法完全一致。

内容的提问来源于stack exchange，提问作者sonysucks