diff --git a/src/components/naiveui/FormDesign.vue b/src/components/naiveui/FormDesign.vue
index 4a4b2cf65827d4c3b4abba2a3531f8720938ae05..6b5f9aa4cd227587836d3046bf4954e7541bbd65 100644
--- a/src/components/naiveui/FormDesign.vue
+++ b/src/components/naiveui/FormDesign.vue
@@ -248,10 +248,20 @@ export default defineComponent({
   },
   setup() {
     const message = useMessage()
+
+    let widgetForm = JSON.parse(JSON.stringify(naiveui.widgetForm));
+    for (let key in naiveui.widgetForm) {
+      if (naiveui.widgetForm.hasOwnProperty(key)) {
+        if(typeof naiveui.widgetForm[key] === 'function') {
+          widgetForm[key] = naiveui.widgetForm[key];
+        }
+      }
+    }
+
     const state = reactive({
       naiveui,
       codeType: CodeType,
-      widgetForm: JSON.parse(JSON.stringify(naiveui.widgetForm)),
+      widgetForm: widgetForm,
       widgetFormSelect: undefined,
       generateFormRef: null as any,
       configTab: 'widget',
diff --git a/src/components/naiveui/components/CodeEditor.vue b/src/components/naiveui/components/CodeEditor.vue
index 9fd1f8c5432af6cd7c8a345c5bc379a60a61689b..32ae630e0d12ee18fcdff30fea573d31b8827024 100644
--- a/src/components/naiveui/components/CodeEditor.vue
+++ b/src/components/naiveui/components/CodeEditor.vue
@@ -27,7 +27,7 @@ export default defineComponent({
     },
     theme: {
       type: String,
-      default: 'github'
+      default: 'tomorrow'
     },
     readonly: {
       type: Boolean,
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 611dc2954b8295d93b0763eac251885049d7134a..ef892be62d4d213a22d897376ba3420495123780 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -22,6 +22,19 @@
     </n-form-item>
 
     <component  v-if="checkComponent(data.type)" :is="data.type" :select="data"/>
+    <template v-if="hasKey('click') || hasKey('change') || hasKey('input') ">
+      <h4>事件处理</h4>
+      <n-form-item label="change事件" v-if="hasKey('change')">
+        <n-button type="info" dashed @click="editEventCode('change')">编辑代码</n-button>
+      </n-form-item>
+      <n-form-item label="click事件" v-if="hasKey('click')">
+        <n-button type="info" dashed @click="editEventCode('click')">编辑代码</n-button>
+      </n-form-item>
+      <n-alert
+          type="warning"
+          style="margin-bottom: 10px"
+      >注意：此功能在设计状态时无效，可点击预览查看效果</n-alert>
+    </template>
     <template v-if="hasKey('rules')">
       <h4>验证规则</h4>
 
@@ -52,6 +65,42 @@
       </n-form-item>
     </template>
   </n-form>
+  <n-modal
+      v-model:show="showEventCode"
+      :title="editEventHeader"
+      preset="dialog"
+      style="width:800px"
+      positive-text="保存"
+      negative-text="取消"
+      @positive-click="handleSaveEventCode"
+  >
+    <n-alert
+        type="info"
+        style="margin-bottom: 10px"
+    ><n-space>
+      使用示例
+      <n-button text type="primary" @click="setTestEvent('dynamicDisabled')">动态禁用/启用</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicSetValue')">动态赋值</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicRequired')">必填项修改</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicHideLabel')">Label动态显隐</n-button>
+
+      (提示：仅支持Javascript语法)
+      </n-space></n-alert>
+    <div class="code-bord">function {{eventType}}(e,view,form){
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="18">
+            <SvgIcon iconClass="question" style="margin-right: 10px;" />
+          </n-icon>
+        </template>
+        e：naiveui组件的对应事件入参（如input传入的将是change后的value）<br/>
+        view：视图组件信息（更多操作查看src/components/naiveui/config/naiveui.ts）<br/>
+        form：表单信息
+      </n-tooltip>
+    </div>
+    <CodeEditor v-model:value="eventCode" language="javascript" />
+    <div class="code-bord">}</div>
+  </n-modal>
 </template>
 
 <script lang="ts">
@@ -87,11 +136,14 @@ import { v4 } from 'uuid'
 import {ComponentType,checkComponent} from '../../enums'
 import type {RowData} from '../../types/NaiveWidgetTypes'
 import type { DataTableColumns } from 'naive-ui'
+import CodeEditor from '../../components/CodeEditor.vue'
+
 export default defineComponent({
   name: 'DesignConfig',
   components: {
     Draggable,
     SvgIcon,
+    CodeEditor,
     Input,
     Number,
     Radio,
@@ -167,16 +219,50 @@ export default defineComponent({
         {label:'left',value:'left'},
         {label:'left-end',value:'left-end'},
       ],
+      eventType:null,
+      editEventHeader:'',
+      showEventCode:false,
+      eventCode:``,
     })
     const hasKey = (key: string) =>
       Object.keys(data.value.options).includes(key)
 
+    const setTestEvent = (type) => {
+      let code = ''
+      switch (type) {
+        case 'dynamicDisabled':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.disabled = !widget.options.disabled\n}'
+          break
+        case 'dynamicHideLabel':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.showLabel = false\n}'
+          break
+        case 'dynamicSetValue':
+          code=`form['字段标识'] = '新值'`
+          break
+        case 'dynamicRequired':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.rules.required = true\n }'
+          break
+      }
+      state.eventCode = code
+    }
+    const editEventCode = (eventType) => {
+      state.editEventHeader = eventType+ '事件'
+      state.eventType = eventType
+      state.eventCode =  data.value.options[eventType]
+      state.showEventCode = true
+    }
+    const handleSaveEventCode = () => {
+      data.value.options[state.eventType]=state.eventCode
+    }
     return {
       ...toRefs(state),
       treeDataFormRef,
       data,
       hasKey,
       checkComponent,
+      editEventCode,
+      handleSaveEventCode,
+      setTestEvent,
     }
   }
 })
diff --git a/src/components/naiveui/components/design/DesignForm.vue b/src/components/naiveui/components/design/DesignForm.vue
index 744702d9af0099796ecb0a55a6cb17daf49a49dc..6df51ac92f4f6c249d9621d0384358daa684f65c 100644
--- a/src/components/naiveui/components/design/DesignForm.vue
+++ b/src/components/naiveui/components/design/DesignForm.vue
@@ -171,6 +171,7 @@
             </template>
             <template v-else>
               <DesignFormItem
+                :widgetForm="widgetForm"
                 v-if="element.key"
                 :key="element.key"
                 :element="element"
diff --git a/src/components/naiveui/components/design/DesignFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
index 51e10cf64de922001a8bc1dbc9544d4aa6df7874..6fea48e22c40608e54ee00d997aa5a86f4966af9 100644
--- a/src/components/naiveui/components/design/DesignFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -23,6 +23,7 @@
           :round="element.options.round"
           :show-count="element.options.showCount"
           show-password-on="click"
+          @change="handleChange"
         >
             <template #prefix v-if="element.options.prefix">
               {{element.options.prefix}}
@@ -159,7 +160,7 @@
       </template>
       <template v-if="element.type === 'switch'">
         <n-switch
-          :size="config.size"
+          :size="config.size" @change="handleChange"
           v-model:value="element.options.defaultValue"
           :disabled="element.options.disabled"
         >
@@ -357,9 +358,10 @@ import {defineComponent, PropType, ref} from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
-
+import eventMixin from '../../mixins/eventMixin'
 export default defineComponent({
   name: 'NaiveWidgetFormItem',
+  mixins:[eventMixin],
   components: {
     SvgIcon,
     RichTextEditor,
@@ -375,12 +377,20 @@ export default defineComponent({
     },
     selectWidget: {
       type: Object
-    }
+    },
+    widgetForm: {
+      type: Object as PropType<WidgetForm>
+    },
   },
   emits: ['copy', 'delete'],
-  setup() {
+  data(){
+    return{
+    }
+  },
+  setup(props) {
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
+
     return {
       pattern: ref(''),
       handleFilterOption,
diff --git a/src/components/naiveui/components/generate/GenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
index 3f46d01fee4af183a36f39d280d2ba655ddacba2..1e3585314f47242eff95589c1dd32006125a7c4d 100644
--- a/src/components/naiveui/components/generate/GenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -67,6 +67,7 @@
         </template>
         <GenerateFormItem
           v-else
+          :widgetForm="widgetForm"
           :model="model"
           :key="element.key"
           :element="widgetForm.list[index]"
diff --git a/src/components/naiveui/components/generate/GenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
index 65f68e553f52ada46bdbf84000cd387b8d8df333..95ef162bc551931143fb4d449d3e81f4c61c1404 100644
--- a/src/components/naiveui/components/generate/GenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -21,6 +21,7 @@
           :round="element.options.round"
           :show-count="element.options.showCount"
           show-password-on="click"
+          @change="handleChange"
       >
         <template #prefix v-if="element.options.prefix">
           {{element.options.prefix}}
@@ -143,7 +144,7 @@
     <template v-if="element.type === 'switch'">
       <n-switch
           :size="config.size"
-          v-model:value="data"
+          v-model:value="data" @change="handleChange"
           :disabled="disabled || element.options.disabled"
       >
         <template #checked>
@@ -345,14 +346,18 @@ import { computed, defineComponent, PropType,ref } from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
-
+import eventMixin from '../../mixins/eventMixin'
 export default defineComponent({
   name: 'GenerateFormItem',
+  mixins:[eventMixin],
   components: {
     SvgIcon,
     RichTextEditor
   },
   props: {
+    widgetForm: {
+      type: Object as PropType<WidgetForm>
+    },
     config: {
       type: Object as PropType<WidgetForm['config']>,
       required: true
diff --git a/src/components/naiveui/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
index 0d963e0498d661a4a11741bb3dffccb68587be85..62bcaf874492a0f939ca9c9bf598693162ac52e6 100644
--- a/src/components/naiveui/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -21,7 +21,8 @@ export interface WidgetForm {
     labelWidth: any
     showLabel: boolean
     labelPlacement: string
-  }
+  },
+  getWidget:any,
 }
 const rules: Rules = {
   trigger: 'blur',
@@ -62,14 +63,26 @@ export const widgetForm: WidgetForm = {
     labelWidth: 'auto',
     labelPlacement: 'top',
     showLabel: true,
-  }
+  },
+  // getWidget:['list'].map(value => {
+  //   console.log('1111=',value)
+  // }),
+  getWidget:function (modelKey){
+    let widget = null
+    this.list.map(value => {
+      if (value.model===modelKey){
+        widget =  value
+      }
+    })
+    return widget
+  },
 }
-
 export const basicComponents = [
   {
     label: '文本输入',
     type: 'input',
     options: {
+      change:'',
       width: '100%',
       type:'text',
       showLabel: true,
@@ -90,6 +103,7 @@ export const basicComponents = [
     label: '数字输入',
     type: 'number',
     options: {
+      change:'',
       showLabel: true,
       width: '100%',
       defaultValue: 0,
@@ -105,6 +119,8 @@ export const basicComponents = [
     label: '单选框组',
     type: 'radio',
     options: {
+      change:'',
+      click:'',
       defaultValue: '',
       width: '',
       groupType: 'radioGroup',
@@ -139,6 +155,8 @@ export const basicComponents = [
     label: '多选框组',
     type: 'checkbox',
     options: {
+      change:'',
+      click:'',
       defaultValue: [],
       width: '',
       inline: true,
@@ -173,6 +191,7 @@ export const basicComponents = [
     label: '时间选择器',
     type: 'time',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: null,
       width: '',
@@ -189,6 +208,7 @@ export const basicComponents = [
     label: '日期选择器',
     type: 'date',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: null,
       width: '',
@@ -205,6 +225,8 @@ export const basicComponents = [
     label: '评分',
     type: 'rate',
     options: {
+      change:'',
+      click:'',
       showLabel: true,
       defaultValue: null,
       max: 5,
@@ -218,6 +240,7 @@ export const basicComponents = [
     label: '下拉选择框',
     type: 'select',
     options: {
+      change:'',
       defaultValue: [],
       width: '200px',
       placeholder: '请选择',
@@ -255,6 +278,8 @@ export const basicComponents = [
     label: '开关',
     type: 'switch',
     options: {
+      change:'',
+      click:'',
       showLabel: true,
       defaultValue: false,
       disabled: false,
@@ -267,6 +292,7 @@ export const basicComponents = [
     label: '滑块',
     type: 'slider',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: 0,
       width: '',
@@ -285,6 +311,7 @@ export const basicComponents = [
     label: '颜色选择器',
     type: 'color',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: '',
       width: '',
@@ -302,6 +329,7 @@ export const advanceComponents = [
     label: '树形选择',
     type: 'selectTree',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       width: '',
@@ -410,6 +438,7 @@ export const advanceComponents = [
     label: '穿梭框',
     type: 'transfer',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: '',
       width: '',
@@ -439,6 +468,7 @@ export const advanceComponents = [
     label: '级联选择器',
     type: 'cascader',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       width: '',
@@ -506,6 +536,7 @@ export const advanceComponents = [
     label: '树形组件',
     type: 'tree',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       cascade: true,
diff --git a/src/components/naiveui/mixins/eventMixin.js b/src/components/naiveui/mixins/eventMixin.js
new file mode 100644
index 0000000000000000000000000000000000000000..73eb75e6e6e7de887a7d632852f33f2ec920a2c8
--- /dev/null
+++ b/src/components/naiveui/mixins/eventMixin.js
@@ -0,0 +1,31 @@
+export default {
+    methods:{
+        /**
+         * 改变事件
+         * @param e 入参
+         */
+        handleChange(e){
+            console.log('触发change事件：',e)
+            let customFn = new Function('form','view','e', this.element.options.change)
+            customFn.call(this,this.model,this.widgetForm, e)
+        },
+        /**
+         * 点击事件
+         * @param e 入参
+         */
+        handleClick(e){
+            console.log('触发click事件：',e)
+        },
+        /**
+         * 带回调的点击事件 - 示例
+         * @param e 入参
+         */
+        /*handleClickCallback(e){
+            let customFn = (rule, value, callback) => {
+              let tmpFunc =  new Function('form','e', this.selectWidget.options.change)
+              return tmpFunc.call(this,this.widgetForm, e)
+            }
+            customFn.call(this,this.widgetForm, e)
+        }*/
+    }
+}
diff --git a/src/components/naiveui/styles/index.less b/src/components/naiveui/styles/index.less
index d2674dccf3b8fbcdcf9da40ca9261e366a6da4bf..0cffe2a73b8080b65825fb10ad320d47804b611f 100644
--- a/src/components/naiveui/styles/index.less
+++ b/src/components/naiveui/styles/index.less
@@ -419,3 +419,9 @@ body {
     display: block !important;
   }
 }
+.code-bord{
+  color: #7b7979;
+  background: #e8e8e8;
+  font-size: 16px;
+  padding-left: 5px;
+}