Эх сурвалжийг харах

!62 fix: 文本组件新增字体加粗选项
Merge pull request !62 from jiangcheng/dev

奔跑的面条 3 жил өмнө
parent
commit
0481d42f36

+ 11 - 0
src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -13,6 +13,16 @@ export const WritingModeObject = {
   [WritingModeEnum.VERTICAL]: 'vertical-rl'
 }
 
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
 export const option = {
   link: '',
   linkHead: 'http://',
@@ -22,6 +32,7 @@ export const option = {
   paddingX: 10,
   paddingY: 10,
   textAlign: 'center', // 水平对齐方式
+  fontWeight: 'normal',
 
   // 边框
   borderWidth: 0,

+ 20 - 2
src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -29,7 +29,13 @@
       <setting-item name="字体大小">
         <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>
-
+      <setting-item name="字体粗细">
+        <n-select
+          v-model:value="optionData.fontWeight"
+          size="small"
+          :options="fontWeightOptions"
+        />
+      </setting-item>
       <setting-item name="X轴内边距">
         <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
       </setting-item>
@@ -81,7 +87,9 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, WritingModeEnum, WritingModeObject } from './config'
+import { option, WritingModeEnum, WritingModeObject,
+  FontWeightEnum,
+  FontWeightObject, } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 const props = defineProps({
   optionData: {
@@ -106,6 +114,16 @@ const verticalOptions = [
     value: WritingModeObject[WritingModeEnum.VERTICAL]
   }
 ]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL],
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD],
+  },
+];
 const handleLinkClick = () => {
   window.open(props.optionData.linkHead + props.optionData.link)
 }

+ 4 - 3
src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -34,7 +34,8 @@ const {
   borderColor,
   borderRadius,
   writingMode,
-  backgroundColor
+  backgroundColor,
+  fontWeight
 } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
@@ -76,12 +77,12 @@ const click = () => {
     font-size: v-bind('fontSize + "px"');
     letter-spacing: v-bind('letterSpacing + "px"');
     writing-mode: v-bind('writingMode');
-
+    font-weight: v-bind('fontWeight');
     border-style: solid;
     border-width: v-bind('borderWidth + "px"');
     border-radius: v-bind('borderRadius + "px"');
     border-color: v-bind('borderColor');
-
+    
     background-color: v-bind('backgroundColor');
   }
 }