feat: 文本组件可进自定义换行

This commit is contained in:
Ming 2023-05-04 17:13:51 +08:00
parent 4f0b57b2af
commit 3f4f1e7fce
2 changed files with 10 additions and 16 deletions

View File

@ -2,7 +2,7 @@
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" size="small"></n-input>
<n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="链接" :alone="true">
@ -30,11 +30,7 @@
<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"
/>
<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>
@ -87,9 +83,7 @@
<script setup lang="ts">
import { PropType } from 'vue'
import { option, WritingModeEnum, WritingModeObject,
FontWeightEnum,
FontWeightObject, } from './config'
import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
@ -117,13 +111,13 @@ const verticalOptions = [
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL],
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD],
},
];
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
const handleLinkClick = () => {
window.open(props.optionData.linkHead + props.optionData.link)
}

View File

@ -1,8 +1,8 @@
<template>
<div class="go-text-box">
<div class="content">
<span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
<span v-else>{{ option.dataset }}</span>
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click"></span>
<span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
</div>
</div>
</template>