表单组件事件

字段配置中的 change / click / focus / blur 接收事件对象，不是单个值。公共字段包含 value、column、dic、item，焦点与点击事件还包含原生 event；行编辑环境可能额外包含 row、index。

初始化和外部赋值也可能触发 change。提交数据应放在表单 submit 流程中，避免把每次字段变化都当成用户保存。

组件事件

效果预览可直接操作下方示例

在输入框输入、聚焦、失焦、点击或按回车，查看下方最近事件。enter 是 Form 字段包装层的回调；配置 column.enter 后，它优先于 option.enter 的整表提交。

正在加载示例…

<template>
  <avue-form :option="option" v-model="form" />
  <pre>{{ JSON.stringify(events, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const form = ref({ name: '' });
const events = ref([]);
function record(type, { value, column, event }) {
  events.value = [{ type, value, prop: column.prop, nativeEvent: event?.type }, ...events.value].slice(0, 6);
}
const option = {
  menuBtn: false,
  column: [{
    label: '姓名', prop: 'name', span: 24,
    change: (payload) => record('change', payload),
    click: (payload) => record('click', payload),
    focus: (payload) => record('focus', payload),
    blur: (payload) => record('blur', payload),
    enter: (payload) => record('enter', payload),
  }],
};
</script>

独立 avue-input 使用 @change 等组件事件；不要同时把同一个函数绑定为 :change 和 @change，否则会执行两次。详见 基础组件使用约定。

组件对象

formRef.value.getPropRef(prop) 返回字段包装实例，内部输入组件在 .$refs.temp。这些引用需要字段已挂载；完全自定义插槽或隐藏字段不保证存在。

效果预览可直接操作下方示例

点击按钮获取 OTP 字段实例并调用该组件公开的 focus(0) 方法。脚本中模板 ref 需要通过 .value 访问，不能写 formRef.$refs。

正在加载示例…

<template>
  <el-button @click="focusOtp">聚焦验证码第一格</el-button>
  <avue-form ref="formRef" v-model="form" :option="option" />
  <p>{{ state }}</p>
</template>

<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const form = ref({ otp: '' });
const state = ref('点击按钮后获取字段实例并调用 focus(0)');
const option = {
  menuBtn: false,
  column: [{ label: '验证码', prop: 'otp', type: 'otp', length: 6, span: 24 }],
};
function focusOtp() {
  const wrapper = formRef.value?.getPropRef('otp');
  const input = wrapper?.$refs.temp;
  if (!input) {
    state.value = '字段尚未渲染';
    return;
  }
  input.focus(0);
  state.value = '已调用验证码组件的 focus(0)';
}
</script>

具体实例方法应查对应组件，不要假定所有输入组件都有 focus、validate 等相同接口。

组件交互

control(value, form, label, column) 返回以目标字段 prop 为键的配置对象，例如 { remark: { display: false } }。3.5.0 起支持函数返回 Promise；control 本身仍应是函数，不是直接传入 Promise。

效果预览可直接操作下方示例

切换“显示/隐藏”，第二个字段随之变化；输入第二个字段时会通过异步 control 改变第一个字段的标题。每次返回需要更新的配置即可。

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  text1: 0,
});

const option = ref({
  column: [
    {
      label: "内容1",
      prop: "text1",
      type: "radio",
      control: (val, form) => {
        if (val === 0) {
          return {
            text2: {
              display: true,
            },
            text3: {
              label: "内容3",
            },
          };
        } else {
          return {
            text2: {
              display: false,
            },
            text3: {
              label: "有没有发现我变了",
            },
          };
        }
      },
      dicData: [
        {
          label: "显示",
          value: 0,
        },
        {
          label: "隐藏",
          value: 1,
        },
      ],
    },
    {
      label: "内容2",
      prop: "text2",
      display: true,
      control: (val, form) => {
        return new Promise((resolve) => {
          if (val) {
            resolve({
              text1: {
                label: "改变内容1",
              },
            });
          } else {
            resolve({
              text1: {
                label: "内容1",
              },
            });
          }
        });
      },
    },
    {
      label: "内容3",
      prop: "text3",
    },
  ],
});
</script>