Browse Source

设置样式调整组件样式后,拼音开关开了也跟着刷新

标签组件跟随样式改变,行距(一般没有多行)和颜色不跟着变(标签的特性,文字颜色和边框颜色是一起控制的)
zq 1 week ago
parent
commit
937fa768c9

+ 7 - 0
src/components/RichText.vue

@@ -838,6 +838,13 @@ export default {
       }
       editor.selection.collapse(false);
       editor.fire('change'); // 触发内容变化事件,确保内容更新
+
+      if (this.isViewPinyin) {
+        this.$nextTick(() => {
+          let styles = this.getFirstCharStyles();
+          this.$emit('createParsedTextInfoPinyin', null, styles);
+        });
+      }
     },
     setRichTitleFormat(config) {
       if (!this.editorIsInited) {

+ 51 - 2
src/views/book/courseware/create/components/base/label/Label.vue

@@ -18,7 +18,7 @@
               v-else
               :key="'tag-' + i"
               closable
-              :style="{ color: tag.color }"
+              :style="getTagStyle(tag)"
               class="dynamic-tag"
               @close="handleClose(i)"
               @dblclick.native="handleEdit(i)"
@@ -406,6 +406,55 @@ export default {
           console.error(e);
         });
     },
+    // 样式调整
+    getTagStyle(tag) {
+      const style = { color: tag.color };
+
+      if (this.data.unified_attrib) {
+        if (this.data.unified_attrib.font_size) {
+          style['font-size'] = this.data.unified_attrib.font_size;
+        }
+        if (this.data.unified_attrib.font) {
+          style['font-family'] = this.data.unified_attrib.font;
+        }
+        // if (this.data.unified_attrib.text_color) {
+        //   style['color'] = this.data.unified_attrib.text_color;
+        // }
+        // if (this.data.unified_attrib.line_height) {
+        //   style['line-height'] = this.data.unified_attrib.line_height;
+        // }
+        if (this.data.unified_attrib.font_weight) {
+          style['font-weight'] = this.data.unified_attrib.font_weight;
+        }
+      }
+
+      return style;
+    },
+    setRichFormat(type, val) {
+      if (!this.data.unified_attrib) {
+        this.$set(this.data, 'unified_attrib', {});
+      }
+
+      switch (type) {
+        case 'fontSize':
+          this.$set(this.data.unified_attrib, 'font_size', val);
+          break;
+        case 'fontFamily':
+          this.$set(this.data.unified_attrib, 'font', val);
+          break;
+        // case 'color':
+        //   this.$set(this.data.unified_attrib, 'text_color', val);
+        //   break;
+        // case 'lineHeight':
+        //   this.$set(this.data.unified_attrib, 'line_height', parseFloat(val));
+        //   break;
+        case 'bold':
+          this.$set(this.data.unified_attrib, 'font_weight', val ? 'bold' : 'normal');
+          break;
+        default:
+          break;
+      }
+    },
   },
 };
 </script>
@@ -419,7 +468,7 @@ export default {
   :deep .el-tag {
     height: 32px;
     padding: 0 10px;
-    line-height: 30px;
+    line-height: 31px;
     color: var(--color1);
     background-color: #fff;
     border-color: var(--color1);

+ 26 - 2
src/views/book/courseware/preview/components/label/LabelPreview.vue

@@ -2,7 +2,7 @@
   <div class="label-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div class="main">
-      <el-tag v-for="(tag, i) in data.dynamicTags" :key="i" size="medium" :style="{ color: tag.color }">
+      <el-tag v-for="(tag, i) in data.dynamicTags" :key="i" size="medium" :style="getTagStyle(tag)">
         <span v-if="'ZH' == getLang()">
           {{ convertText(tag.name) }}
         </span>
@@ -29,7 +29,31 @@ export default {
       data: getLabelData(),
     };
   },
-  methods: {},
+  methods: {
+    getTagStyle(tag) {
+      const style = { color: tag.color };
+
+      if (this.data.unified_attrib) {
+        if (this.data.unified_attrib.font_size) {
+          style['font-size'] = this.data.unified_attrib.font_size;
+        }
+        if (this.data.unified_attrib.font) {
+          style['font-family'] = this.data.unified_attrib.font;
+        }
+        // if (this.data.unified_attrib.text_color) {
+        //   style['color'] = this.data.unified_attrib.text_color;
+        // }
+        // if (this.data.unified_attrib.line_height) {
+        //   style['line-height'] = this.data.unified_attrib.line_height;
+        // }
+        if (this.data.unified_attrib.font_weight) {
+          style['font-weight'] = this.data.unified_attrib.font_weight;
+        }
+      }
+
+      return style;
+    },
+  },
 };
 </script>