diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx
index 9b96511ca3..df9edc6c5a 100644
--- a/packages/devui-vue/devui/mention/src/mention.tsx
+++ b/packages/devui-vue/devui/mention/src/mention.tsx
@@ -27,7 +27,11 @@ export default defineComponent({
     const instance = getCurrentInstance();
 
     const handleUpdate = debounce((val: string) => {
-      if (props.trigger.includes(val[0])) {
+      const wordsWithoutSpace = val.split(' ');
+      const lastWordIndex = wordsWithoutSpace.length - 1;
+      const lastWord = wordsWithoutSpace[lastWordIndex];
+      const shouldBeActive = lastWord && props.trigger.includes(lastWord[0]);
+      if (shouldBeActive) {
         showSuggestions.value = true;
         if (props.position === 'top') {
           setTimeout(() => {
@@ -38,12 +42,12 @@ export default defineComponent({
         filteredSuggestions.value = (suggestions.value as IMentionSuggestionItem[]).filter((item: IMentionSuggestionItem) =>
           String(item[props.dmValueParse.value as keyof IMentionSuggestionItem])
             .toLocaleLowerCase()
-            .includes(val.slice(1).toLocaleLowerCase())
+            .includes(lastWord.slice(1).toLocaleLowerCase())
         );
       } else {
         showSuggestions.value = false;
       }
-      emit('change', val.slice(1));
+      emit('change', lastWord.slice(1));
     }, 300);
 
     const handleBlur = (e: Event) => {
@@ -67,7 +71,12 @@ export default defineComponent({
       e.stopPropagation();
       e.preventDefault();
       showSuggestions.value = false;
-      textContext.value = textContext.value.substring(0, 1) + item[props.dmValueParse.value as keyof IMentionSuggestionItem];
+      const wordsWithoutSpace = textContext.value.split(' ');
+      const lastWordIndex = wordsWithoutSpace.length - 1;
+      const lastWord = wordsWithoutSpace[lastWordIndex];
+      const selectedWord = item[props.dmValueParse.value as keyof IMentionSuggestionItem];
+      wordsWithoutSpace[lastWordIndex] = `${lastWord[0]}${selectedWord}`;
+      textContext.value = wordsWithoutSpace.join(' ');
     };
 
     const arrowKeyDown = (e: KeyboardEvent) => {
@@ -102,9 +111,11 @@ export default defineComponent({
           e.stopPropagation();
           e.preventDefault();
           showSuggestions.value = false;
-          textContext.value =
-            textContext.value.substring(0, 1) +
-            filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
+          const wordsWithoutSpace = textContext.value.split(' ');
+          const lastWordIndex = wordsWithoutSpace.length - 1;
+          const selectedWord = filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
+          wordsWithoutSpace[lastWordIndex] = `@${selectedWord}`;
+          textContext.value = wordsWithoutSpace.join(' ');
           emit('select', filteredSuggestions.value[currentIndex.value]);
         }
       }
diff --git a/packages/devui-vue/docs/components/mention/index.md b/packages/devui-vue/docs/components/mention/index.md
index c267c9a0a4..7a20cf0925 100644
--- a/packages/devui-vue/docs/components/mention/index.md
+++ b/packages/devui-vue/docs/components/mention/index.md
@@ -9,6 +9,7 @@
 ### 基本用法
 
 展示提及组件的基本使用方法。
+
 :::demo
 
 ```vue
@@ -18,53 +19,63 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-const suggestions = [
-  {
-    id: 1,
-    value: 'javascript',
-  },
-  {
-    id: 2,
-    value: 'Vue',
-  },
-  {
-    id: 3,
-    value: 'React',
-  },
-  {
-    id: 4,
-    value: 'Angular',
-  },
-  {
-    id: 5,
-    value: 'Html',
-  },
-  {
-    id: 6,
-    value: 'Css',
-  },
-  {
-    id: 7,
-    value: 'Koa',
-  },
-  {
-    id: 8,
-    value: 'Express',
+<script>
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const suggestions = ref([
+      {
+        id: 1,
+        value: 'javascript',
+      },
+      {
+        id: 2,
+        value: 'Vue',
+      },
+      {
+        id: 3,
+        value: 'React',
+      },
+      {
+        id: 4,
+        value: 'Angular',
+      },
+      {
+        id: 5,
+        value: 'Html',
+      },
+      {
+        id: 6,
+        value: 'Css',
+      },
+      {
+        id: 7,
+        value: 'Koa',
+      },
+      {
+        id: 8,
+        value: 'Express',
+      },
+      {
+        id: 9,
+        value: 'Nuxt',
+      },
+      {
+        id: 10,
+        value: 'Next',
+      },
+    ]);
+
+    const handleSelect = (val) => {
+      console.log(val);
+    };
+
+    return {
+      suggestions,
+      handleSelect,
+    };
   },
-  {
-    id: 9,
-    value: 'Nuxt',
-  },
-  {
-    id: 10,
-    value: 'Next',
-  },
-];
-
-const handleSelect = (val) => {
-  console.log(val);
-};
+});
 </script>
 ```
 
@@ -82,50 +93,59 @@ const handleSelect = (val) => {
   </div>
 </template>
 
-<script lang="ts" setup>
-const triggers = ['@', '#'];
-const suggestions = [
-  {
-    id: 1,
-    value: 'javascript',
-  },
-  {
-    id: 2,
-    value: 'Vue',
-  },
-  {
-    id: 3,
-    value: 'React',
-  },
-  {
-    id: 4,
-    value: 'Angular',
-  },
-  {
-    id: 5,
-    value: 'Html',
+<script>
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const triggers = ref(['@', '#']);
+    const suggestions = ref([
+      {
+        id: 1,
+        value: 'javascript',
+      },
+      {
+        id: 2,
+        value: 'Vue',
+      },
+      {
+        id: 3,
+        value: 'React',
+      },
+      {
+        id: 4,
+        value: 'Angular',
+      },
+      {
+        id: 5,
+        value: 'Html',
+      },
+      {
+        id: 6,
+        value: 'Css',
+      },
+      {
+        id: 7,
+        value: 'Koa',
+      },
+      {
+        id: 8,
+        value: 'Express',
+      },
+      {
+        id: 9,
+        value: 'Nuxt',
+      },
+      {
+        id: 10,
+        value: 'Next',
+      },
+    ]);
+    return {
+      triggers,
+      suggestions,
+    };
   },
-  {
-    id: 6,
-    value: 'Css',
-  },
-  {
-    id: 7,
-    value: 'Koa',
-  },
-  {
-    id: 8,
-    value: 'Express',
-  },
-  {
-    id: 9,
-    value: 'Nuxt',
-  },
-  {
-    id: 10,
-    value: 'Next',
-  },
-];
+});
 </script>
 ```
 
@@ -143,69 +163,80 @@ const suggestions = [
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const loading = ref(true);
-const suggestions = ref([]);
-
-const onSearchChange = (val: string) => {
-  loading.value = true;
-  fetchSuggestions(val, (result) => {
-    suggestions.value = result;
-    loading.value = false;
-  });
-};
-const fetchSuggestions = (value: string, callback: (suggestions: string[]) => void) => {
-  const users = [
-    {
-      id: 1,
-      value: 'javascript',
-    },
-    {
-      id: 2,
-      value: 'Vue',
-    },
-    {
-      id: 3,
-      value: 'React',
-    },
-    {
-      id: 4,
-      value: 'Angular',
-    },
-    {
-      id: 5,
-      value: 'Html',
-    },
-    {
-      id: 6,
-      value: 'Css',
-    },
-    {
-      id: 7,
-      value: 'Koa',
-    },
-    {
-      id: 8,
-      value: 'Express',
-    },
-    {
-      id: 9,
-      value: 'Nuxt',
-    },
-    {
-      id: 10,
-      value: 'Next',
-    },
-  ];
-  setTimeout(() => {
-    const result = users.filter((item) => {
-      return item.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
-    });
-    return callback(result);
-  }, 1000);
-};
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const loading = ref(true);
+    const suggestions = ref([]);
+
+    const fetchSuggestions = (value: string, callback: (suggestions: string[]) => void) => {
+      const users = [
+        {
+          id: 1,
+          value: 'javascript',
+        },
+        {
+          id: 2,
+          value: 'Vue',
+        },
+        {
+          id: 3,
+          value: 'React',
+        },
+        {
+          id: 4,
+          value: 'Angular',
+        },
+        {
+          id: 5,
+          value: 'Html',
+        },
+        {
+          id: 6,
+          value: 'Css',
+        },
+        {
+          id: 7,
+          value: 'Koa',
+        },
+        {
+          id: 8,
+          value: 'Express',
+        },
+        {
+          id: 9,
+          value: 'Nuxt',
+        },
+        {
+          id: 10,
+          value: 'Next',
+        },
+      ];
+
+      setTimeout(() => {
+        const result = users.filter((item) => {
+          return item.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
+        });
+        return callback(result);
+      }, 1000);
+    };
+
+    const onSearchChange = (val) => {
+      loading.value = true;
+      fetchSuggestions(val, (result) => {
+        suggestions.value = result;
+        loading.value = false;
+      });
+    };
+
+    return {
+      loading,
+      suggestions,
+      onSearchChange,
+    };
+  },
+});
 </script>
 ```
 
@@ -223,25 +254,34 @@ const fetchSuggestions = (value: string, callback: (suggestions: string[]) => vo
   </div>
 </template>
 
-<script lang="ts" setup>
-const suggestions = [
-  {
-    id: 1,
-    value: 'javascript',
-  },
-  {
-    id: 2,
-    value: 'Vue',
-  },
-  {
-    id: 3,
-    value: 'React',
+<script>
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const suggestions = ref([
+      {
+        id: 1,
+        value: 'javascript',
+      },
+      {
+        id: 2,
+        value: 'Vue',
+      },
+      {
+        id: 3,
+        value: 'React',
+      },
+      {
+        id: 4,
+        value: 'Angular',
+      },
+    ]);
+
+    return {
+      suggestions,
+    };
   },
-  {
-    id: 4,
-    value: 'Angular',
-  },
-];
+});
 </script>
 ```
 
@@ -264,37 +304,45 @@ const suggestions = [
   </div>
 </template>
 
-<script lang="ts" setup>
-const suggestions = [
-  {
-    name: 'C#',
-    id: 1,
-  },
-  {
-    name: 'C',
-    id: 2,
-  },
-  {
-    name: 'C++',
-    id: 3,
-  },
-  {
-    name: 'Python',
-    id: 4,
-  },
-  {
-    name: 'Java',
-    id: 5,
-  },
-  {
-    name: 'JavaScript',
-    id: 6,
-  },
-  {
-    name: 'Go',
-    id: 7,
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const suggestions = ref([
+      {
+        name: 'C#',
+        id: 1,
+      },
+      {
+        name: 'C',
+        id: 2,
+      },
+      {
+        name: 'C++',
+        id: 3,
+      },
+      {
+        name: 'Python',
+        id: 4,
+      },
+      {
+        name: 'Java',
+        id: 5,
+      },
+      {
+        name: 'JavaScript',
+        id: 6,
+      },
+      {
+        name: 'Go',
+        id: 7,
+      },
+    ]);
+    return {
+      suggestions,
+    };
   },
-];
+});
 </script>
 ```
 
@@ -302,15 +350,15 @@ const suggestions = [
 
 ### Mention 参数
 
-| 参数名                 | 类型                          | 默认                      | 说明                                       | 跳转 Demo                 |
-| :--------------------- | :---------------------------- | :------------------------ | :----------------------------------------- | :------------------------ |
-| suggestions     | array                         | -                         | 必填，建议数据源                           | [基本用法](#基本用法)     |
-| position        | top / bottom                  | bottom                    | 可选，建议框位置                           | [向上展开](#向上展开)     |
-| notFoundContent | string                        | No suggestion matched     | 可选，用于在没有匹配到数据的时候的提示     | -                         |
-| loading         | boolean                       | false                     | 可选，异步加载数据源的时候是否显示加载效果 | [异步加载](#异步加载)     |
-| dmValueParse           | `{value: string, id: string}` | `{value: value, id: id}` | 可选，建议选项的取值方法                   | [异步加载](#异步加载)     |
+| 参数名          | 类型                          | 默认                     | 说明                                       | 跳转 Demo                 |
+| :-------------- | :---------------------------- | :----------------------- | :----------------------------------------- | :------------------------ |
+| suggestions     | array                         | -                        | 必填，建议数据源                           | [基本用法](#基本用法)     |
+| position        | top / bottom                  | bottom                   | 可选，建议框位置                           | [向上展开](#向上展开)     |
+| notFoundContent | string                        | No suggestion matched    | 可选，用于在没有匹配到数据的时候的提示     | -                         |
+| loading         | boolean                       | false                    | 可选，异步加载数据源的时候是否显示加载效果 | [异步加载](#异步加载)     |
+| dmValueParse    | `{value: string, id: string}` | `{value: value, id: id}` | 可选，建议选项的取值方法                   | [异步加载](#异步加载)     |
 | trigger         | string[]                      | `['@']`                  | 可选，触发组件的前缀符                     | [自定义前缀](#自定义前缀) |
-|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
+| show-glow-style | `boolean`                     | true                     | 可选，是否展示悬浮发光效果                 |                           |
 
 ### Mention 事件