TPower DesignAppearance
使用
<template>
<higher-order-form :form-props="formProps" :form-data="formData" :rules-config="rulesConfig" @selectname-select="onSelectname" />
</template>
引入
vue
<script setup>
import {(HigherOrderForm, useInitFormData)} from '@/components/Form';
import props from './props.json' // 配置项
const formData = ref(useInitFormData(props.bucket)); const formProps = props; // ... 事件 const
const onSelectname = (...args) => {console.log('[onSelectname]', ...args)}
</script>
事件说明
使用 alias 同名称事件，触发 v-model 事件, 例： @selectname
使用 alias 加后缀，触发后缀相对应的事件, 例： @selectname-select 触发的是: Select 选择器的 select 事件
rulesConfig
js
const rulesConfig = {
usernameFormItem: [
{
required: true,
message: '请输入用户名',
trigger: 'blur',
},
],
};
usernameFormItem 与 配置项中的 formItem.name 相对应