自定义

实现JSX

// form-input-my.jsx
import { FormDefault } from '@yukino-luo/ai-ui'

// 自定义的类型需要继承FormDefault，name是类型的标识
export default class FormMyInput extends FormDefault {
  constructor() {
    super()
    this.name = 'my-input'
  }
  // 通过该函数返回组件用于渲染
  // config是formConfig里面配置的对应类型的对象
  // model一般为form组件的model对象
  getTemplate(config, model) {
    return (
      <ai-input
        type={'text-area'}
        label="My Input"
        modelValue={this.getModelValue(config, model)}
        prop={this.getModelName(config)}
        placeholder={config.placeholder}
        width={config.width}
        disabled={config.disabled}
        onInput={this.setModelValue(config, model)}
      />
    )
  }
}

FormDefault对象的方法

方法	说明	参数	返回值
getTemplate	返回实际渲染组件，子类必须实现	(config, model)	-
getTemplateByType	获取对应type的组件	(type, config, model)	-
getModelName	获取model的属性名	(config)	string
getModelValue	根据属性名获取model对应的值	(config, model)	object
getProp	获取prop的属性名	(config, model)	string
getValidator	获取自定义校验函数	(config, model)	Function
getDisabled	获取是否禁用	(config, model)	boolean
setModelValue	设置model值，返回一个函数，每当数据更新需要调用这个函数	(config, model)	Function

注册JSX

// main.js
import { createApp } from 'vue'
import AiUI from '@ai-ui/ui'
import App from './App.vue'
import FormMyInput from './model/form-input-my.jsx'

createApp(App)
  .use((app, options) => {
    const formItemHook = AiUI.useFormItem()
    formItemHook.instance.newModel(FormMyInput)
  })
  .mount('#app')