diff --git a/src/packages/components/Informations/Texts/TextCommon/config.ts b/src/packages/components/Informations/Texts/TextCommon/config.ts index e383d299..8b8fcf25 100644 --- a/src/packages/components/Informations/Texts/TextCommon/config.ts +++ b/src/packages/components/Informations/Texts/TextCommon/config.ts @@ -17,7 +17,8 @@ export const option = { dataset: '我是一个文本', fontSize: 20, fontColor: '#ffffffff', - padding: 5, + paddingX: 10, + paddingY: 10, // 字间距 letterSpacing: 5, borderRadius: 5, diff --git a/src/packages/components/Informations/Texts/TextCommon/config.vue b/src/packages/components/Informations/Texts/TextCommon/config.vue index ef99f515..812cb42f 100644 --- a/src/packages/components/Informations/Texts/TextCommon/config.vue +++ b/src/packages/components/Informations/Texts/TextCommon/config.vue @@ -16,17 +16,21 @@ <SettingItem name="文本方向"> <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" /> </SettingItem> + + <SettingItem name="X轴内边距"> + <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number> + </SettingItem> + <SettingItem name="Y轴内边距"> + <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number> + </SettingItem> <SettingItem name="字间距"> <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number> </SettingItem> - <SettingItem name="内边距"> - <n-input-number v-model:value="optionData.padding" size="small" placeholder="输入内边距"></n-input-number> - </SettingItem> - <SettingItem name="颜色"> <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker> </SettingItem> </SettingItemBox> + <SettingItemBox name="背景"> <SettingItem name="背景圆角"> <n-input-number diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue index 153bd598..b5a16500 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.vue +++ b/src/packages/components/Informations/Texts/TextCommon/index.vue @@ -3,13 +3,15 @@ <div :style="` color: ${fontColor}; - padding: ${padding}px; + padding: ${paddingY}px ${paddingX}px; font-size: ${fontSize}px; letter-spacing: ${letterSpacing}px; border-radius: ${borderRadius}px; writing-mode: ${writingMode}; background-color:${backgroundColor}`" - >{{ dataset }}</div> + > + {{ dataset }} + </div> </div> </template> <script setup lang="ts"> @@ -24,13 +26,21 @@ const props = defineProps({ }) const { w, h } = toRefs(props.chartConfig.attr) -const { dataset, fontColor, fontSize, letterSpacing, padding, borderRadius, writingMode, backgroundColor } = toRefs( - props.chartConfig.option -) +const { + dataset, + fontColor, + fontSize, + letterSpacing, + paddingY, + paddingX, + borderRadius, + writingMode, + backgroundColor, +} = toRefs(props.chartConfig.option) </script> <style lang="scss" scoped> -@include go("text-box") { +@include go('text-box') { display: flex; align-items: center; justify-content: center;