mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-14 11:32:52 +00:00
🆕 长文本添加背景,填充, 圆角属性设置
This commit is contained in:
parent
158aedf317
commit
e24cf191cd
@ -3,7 +3,18 @@ import styles from './index.less';
|
|||||||
import { ILongTextConfig } from './schema';
|
import { ILongTextConfig } from './schema';
|
||||||
import logo from '@/assets/08-长文本.png';
|
import logo from '@/assets/08-长文本.png';
|
||||||
const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
||||||
const { text, fontSize, color, indent, lineHeight, textAlign, isTpl } = props;
|
const {
|
||||||
|
text,
|
||||||
|
fontSize,
|
||||||
|
color,
|
||||||
|
indent,
|
||||||
|
lineHeight,
|
||||||
|
textAlign,
|
||||||
|
bgColor,
|
||||||
|
padding,
|
||||||
|
radius,
|
||||||
|
isTpl,
|
||||||
|
} = props;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isTpl ? (
|
{isTpl ? (
|
||||||
@ -13,7 +24,16 @@ const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
|||||||
) : (
|
) : (
|
||||||
<div
|
<div
|
||||||
className={styles.textWrap}
|
className={styles.textWrap}
|
||||||
style={{ color, textIndent: indent + 'px', fontSize, lineHeight, textAlign }}
|
style={{
|
||||||
|
color,
|
||||||
|
textIndent: indent + 'px',
|
||||||
|
fontSize,
|
||||||
|
lineHeight,
|
||||||
|
textAlign,
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
padding,
|
||||||
|
borderRadius: radius,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{text}
|
{text}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -23,6 +23,9 @@ export interface ILongTextConfig {
|
|||||||
indent: TNumberDefaultType;
|
indent: TNumberDefaultType;
|
||||||
lineHeight: TNumberDefaultType;
|
lineHeight: TNumberDefaultType;
|
||||||
textAlign: TSelectDefaultType<TLongTextSelectKeyType>;
|
textAlign: TSelectDefaultType<TLongTextSelectKeyType>;
|
||||||
|
bgColor: TColorDefaultType;
|
||||||
|
padding: TNumberDefaultType;
|
||||||
|
radius: TNumberDefaultType;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ILongTextSchema {
|
export interface ILongTextSchema {
|
||||||
@ -78,6 +81,21 @@ const LongText: ILongTextSchema = {
|
|||||||
type: 'Number',
|
type: 'Number',
|
||||||
step: 0.1,
|
step: 0.1,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'bgColor',
|
||||||
|
name: '背景颜色',
|
||||||
|
type: 'Color',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'padding',
|
||||||
|
name: '填充间距',
|
||||||
|
type: 'Number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'radius',
|
||||||
|
name: '背景圆角',
|
||||||
|
type: 'Number',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
config: {
|
config: {
|
||||||
text: '我是长文本有一段故事,dooring可视化编辑器无限可能,赶快来体验吧,骚年们,奥利给~',
|
text: '我是长文本有一段故事,dooring可视化编辑器无限可能,赶快来体验吧,骚年们,奥利给~',
|
||||||
@ -86,6 +104,9 @@ const LongText: ILongTextSchema = {
|
|||||||
indent: 20,
|
indent: 20,
|
||||||
lineHeight: 1.8,
|
lineHeight: 1.8,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
|
bgColor: 'rgba(255,255,255,0)',
|
||||||
|
padding: 0,
|
||||||
|
radius: 0,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user