diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx
index 181cc9732e..adc931280e 100644
--- a/packages/devui-vue/devui/mention/src/mention.tsx
+++ b/packages/devui-vue/devui/mention/src/mention.tsx
@@ -46,10 +46,14 @@ export default defineComponent({
       emit('change', val.slice(1));
     }, 300);
 
-    const handleBlur = () => {
-      setTimeout(() => {
-        showSuggestions.value = false;
-      }, 100);
+    const handleBlur = (e: Event) => {
+      const { target } = e;
+      const ele = document.querySelector('.devui-mention');
+      if (!(ele?.contains(target as Element))) {
+        setTimeout(() => {
+          showSuggestions.value = false;
+        }, 100);
+      }
     };
 
     const handleFocus = () => {
@@ -116,17 +120,19 @@ export default defineComponent({
     onMounted(() => {
       window.addEventListener('keydown', arrowKeyDown);
       window.addEventListener('keydown', enterKeyDown);
+      document.addEventListener('click', handleBlur);
     });
 
     onUnmounted(() => {
       window.removeEventListener('keydown', arrowKeyDown);
       window.removeEventListener('keydown', enterKeyDown);
+      document.removeEventListener('click', handleBlur);
     });
 
     return () => {
       return (
         <div class={ns.b()}>
-          <d-textarea v-model={textContext.value} onUpdate={handleUpdate} onBlur={handleBlur} onFocus={handleFocus}></d-textarea>
+          <d-textarea v-model={textContext.value} onUpdate={handleUpdate} onFocus={handleFocus}></d-textarea>
           {showSuggestions.value ? (
             loading.value ? (
               <div class={[`${ns.e('suggestions')} ${ns.e('suggestions-loading')}`]}>加载中... </div>