添加文本对齐和文字方向设置，支持换行显示
This commit is contained in:
parent
fb35a8ca39
commit
b0cc476822
@ -17,7 +17,7 @@
|
||||
<el-divider>基本设置</el-divider>
|
||||
|
||||
<el-form-item label="文本内容">
|
||||
<el-input v-model="localConfig.text" type="textarea" :rows="3" placeholder="输入要显示的文本" />
|
||||
<el-input v-model="localConfig.text" type="textarea" :rows="3" placeholder="输入要显示的文本（支持换行）" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>文本样式</el-divider>
|
||||
@ -46,6 +46,24 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>布局设置</el-divider>
|
||||
|
||||
<el-form-item label="文本对齐">
|
||||
<el-select v-model="localConfig.textAlign">
|
||||
<el-option label="左对齐" value="left" />
|
||||
<el-option label="居中对齐" value="center" />
|
||||
<el-option label="右对齐" value="right" />
|
||||
<el-option label="两端对齐" value="justify" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="文字方向">
|
||||
<el-select v-model="localConfig.writingMode">
|
||||
<el-option label="水平显示" value="horizontal" />
|
||||
<el-option label="垂直显示" value="vertical" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>颜色设置</el-divider>
|
||||
|
||||
<el-form-item label="使用渐变色">
|
||||
@ -97,7 +115,7 @@ const props = withDefaults(defineProps<{
|
||||
config: Partial<TextConfig>;
|
||||
}>(), {
|
||||
config: () => ({
|
||||
text: 'Sample Text',
|
||||
text: '示例文本\n支持换行显示',
|
||||
color: '#ffffff',
|
||||
fontSize: 32,
|
||||
fontWeight: 'normal',
|
||||
@ -106,7 +124,9 @@ const props = withDefaults(defineProps<{
|
||||
shadowColor: 'rgba(0,0,0,0.5)',
|
||||
shadowBlur: 4,
|
||||
useGradient: false,
|
||||
gradientColors: ['#ff0000', '#0000ff']
|
||||
gradientColors: ['#ff0000', '#0000ff'],
|
||||
textAlign: 'left',
|
||||
writingMode: 'horizontal'
|
||||
})
|
||||
});
|
||||
|
||||
@ -117,7 +137,7 @@ const emit = defineEmits<{
|
||||
|
||||
// Local config for two-way binding
|
||||
const localConfig = ref<TextConfig>({
|
||||
text: 'Sample Text',
|
||||
text: '示例文本\n支持换行显示',
|
||||
color: '#ffffff',
|
||||
fontSize: 32,
|
||||
fontWeight: 'normal',
|
||||
@ -126,7 +146,9 @@ const localConfig = ref<TextConfig>({
|
||||
shadowColor: 'rgba(0,0,0,0.5)',
|
||||
shadowBlur: 4,
|
||||
useGradient: false,
|
||||
gradientColors: ['#ff0000', '#0000ff']
|
||||
gradientColors: ['#ff0000', '#0000ff'],
|
||||
textAlign: 'left',
|
||||
writingMode: 'horizontal'
|
||||
});
|
||||
|
||||
// Sync with parent config on mount
|
||||
@ -146,7 +168,9 @@ const presets = {
|
||||
gradientColors: ['#3498db', '#9b59b6'],
|
||||
textShadow: true,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
shadowBlur: 10
|
||||
shadowBlur: 10,
|
||||
textAlign: 'center' as const,
|
||||
writingMode: 'horizontal' as const
|
||||
},
|
||||
neon: {
|
||||
text: localConfig.value.text,
|
||||
@ -157,7 +181,9 @@ const presets = {
|
||||
useGradient: false,
|
||||
textShadow: true,
|
||||
shadowColor: 'rgba(57, 255, 20, 0.8)',
|
||||
shadowBlur: 15
|
||||
shadowBlur: 15,
|
||||
textAlign: 'center' as const,
|
||||
writingMode: 'horizontal' as const
|
||||
},
|
||||
retro: {
|
||||
text: localConfig.value.text,
|
||||
@ -168,7 +194,9 @@ const presets = {
|
||||
gradientColors: ['#f39c12', '#e74c3c'],
|
||||
textShadow: true,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowBlur: 6
|
||||
shadowBlur: 6,
|
||||
textAlign: 'left' as const,
|
||||
writingMode: 'horizontal' as const
|
||||
},
|
||||
minimal: {
|
||||
text: localConfig.value.text,
|
||||
@ -177,7 +205,9 @@ const presets = {
|
||||
fontWeight: 'lighter',
|
||||
color: '#ffffff',
|
||||
useGradient: false,
|
||||
textShadow: false
|
||||
textShadow: false,
|
||||
textAlign: 'left' as const,
|
||||
writingMode: 'horizontal' as const
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="text-widget" :style="textStyle">
|
||||
{{ config.text }}
|
||||
<div class="text-content" v-html="formattedText"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
|
||||
config: Partial<TextConfig>;
|
||||
}>(), {
|
||||
config: () => ({
|
||||
text: 'Sample Text',
|
||||
text: '示例文本\n支持换行显示',
|
||||
color: '#ffffff',
|
||||
fontSize: 32,
|
||||
fontWeight: 'normal',
|
||||
@ -22,18 +22,36 @@ const props = withDefaults(defineProps<{
|
||||
shadowColor: 'rgba(0,0,0,0.5)',
|
||||
shadowBlur: 4,
|
||||
useGradient: false,
|
||||
gradientColors: ['#ff0000', '#0000ff']
|
||||
gradientColors: ['#ff0000', '#0000ff'],
|
||||
textAlign: 'left',
|
||||
writingMode: 'horizontal'
|
||||
})
|
||||
});
|
||||
|
||||
// 格式化文本内容，处理换行
|
||||
const formattedText = computed(() => {
|
||||
const text = props.config.text || '示例文本\n支持换行显示';
|
||||
// 将换行符转换为 <br> 标签
|
||||
return text.replace(/\n/g, '<br>');
|
||||
});
|
||||
|
||||
// Computed styles for the text
|
||||
const textStyle = computed(() => {
|
||||
const style: Record<string, string> = {
|
||||
fontSize: `${props.config.fontSize || 32}px`,
|
||||
fontFamily: props.config.fontFamily || 'Arial',
|
||||
fontWeight: props.config.fontWeight || 'normal'
|
||||
fontWeight: props.config.fontWeight || 'normal',
|
||||
textAlign: props.config.textAlign || 'left'
|
||||
};
|
||||
|
||||
// 根据文字显示方向设置样式
|
||||
if (props.config.writingMode === 'vertical') {
|
||||
style.writingMode = 'vertical-rl';
|
||||
style.textOrientation = 'mixed';
|
||||
} else {
|
||||
style.writingMode = 'horizontal-tb';
|
||||
}
|
||||
|
||||
// Apply gradient or solid color
|
||||
if (props.config.useGradient && (props.config.gradientColors || []).length >= 2) {
|
||||
const colors = props.config.gradientColors || ['#ff0000', '#0000ff'];
|
||||
@ -61,4 +79,10 @@ const textStyle = computed(() => {
|
||||
font-family: Arial, sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,11 +10,13 @@ export interface TextConfig {
|
||||
shadowBlur: number;
|
||||
useGradient: boolean;
|
||||
gradientColors: string[];
|
||||
textAlign: 'left' | 'center' | 'right' | 'justify';
|
||||
writingMode: 'horizontal' | 'vertical';
|
||||
}
|
||||
|
||||
// 文本小组件默认配置
|
||||
export const defaultConfig: TextConfig = {
|
||||
text: 'Sample Text',
|
||||
text: '示例文本\n支持换行显示',
|
||||
color: '#ffffff',
|
||||
fontSize: 32,
|
||||
fontWeight: 'normal',
|
||||
@ -23,5 +25,7 @@ export const defaultConfig: TextConfig = {
|
||||
shadowColor: 'rgba(0,0,0,0.5)',
|
||||
shadowBlur: 4,
|
||||
useGradient: false,
|
||||
gradientColors: ['#ff0000', '#0000ff']
|
||||
gradientColors: ['#ff0000', '#0000ff'],
|
||||
textAlign: 'left',
|
||||
writingMode: 'horizontal'
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user