diff --git a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
index e2b5d7e69dbb0a0aafba7295dae96f1b5baafb7b..be3b216525e611efa37974885c4e3db0575ea587 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, toRefs } from 'vue';
+import { defineComponent, computed, toRefs, ref } from 'vue';
 import type { SetupContext } from 'vue';
 import { buttonEditProps, ButtonEditProps } from './button-edit.props';
 import { useButton } from './composition/use-button';
@@ -12,24 +12,25 @@ export default defineComponent({
     'updateExtendInfo',
     'clear',
     'change',
-    'clickHandle',
-    'blurHandle',
-    'focusHandle',
-    'enterHandle',
-    'iconMouseEnter',
-    'iconMouseLeave',
-    'keyupHandle',
-    'keydownHandle',
+    'click',
+    'clickButton',
+    'blur',
+    'focus',
+    'mouseEnter',
+    'mouseEnterIcon',
+    'mouseLeaveIcon',
+    'keyup',
+    'keydown',
     'inputClick',
     'input',
     'update:modelValue',
   ],
   setup(props: ButtonEditProps, context: SetupContext) {
-    const { modelValue } = toRefs(props);
+    const modelValue = ref(props.modelValue);
 
     const { buttonClass, onClickButton, onMouseEnterButton, onMouseLeaveButton } = useButton(props, context);
 
-    const { showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(props, context);
+    const { showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(props, context, modelValue);
 
     const {
       hasFocusedTextBox,
@@ -41,10 +42,11 @@ export default defineComponent({
       onClickTextBox,
       onFocusTextBox,
       onInput,
+      onKeyDownTextBox,
+      onKeyUpTextBox,
       onMouseDownTextBox,
-      onMouseOverTextBox,
       onTextBoxValueChange,
-    } = useTextBox(props, context);
+    } = useTextBox(props, context, modelValue);
 
     const inputGroupClass = computed(() => ({
       'input-group': true,
@@ -57,7 +59,7 @@ export default defineComponent({
     return () => {
       return (
         <div class="f-cmp-inputgroup" id={props.id}>
-          <div class={[props.customClass, inputGroupClass.value]}>
+          <div class={[props.customClass, inputGroupClass.value]} onMouseenter={onMouseEnterTextBox} onMouseleave={onMouseLeaveTextBox}>
             <input
               name="input-group-value"
               autocomplete={'' + props.autoComplete}
@@ -72,19 +74,28 @@ export default defineComponent({
               type={props.inputType}
               value={modelValue.value}
               onBlur={onBlurTextBox}
+              onChange={onTextBoxValueChange}
               onClick={onClickTextBox}
               onFocus={onFocusTextBox}
               onInput={onInput}
-              onKeydown={onMouseEnterTextBox}
+              onKeydown={onKeyDownTextBox}
+              onKeyup={onKeyUpTextBox}
               onMousedown={onMouseDownTextBox}
             />
             <div class={buttonClass.value}>
               {showClearButton.value && (
-                <span class="input-group-text input-group-clear">
+                <span class="input-group-text input-group-clear" onClick={onClearValue}>
                   <i class="f-icon modal_close"></i>
                 </span>
               )}
-              {props.buttonContent && <span class="input-group-text" v-html={props.buttonContent}></span>}
+              {props.buttonContent && (
+                <span
+                  class="input-group-text"
+                  onClick={onClickButton}
+                  onMouseenter={onMouseEnterButton}
+                  onMouseleave={onMouseLeaveButton}
+                  v-html={props.buttonContent}></span>
+              )}
             </div>
           </div>
         </div>
diff --git a/packages/ui-vue/components/button-edit/src/composition/types.ts b/packages/ui-vue/components/button-edit/src/composition/types.ts
index d4c8edd507ba5ec2bc46a2f373820c8b66067a61..077766e701e13ffe72a9c504819f504536a9b417 100644
--- a/packages/ui-vue/components/button-edit/src/composition/types.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/types.ts
@@ -35,9 +35,11 @@ export interface UseClear {
   /**
    * 鼠标进入输入框事件响应函数
    */
-  onMouseEnterTextBox: ($event: KeyboardEvent) => void;
-
-  onMouseLeaveTextBox: ($event: Event) => void;
+  onMouseEnterTextBox: ($event: MouseEvent) => void;
+  /**
+   * 鼠标移出输入框事件响应函数
+   */
+  onMouseLeaveTextBox: ($event: MouseEvent) => void;
 }
 
 export interface UseTextBox {
@@ -58,6 +60,10 @@ export interface UseTextBox {
    * 输入框提示标签
    */
   textBoxTitle: ComputedRef<string>;
+  /**
+   * 更新输入框的值并触发change事件
+   */
+  changeTextBoxValue: (newValue: string, showEmitChangeEmit: boolean) => void;
   /**
    * 输入框失去焦点事件响应函数
    */
@@ -79,11 +85,15 @@ export interface UseTextBox {
    */
   onMouseDownTextBox: ($event: MouseEvent) => void;
   /**
-   * 鼠标滑过输入框事件响应函数
+   * 键盘在输入框按下事件
+   */
+  onKeyDownTextBox: ($event: Event) => void;
+  /**
+   * 键盘在输入框抬起事件
    */
-  onMouseOverTextBox: ($event: Event) => void;
+  onKeyUpTextBox: ($event: Event) => void;
   /**
    * 输入框值变化事件响应函数
    */
-  onTextBoxValueChange: (value: string, emit: boolean) => void;
+  onTextBoxValueChange: ($event: Event) => void;
 }
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-button.ts b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
index 009372ee39ce6293404949c23889cbaa77a7473f..56799f46deb925a8d0ffa4c88da47cc798950c02 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-button.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
@@ -12,7 +12,7 @@ export function useButton(props: ButtonEditProps, context: SetupContext): UseBut
 
   function onClickButton($event: Event) {
     if (canClickAppendButton.value) {
-      context.emit('clickButton', { origin: $event, value: this.value });
+      context.emit('clickButton', { origin: $event, value: props.modelValue });
     }
     $event.stopPropagation();
   }
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
index eabf59741829a8b97dc81db1b60f2899ce1d5870..8b66fef9ffb850c9ee264ae3a580f73dfaf0f8c2 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
@@ -1,13 +1,13 @@
-import { computed, ref, SetupContext } from 'vue';
+import { computed, Ref, ref, SetupContext } from 'vue';
 import { ButtonEditProps } from '../button-edit.props';
 import { UseClear } from './types';
 import { useTextBox } from './use-text-box';
 
-export function useClear(props: ButtonEditProps, context: SetupContext): UseClear {
+export function useClear(props: ButtonEditProps, context: SetupContext, modelValue: Ref<string>): UseClear {
   const hasShownClearButton = ref(false);
   const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
 
-  const { onTextBoxValueChange } = useTextBox(props, context);
+  const { changeTextBoxValue } = useTextBox(props, context, modelValue);
 
   function toggleClearIcon($event: any, isShow = false) {
     const display = isShow ? '' : 'none';
@@ -22,14 +22,17 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
     const flag2 = !props.editable;
     $event.stopPropagation();
     if (flag1 || flag2) {
-      onTextBoxValueChange('', false);
+      changeTextBoxValue('', false);
       hasShownClearButton.value = false;
       context.emit('clear');
     }
   }
 
   function onMouseEnterTextBox($event: Event) {
-    if (this.value) {
+    if (!showClearButton.value) {
+      return;
+    }
+    if (modelValue.value) {
       if (!props.editable) {
         if (!props.disable) {
           hasShownClearButton.value = true;
@@ -39,11 +42,14 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
       }
     }
     if (hasShownClearButton.value) {
-      this.toggleClearIcon($event, true);
+      toggleClearIcon($event, true);
     }
   }
 
   function onMouseLeaveTextBox($event: Event) {
+    if (!showClearButton.value) {
+      return;
+    }
     hasShownClearButton.value = false;
     toggleClearIcon($event, false);
   }
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts b/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
index e4bcf7e081a32f7b8deb3d9c22975c9f9749dfdd..bf24837563ec1fda559c202a76f327a721085323 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
@@ -1,10 +1,9 @@
-import { isContext } from 'vm';
-import { computed, ref, SetupContext, watch } from 'vue';
+import { computed, Ref, SetupContext, watch } from 'vue';
 import { ButtonEditProps } from '../button-edit.props';
 import { UseTextBox } from './types';
 
-export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTextBox {
-  const textBoxTitle = computed(() => (props.enableTitle ? props.modelValue : ''));
+export function useTextBox(props: ButtonEditProps, context: SetupContext, modelValue: Ref<string>): UseTextBox {
+  const textBoxTitle = computed(() => (props.enableTitle ? modelValue.value : ''));
 
   const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
 
@@ -60,31 +59,42 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTe
     $event.stopPropagation();
   }
 
-  function onMouseOverTextBox($event: Event) {
-    console.log('on onMouseOverInExtentInfo');
+  function onKeyDownTextBox($event: Event) {
+    context.emit('keydown', $event);
   }
 
-  function onTextBoxValueChange(newValue: string, emit = true) {
-    if (props.modelValue !== newValue) {
-      props.modelValue = newValue;
-      if (emit) {
+  function onKeyUpTextBox($event: Event) {
+    context.emit('keyup', $event);
+  }
+
+  function changeTextBoxValue(newValue: string, showEmitChangeEmit = true) {
+    if (modelValue.value !== newValue) {
+      modelValue.value = newValue;
+      if (showEmitChangeEmit) {
         context.emit('change', newValue);
       }
     }
   }
 
+  function onTextBoxValueChange($event: Event) {
+    const newValue = ($event.target as HTMLInputElement).value;
+    changeTextBoxValue(newValue);
+  }
+
   return {
     hasFocusedTextBox,
     isTextBoxReadonly,
     textBoxClass,
     textBoxPlaceholder,
     textBoxTitle,
+    changeTextBoxValue,
     onBlurTextBox,
     onClickTextBox,
     onFocusTextBox,
     onInput,
+    onKeyDownTextBox,
+    onKeyUpTextBox,
     onMouseDownTextBox,
-    onMouseOverTextBox,
     onTextBoxValueChange,
   };
 }