c-form 改变事件

通过 onChange 监听值变化。

浏览器不支持，请手动复制 change.vue

<template>
  {{ form }}
  <c-form v-model="form" :option="option" />
</template>
<script setup lang="ts">
import type { FormOption } from 'carton-ui'
import { ref } from 'vue'

type User = {
  fullName?: string
  gender?: 'man' | 'feman'
  tel?: number
  age?: number
}
const form = ref<User>()

const option: FormOption<User> = {
  columns: [
    {
      label: '姓名',
      key: 'fullName',
      // 首参数是值
      onChange: val => {
        console.log(val)
      },
    },
    {
      label: '性别',
      key: 'gender',
      type: 'radio',
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'feman' },
      ],
      // 第二个参数可以获取更多，data可以直接改变表单值
      onChange: (val, ctx) => {
        console.log(val)
        ctx.data.fullName = `选择了 ${val}`
      },
    },
  ],
}
</script>

组件配置

FormColumn Props

属性	说明	类型	默认值
onChange	改变事件，可通过ctx.data改变表单值	(val:T, ctx: { data:FormData, ... } )=>void