formComp增加动态事件

src/components/form/FormComp.vue

@@ -42,6 +42,7 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
     style="width: 100%"
     v-model="modelValue"
     v-bind="item.props"
+    v-on="item.events || {}"
     :placeholder="item.placeholder || placeholder(item)"
   />
   <el-upload
@@ -50,6 +51,7 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
     :action="baseApi + '/file/upload'"
     :headers="headers"
     v-bind="item.props"
+    v-on="item.events || {}"
   >
     <img v-if="modelValue" :src="modelValue" class="avatar" />
     <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
@@ -60,22 +62,23 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
     v-model="modelValue"
     v-bind="item.props"
     :placeholder="item.placeholder || placeholder(item)"
+    v-on="item.events || {}"
   >
     <template v-if="item.type === 'radio-group'">
-      <el-radio :label="option.label" v-for="(option, index) in item.options" :key="index" v-bind="option.props">
+      <el-radio v-for="(option, index) in item.options" :label="option.label" :key="index" v-bind="option.props">
         {{ option.value }}
       </el-radio>
     </template>
     <template v-if="item.type === 'checkbox-group'">
-      <el-checkbox :label="option.label" v-for="(option, index) in item.options" :key="index" v-bind="option.props">
+      <el-checkbox v-for="(option, index) in item.options" :label="option.label" :key="index" v-bind="option.props">
         {{ option.value }}
       </el-checkbox>
     </template>
     <template v-else-if="item.type === 'select'">
       <el-option
+        v-for="(option, index) in item.options"
         :label="option.label"
         :value="option.value"
-        v-for="(option, index) in item.options"
         :key="index"
         v-bind="option.props"
       ></el-option>

src/types/form.ts

@@ -14,6 +14,7 @@ export type BasicFormItem = {
   rules?: FormItemRule | FormItemRule[]
   span?: number
   props?: object
+  events?: object
 }
 
 export type AdvancedFormItem = {

src/views/system/user.vue

@@ -37,6 +37,13 @@ const testGetRole = () => {
   })
 }
 testGetRole()
+const test = () => {
+  console.log('object input')
+}
+const change = (e: any) => {
+  console.log('focus')
+  console.log(e)
+}
 
 const formConfig = reactive<BasicForm>({
   span: 12,
@@ -47,7 +54,11 @@ const formConfig = reactive<BasicForm>({
       name: 'name',
       type: 'input',
       rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-      search: true
+      search: true,
+      events: {
+        input: test,
+        focus: change
+      }
     },
     {
       label: '密码',
@@ -66,7 +77,6 @@ const formConfig = reactive<BasicForm>({
         maxlength: 11
       }
     },
-
     {
       label: '角色',
       value: '',