消息-A切换-添加选中样式

src/views/message/components/MessageEditor.vue

@@ -20,13 +20,16 @@
             title="截屏"
           />
           <el-dropdown @command="handleFontSizeChange">
-            <el-button type="text" style="font-size: 18px">A</el-button>
+            <el-button type="text" style="font-size: 18px"> A </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="10">10</el-dropdown-item>
+              <el-dropdown-item
-              <el-dropdown-item command="11">11</el-dropdown-item>
+                v-for="size in [10, 11, 12, 13, 14]"
-              <el-dropdown-item command="12">12</el-dropdown-item>
+                :key="size"
-              <el-dropdown-item command="13">13</el-dropdown-item>
+                :command="String(size)"
-              <el-dropdown-item command="14">14</el-dropdown-item>
+                :class="{ 'font-size-selected': currentFontSize === size }"
+              >
+                {{ size }}
+              </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <el-dropdown
@@ -168,6 +171,7 @@ export default {
         13: "large",
         14: "large",
       },
+      currentFontSize: 14,
       // 记录被@的用户
       selectedAtUsers: [],
       meetingModes: meetingModes(),
@@ -197,7 +201,10 @@ export default {
       this.initQuill();
     });
     document.addEventListener("keydown", this.handleGlobalKeydown);
-    window.addEventListener("systemSettingsChanged", this.handleSettingsChanged);
+    window.addEventListener(
+      "systemSettingsChanged",
+      this.handleSettingsChanged
+    );
     this.loadSendModeFromSettings();
   },
 
@@ -206,7 +213,10 @@ export default {
       this.quill = null;
     }
     document.removeEventListener("keydown", this.handleGlobalKeydown);
-    window.removeEventListener("systemSettingsChanged", this.handleSettingsChanged);
+    window.removeEventListener(
+      "systemSettingsChanged",
+      this.handleSettingsChanged
+    );
   },
 
   watch: {
@@ -452,7 +462,8 @@ export default {
 
     // 字号切换 - 调整消息显示区域的文字大小
     handleFontSizeChange(size) {
-      this.$emit("font-size-change", parseInt(size));
+      this.currentFontSize = parseInt(size);
+      this.$emit("font-size-change", this.currentFontSize);
     },
 
     // 发送方式切换
@@ -1319,4 +1330,11 @@ export default {
     opacity: 1;
   }
 }
+
+.el-dropdown-menu {
+  .font-size-selected {
+    color: #009393;
+    font-weight: 500;
+  }
+}
 </style>