feat(组件): 为文本属性组件添加自动清除焦点功能

huanghaiyang · huanghaiyang · commit 1123df2f29d2 · 2025-05-26T21:20:47.000+08:00
在多个文本属性组件(FontFamilyProps, FontSizeProps等)中添加了自动清除焦点的功能，通过调用DOMUtils.clearFocus()方法
在用户完成属性选择后自动清除输入框的焦点，提升用户体验
diff --git a/src/components/ui/right/props/FontFamilyProps.vue b/src/components/ui/right/props/FontFamilyProps.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { FontFamilyList } from "@/styles/ElementStyles";
-import { ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
+import { nextTick, ref, watch } from "vue";
 
 const stageStore = useStageStore();
 const fontFamily = ref(DefaultStage.fontFamily);
@@ -20,6 +21,11 @@ watch(
     fontFamilyMixin.value = newValue;
   },
 );
+
+function setElementsFontFamily(value: string) {
+  stageStore.setElementsFontFamily(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="font-props right-props" v-show="stageStore.fontEnable">
@@ -32,7 +38,7 @@ watch(
           v-model="fontFamily"
           :placeholder="`${fontFamilyMixin ? '混合字体' : fontFamily}`"
           size="small"
-          @change="value => stageStore.setElementsFontFamily(value)"
+          @change="setElementsFontFamily"
           :disabled="stageStore.inputDisabled || !stageStore.fontInputEnable"
         >
           <template #label="{ label, value }">
diff --git a/src/components/ui/right/props/FontLetterSpacingProps.vue b/src/components/ui/right/props/FontLetterSpacingProps.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { FontLetterSpacingList } from "@/styles/ElementStyles";
-import { ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
+import { nextTick, ref, watch } from "vue";
 
 const stageStore = useStageStore();
 const fontLetterSpacing = ref(DefaultStage.fontLetterSpacing);
@@ -20,6 +21,11 @@ watch(
     fontLetterSpacingMixin.value = newValue;
   },
 );
+
+function setElementsFontLetterSpacing(value: number) {
+  stageStore.setElementsFontLetterSpacing(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="font-props right-props" v-show="stageStore.fontEnable">
@@ -33,7 +39,7 @@ watch(
           v-model="fontLetterSpacing"
           :placeholder="`${stageStore.fontLetterSpacingMixin ? '混合字间距' : `${fontLetterSpacing}px`}`"
           size="small"
-          @change="value => stageStore.setElementsFontLetterSpacing(value)"
+          @change="setElementsFontLetterSpacing"
           :disabled="stageStore.inputDisabled || !stageStore.fontLetterSpacingInputEnable"
         >
           <el-option v-for="item in FontLetterSpacingList" :key="item.name" :label="`${item.value}px`" :value="item.value"> {{ item.value }}px </el-option>
@@ -47,7 +53,7 @@ watch(
               :min="1"
               :max="100"
               :precision="0"
-              @change="value => stageStore.setElementsFontLetterSpacing(Number(value))"
+              @change="value => setElementsFontLetterSpacing(Number(value))"
             >
               <template #prepend>自定义</template>
               <template #append>px</template>
diff --git a/src/components/ui/right/props/FontLineHeightProps.vue b/src/components/ui/right/props/FontLineHeightProps.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { DefaultFontSize, FontLineHeightFactorList, FontLineHeightList } from "@/styles/ElementStyles";
-import { ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
+import { nextTick, ref, watch } from "vue";
 
 const stageStore = useStageStore();
 const fontLineHeight = ref(DefaultStage.fontLineHeight);
@@ -36,6 +37,16 @@ watch(
     fontLineHeightFactorInputEnable.value = newValue;
   },
 );
+
+function setElementsFontLineHeightFactor(value: number) {
+  stageStore.setElementsFontLineHeightFactor(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
+
+function setElementsFontLineHeight(value: number) {
+  stageStore.setElementsFontLineHeight(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="font-props right-props" v-show="stageStore.fontEnable">
@@ -59,7 +70,7 @@ watch(
         <el-select
           v-model="fontLineHeightFactor"
           size="small"
-          @change="value => stageStore.setElementsFontLineHeightFactor(value)"
+          @change="setElementsFontLineHeightFactor"
           :disabled="stageStore.inputDisabled || !stageStore.fontLineHeightFactorInputEnable"
         >
           <el-option v-for="item in FontLineHeightFactorList" :key="item.name" :label="`${item.value}x字号`" :value="item.value"> {{ item.value }}x字号 </el-option>
@@ -73,7 +84,7 @@ watch(
               :min="0"
               :max="2"
               :precision="1"
-              @change="value => stageStore.setElementsFontLineHeightFactor(Number(value))"
+              @change="value => setElementsFontLineHeightFactor(Number(value))"
             >
               <template #prepend>自定义</template>
               <template #append>x字号</template>
@@ -85,7 +96,7 @@ watch(
 
     <div class="font-props__row" v-show="!fontLineHeightAutoFit">
       <div class="font-props__row-item">
-        <el-select v-model="fontLineHeight" size="small" @change="value => stageStore.setElementsFontLineHeight(value)" :disabled="stageStore.inputDisabled || !stageStore.fontLineHeightInputEnable">
+        <el-select v-model="fontLineHeight" size="small" @change="setElementsFontLineHeight" :disabled="stageStore.inputDisabled || !stageStore.fontLineHeightInputEnable">
           <el-option v-for="item in FontLineHeightList" :key="item.name" :label="`${item.value}px`" :value="item.value"> {{ item.value }}px </el-option>
           <template #header>
             <el-input
@@ -97,7 +108,7 @@ watch(
               :min="DefaultFontSize"
               :max="100"
               :precision="1"
-              @change="value => stageStore.setElementsFontLineHeight(Number(value))"
+              @change="value => setElementsFontLineHeight(Number(value))"
             >
               <template #prepend>自定义</template>
               <template #append>px</template>
diff --git a/src/components/ui/right/props/FontParagraphSpacingProps.vue b/src/components/ui/right/props/FontParagraphSpacingProps.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { ParagraphSpacingList } from "@/styles/ElementStyles";
-import { ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
+import { nextTick, ref, watch } from "vue";
 
 const stageStore = useStageStore();
 const paragraphSpacing = ref(DefaultStage.paragraphSpacing);
@@ -12,6 +13,11 @@ watch(
     paragraphSpacing.value = newValue;
   },
 );
+
+function setElementsParagraphSpacing(value: number) {
+  stageStore.setElementsParagraphSpacing(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="font-props right-props" v-show="stageStore.fontEnable">
@@ -25,7 +31,7 @@ watch(
           v-model="paragraphSpacing"
           placeholder=""
           size="small"
-          @change="value => stageStore.setElementsParagraphSpacing(value)"
+          @change="setElementsParagraphSpacing"
           :disabled="stageStore.inputDisabled || !stageStore.paragraphSpacingInputEnable"
         >
           <el-option v-for="item in ParagraphSpacingList" :key="item.name" :label="`${item.value}px`" :value="item.value"> {{ item.value }}px </el-option>
@@ -39,7 +45,7 @@ watch(
               :min="0"
               :max="100"
               :precision="0"
-              @change="value => stageStore.setElementsParagraphSpacing(Number(value))"
+              @change="value => setElementsParagraphSpacing(Number(value))"
             >
               <template #prepend>自定义</template>
               <template #append>px</template>
diff --git a/src/components/ui/right/props/FontSizeProps.vue b/src/components/ui/right/props/FontSizeProps.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { FontSizeList } from "@/styles/ElementStyles";
-import { ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
+import { nextTick, ref, watch } from "vue";
 
 const stageStore = useStageStore();
 const fontSize = ref(DefaultStage.fontSize);
@@ -20,6 +21,11 @@ watch(
     fontSizeMixin.value = newValue;
   },
 );
+
+function setElementsFontSize(value: number) {
+  stageStore.setElementsFontSize(value);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="font-props right-props" v-show="stageStore.fontEnable">
@@ -33,7 +39,7 @@ watch(
           v-model="fontSize"
           :placeholder="`${fontSizeMixin ? '混合字号' : `${fontSize}px`}`"
           size="small"
-          @change="value => stageStore.setElementsFontSize(value)"
+          @change="setElementsFontSize"
           :disabled="stageStore.inputDisabled || !stageStore.fontInputEnable"
         >
           <el-option v-for="item in FontSizeList" :key="item.name" :label="`${item.value}px`" :value="item.value"> {{ item.value }}px </el-option>
@@ -47,7 +53,7 @@ watch(
               :min="1"
               :max="100"
               :precision="0"
-              @change="value => stageStore.setElementsFontSize(Number(value))"
+              @change="value => setElementsFontSize(Number(value))"
             >
               <template #prepend>自定义</template>
               <template #append>px</template>
diff --git a/src/components/ui/right/props/StrokeProps.vue b/src/components/ui/right/props/StrokeProps.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { DefaultStage, useStageStore } from "@/stores/stage";
 import { CreatorTypes } from "@/types/Creator";
-import { getStokeTypes } from "@/styles/ElementStyles";
+import { getStokeTypes, StrokeTypes } from "@/styles/ElementStyles";
 import { Plus, Minus } from "@element-plus/icons-vue";
-import { ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
+import DOMUtils from "@/utils/DOMUtils";
 
 const colorPickerRef = ref();
 const stageStore = useStageStore();
@@ -28,6 +29,11 @@ const toggleColorPickerVisible = () => {
   if (!stageStore.strokeInputEnable) return;
   colorPickerRef.value.show();
 };
+
+function setElementsStrokeType(value: StrokeTypes, index: number) {
+  stageStore.setElementsStrokeType(value, index);
+  nextTick(() => DOMUtils.clearFocus());
+}
 </script>
 <template>
   <div class="stroke-props right-props" v-show="stageStore.strokeEnable">
@@ -75,7 +81,7 @@ const toggleColorPickerVisible = () => {
             v-model="stroke.type"
             placeholder="描边类型"
             size="small"
-            @change="value => stageStore.setElementsStrokeType(value, index)"
+            @change="value => setElementsStrokeType(value, index)"
             :disabled="stageStore.inputDisabled || !stageStore.strokeInputEnable"
           >
             <el-option v-for="item in strokeTypes" :key="item.type" :label="item.name" :value="item.type" />
diff --git a/src/utils/DOMUtils.ts b/src/utils/DOMUtils.ts
@@ -54,4 +54,12 @@ export default class DOMUtils {
   static isFocusOnInput(): boolean {
     return document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA";
   }
+
+  /**
+   * 清除焦点
+   */
+  static clearFocus() {
+    window.getSelection()?.removeAllRanges();
+    (document.activeElement as HTMLElement)?.blur();
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -54,4 +54,12 @@ export default class DOMUtils {`
`54`	`54`	`static isFocusOnInput(): boolean {`
`55`	`55`	`return document.activeElement?.tagName === "INPUT" \|\| document.activeElement?.tagName === "TEXTAREA";`
`56`	`56`	`}`
	`57`	`+`
	`58`	`+ /**`
	`59`	`+ * 清除焦点`
	`60`	`+ */`
	`61`	`+ static clearFocus() {`
	`62`	`+ window.getSelection()?.removeAllRanges();`
	`63`	`+ (document.activeElement as HTMLElement)?.blur();`
	`64`	`+ }`
`57`	`65`	`}`