1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
| /** 标题栏属性 */
| export interface TitleBarProperty {
| // 背景图
| bgImgUrl: string
| // 偏移
| marginLeft: number
| // 显示位置
| textAlign: 'left' | 'center'
| // 主标题
| title: string
| // 副标题
| description: string
| // 标题大小
| titleSize: number
| // 描述大小
| descriptionSize: number
| // 标题粗细
| titleWeight: number
| // 描述粗细
| descriptionWeight: number
| // 标题颜色
| titleColor: string
| // 描述颜色
| descriptionColor: string
| // 查看更多
| more: {
| // 是否显示查看更多
| show: false
| // 样式选择
| type: 'text' | 'icon' | 'all'
| // 自定义文字
| text: string
| // 链接
| url: string
| }
| // 组件样式
| style: ComponentStyle
| }
|
| // 定义组件
| export const component = {
| id: 'TitleBar',
| name: '标题栏',
| icon: 'material-symbols:line-start',
| property: {
| title: '主标题',
| description: '副标题',
| titleSize: 16,
| descriptionSize: 12,
| titleWeight: 400,
| textAlign: 'left',
| descriptionWeight: 200,
| titleColor: 'rgba(50, 50, 51, 10)',
| descriptionColor: 'rgba(150, 151, 153, 10)',
| more: {
| //查看更多
| show: false,
| type: 'icon',
| text: '查看更多',
| url: ''
| },
| style: {
| bgType: 'color',
| bgColor: '#fff'
| } as ComponentStyle
| }
| } as DiyComponent<TitleBarProperty>
|
|
