feat: 新增文本字体加粗

This commit is contained in:
蒋承 2022-09-27 10:56:26 +08:00
parent 3c39d5db9d
commit 8d36a857eb
3 changed files with 35 additions and 5 deletions

View File

@ -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,

View File

@ -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)
}

View File

@ -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');
}
}