@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/designer-components.css +1 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.mjs +118984 -0
- package/package.json +1 -1
- package/src/components/EbizAvatar.vue +116 -0
- package/src/components/EbizEmployeeInfo.vue +139 -0
- package/src/components/EbizStatistic.vue +150 -0
- package/src/components/EbizTabPanel.vue +23 -0
- package/src/components/EbizTabs.vue +143 -0
- package/src/components/EbizTitle.vue +37 -36
- package/src/components/TdesignAlert.vue +116 -0
- package/src/components/TdesignTimeline.vue +58 -0
- package/src/components/TdesignTimelineItem.vue +72 -0
- package/src/components/TdesignWatermark.vue +108 -0
- package/src/index.js +31 -0
- package/src/router/index.js +42 -0
- package/src/views/EbizAvatar.vue +224 -0
- package/src/views/EbizEmployeeInfo.vue +250 -0
- package/src/views/Home.vue +8 -1
- package/src/views/StatisticDemo.vue +191 -0
- package/src/views/TabsDemo.vue +283 -0
- package/src/views/TdesignAlert.vue +99 -0
- package/src/views/TimelineDemo.vue +161 -0
- package/src/views/WatermarkDemo.vue +86 -0
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tabs-demo">
|
|
3
|
+
<h1>TDesign Tabs 组件示例</h1>
|
|
4
|
+
|
|
5
|
+
<h2>原生TDesign选项卡</h2>
|
|
6
|
+
<div class="demo-section">
|
|
7
|
+
<t-tabs :default-value="1">
|
|
8
|
+
<t-tab-panel :value="1" label="选项卡1">
|
|
9
|
+
<p style="margin: 20px">选项卡1内容区</p>
|
|
10
|
+
</t-tab-panel>
|
|
11
|
+
<t-tab-panel :value="2" label="选项卡2">
|
|
12
|
+
<p style="margin: 20px">选项卡2内容区</p>
|
|
13
|
+
</t-tab-panel>
|
|
14
|
+
<t-tab-panel :value="3" label="选项卡3">
|
|
15
|
+
<p style="margin: 20px">选项卡3内容区</p>
|
|
16
|
+
</t-tab-panel>
|
|
17
|
+
</t-tabs>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<h2>基础选项卡</h2>
|
|
21
|
+
<div class="demo-section">
|
|
22
|
+
<EbizTabs v-model="activeTab">
|
|
23
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
24
|
+
选项卡1内容区
|
|
25
|
+
</EbizTabPanel>
|
|
26
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
27
|
+
选项卡2内容区
|
|
28
|
+
</EbizTabPanel>
|
|
29
|
+
<EbizTabPanel value="third" label="选项卡3">
|
|
30
|
+
选项卡3内容区
|
|
31
|
+
</EbizTabPanel>
|
|
32
|
+
</EbizTabs>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<h2>不同位置的选项卡</h2>
|
|
36
|
+
<div class="demo-section">
|
|
37
|
+
<div class="placement-demo">
|
|
38
|
+
<h3>顶部选项卡</h3>
|
|
39
|
+
<EbizTabs placement="top">
|
|
40
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
41
|
+
顶部选项卡内容
|
|
42
|
+
</EbizTabPanel>
|
|
43
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
44
|
+
顶部选项卡内容
|
|
45
|
+
</EbizTabPanel>
|
|
46
|
+
</EbizTabs>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="placement-demo">
|
|
50
|
+
<h3>左侧选项卡</h3>
|
|
51
|
+
<EbizTabs placement="left">
|
|
52
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
53
|
+
左侧选项卡内容
|
|
54
|
+
</EbizTabPanel>
|
|
55
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
56
|
+
左侧选项卡内容
|
|
57
|
+
</EbizTabPanel>
|
|
58
|
+
</EbizTabs>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="placement-demo">
|
|
62
|
+
<h3>右侧选项卡</h3>
|
|
63
|
+
<EbizTabs placement="right">
|
|
64
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
65
|
+
右侧选项卡内容
|
|
66
|
+
</EbizTabPanel>
|
|
67
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
68
|
+
右侧选项卡内容
|
|
69
|
+
</EbizTabPanel>
|
|
70
|
+
</EbizTabs>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="placement-demo">
|
|
74
|
+
<h3>底部选项卡</h3>
|
|
75
|
+
<EbizTabs placement="bottom">
|
|
76
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
77
|
+
底部选项卡内容
|
|
78
|
+
</EbizTabPanel>
|
|
79
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
80
|
+
底部选项卡内容
|
|
81
|
+
</EbizTabPanel>
|
|
82
|
+
</EbizTabs>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<h2>卡片风格选项卡</h2>
|
|
87
|
+
<div class="demo-section">
|
|
88
|
+
<EbizTabs theme="card">
|
|
89
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
90
|
+
卡片风格选项卡内容
|
|
91
|
+
</EbizTabPanel>
|
|
92
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
93
|
+
卡片风格选项卡内容
|
|
94
|
+
</EbizTabPanel>
|
|
95
|
+
<EbizTabPanel value="third" label="选项卡3">
|
|
96
|
+
卡片风格选项卡内容
|
|
97
|
+
</EbizTabPanel>
|
|
98
|
+
</EbizTabs>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<h2>尺寸大小</h2>
|
|
102
|
+
<div class="demo-section">
|
|
103
|
+
<div class="size-demo">
|
|
104
|
+
<h3>中尺寸(默认)</h3>
|
|
105
|
+
<EbizTabs size="medium">
|
|
106
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
107
|
+
中尺寸选项卡内容
|
|
108
|
+
</EbizTabPanel>
|
|
109
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
110
|
+
中尺寸选项卡内容
|
|
111
|
+
</EbizTabPanel>
|
|
112
|
+
</EbizTabs>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="size-demo">
|
|
116
|
+
<h3>大尺寸</h3>
|
|
117
|
+
<EbizTabs size="large">
|
|
118
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
119
|
+
大尺寸选项卡内容
|
|
120
|
+
</EbizTabPanel>
|
|
121
|
+
<EbizTabPanel value="second" label="选项卡2">
|
|
122
|
+
大尺寸选项卡内容
|
|
123
|
+
</EbizTabPanel>
|
|
124
|
+
</EbizTabs>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<h2>可增加的选项卡</h2>
|
|
129
|
+
<div class="demo-section">
|
|
130
|
+
<EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
|
|
131
|
+
<EbizTabPanel
|
|
132
|
+
v-for="(item, index) in addableTabs"
|
|
133
|
+
:key="item.value"
|
|
134
|
+
:value="item.value"
|
|
135
|
+
:label="item.label"
|
|
136
|
+
:removable="index !== 0"
|
|
137
|
+
@remove="onRemoveTab(item)"
|
|
138
|
+
>
|
|
139
|
+
{{ item.content }}
|
|
140
|
+
</EbizTabPanel>
|
|
141
|
+
</EbizTabs>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<h2>可拖拽排序的选项卡</h2>
|
|
145
|
+
<div class="demo-section">
|
|
146
|
+
<EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
|
|
147
|
+
<EbizTabPanel
|
|
148
|
+
v-for="item in dragSortTabs"
|
|
149
|
+
:key="item.value"
|
|
150
|
+
:value="item.value"
|
|
151
|
+
:label="item.label"
|
|
152
|
+
>
|
|
153
|
+
{{ item.content }}
|
|
154
|
+
</EbizTabPanel>
|
|
155
|
+
</EbizTabs>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<h2>禁用状态</h2>
|
|
159
|
+
<div class="demo-section">
|
|
160
|
+
<EbizTabs>
|
|
161
|
+
<EbizTabPanel value="first" label="选项卡1">
|
|
162
|
+
选项卡1内容
|
|
163
|
+
</EbizTabPanel>
|
|
164
|
+
<EbizTabPanel value="second" label="选项卡2" disabled>
|
|
165
|
+
选项卡2内容（禁用状态）
|
|
166
|
+
</EbizTabPanel>
|
|
167
|
+
<EbizTabPanel value="third" label="选项卡3">
|
|
168
|
+
选项卡3内容
|
|
169
|
+
</EbizTabPanel>
|
|
170
|
+
</EbizTabs>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</template>
|
|
174
|
+
|
|
175
|
+
<script setup>
|
|
176
|
+
import { ref, onMounted } from 'vue';
|
|
177
|
+
import { EbizTabs, EbizTabPanel } from '../index.js';
|
|
178
|
+
import { TabPanel } from 'tdesign-vue-next';
|
|
179
|
+
|
|
180
|
+
// 基础选项卡
|
|
181
|
+
const activeTab = ref('first');
|
|
182
|
+
|
|
183
|
+
// 可增加选项卡
|
|
184
|
+
const addableTabIndex = ref(3);
|
|
185
|
+
const addableActiveTab = ref('tab0');
|
|
186
|
+
const addableTabs = ref([
|
|
187
|
+
{
|
|
188
|
+
value: 'tab0',
|
|
189
|
+
label: '首页',
|
|
190
|
+
content: '首页内容'
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
value: 'tab1',
|
|
194
|
+
label: '选项卡1',
|
|
195
|
+
content: '选项卡1内容'
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
value: 'tab2',
|
|
199
|
+
label: '选项卡2',
|
|
200
|
+
content: '选项卡2内容'
|
|
201
|
+
}
|
|
202
|
+
]);
|
|
203
|
+
|
|
204
|
+
// 可拖拽排序选项卡
|
|
205
|
+
const dragSortTab = ref('drag0');
|
|
206
|
+
const dragSortTabs = ref([
|
|
207
|
+
{
|
|
208
|
+
value: 'drag0',
|
|
209
|
+
label: '选项1',
|
|
210
|
+
content: '选项1内容'
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
value: 'drag1',
|
|
214
|
+
label: '选项2',
|
|
215
|
+
content: '选项2内容'
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
value: 'drag2',
|
|
219
|
+
label: '选项3',
|
|
220
|
+
content: '选项3内容'
|
|
221
|
+
}
|
|
222
|
+
]);
|
|
223
|
+
|
|
224
|
+
// 添加选项卡
|
|
225
|
+
const onAddTab = () => {
|
|
226
|
+
const value = `tab${addableTabIndex.value}`;
|
|
227
|
+
addableTabs.value.push({
|
|
228
|
+
value,
|
|
229
|
+
label: `选项卡${addableTabIndex.value}`,
|
|
230
|
+
content: `选项卡${addableTabIndex.value}内容`
|
|
231
|
+
});
|
|
232
|
+
addableActiveTab.value = value;
|
|
233
|
+
addableTabIndex.value += 1;
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
// 删除选项卡
|
|
237
|
+
const onRemoveTab = (item) => {
|
|
238
|
+
const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
|
|
239
|
+
if (index !== -1) {
|
|
240
|
+
addableTabs.value.splice(index, 1);
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
// 处理拖拽排序
|
|
245
|
+
const onDragSort = (context) => {
|
|
246
|
+
// 根据拖拽结果重新排序
|
|
247
|
+
dragSortTabs.value = context.currentData;
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
// 检查tdesign-vue-next依赖是否已正确安装
|
|
251
|
+
onMounted(() => {
|
|
252
|
+
console.log('TabsDemo mounted');
|
|
253
|
+
});
|
|
254
|
+
</script>
|
|
255
|
+
|
|
256
|
+
<style lang="less" scoped>
|
|
257
|
+
.tabs-demo {
|
|
258
|
+
padding: 20px;
|
|
259
|
+
|
|
260
|
+
.demo-section {
|
|
261
|
+
margin-bottom: 30px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.placement-demo, .size-demo {
|
|
265
|
+
margin-bottom: 20px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
h1 {
|
|
269
|
+
font-size: 24px;
|
|
270
|
+
margin-bottom: 20px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
h2 {
|
|
274
|
+
font-size: 20px;
|
|
275
|
+
margin: 30px 0 15px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
h3 {
|
|
279
|
+
font-size: 16px;
|
|
280
|
+
margin-bottom: 10px;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
</style>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="alert-demo">
|
|
3
|
+
<h1>TDesign Alert 组件示例</h1>
|
|
4
|
+
|
|
5
|
+
<h2>基础提示</h2>
|
|
6
|
+
<div class="demo-section">
|
|
7
|
+
<EbizAlert message="这是一条普通信息提示" />
|
|
8
|
+
<EbizAlert theme="success" message="这是一条成功提示" />
|
|
9
|
+
<EbizAlert theme="warning" message="这是一条警告提示" />
|
|
10
|
+
<EbizAlert theme="error" message="这是一条错误提示" />
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<h2>带标题的提示</h2>
|
|
14
|
+
<div class="demo-section">
|
|
15
|
+
<EbizAlert title="信息提示标题" message="这是一条普通信息提示" />
|
|
16
|
+
<EbizAlert theme="success" title="成功提示标题" message="这是一条成功提示" />
|
|
17
|
+
<EbizAlert theme="warning" title="警告提示标题" message="这是一条警告提示" />
|
|
18
|
+
<EbizAlert theme="error" title="错误提示标题" message="这是一条错误提示" />
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<h2>带描述的提示</h2>
|
|
22
|
+
<div class="demo-section">
|
|
23
|
+
<EbizAlert
|
|
24
|
+
title="信息提示"
|
|
25
|
+
message="这是一条普通信息提示"
|
|
26
|
+
description="这是一段描述文字，用于进一步解释说明提示内容"
|
|
27
|
+
/>
|
|
28
|
+
<EbizAlert
|
|
29
|
+
theme="success"
|
|
30
|
+
title="成功提示"
|
|
31
|
+
message="这是一条成功提示"
|
|
32
|
+
description="这是一段描述文字，用于进一步解释说明提示内容"
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<h2>可关闭的提示</h2>
|
|
37
|
+
<div class="demo-section">
|
|
38
|
+
<EbizAlert message="可关闭的信息提示" close @close="handleClose" />
|
|
39
|
+
<EbizAlert
|
|
40
|
+
theme="success"
|
|
41
|
+
title="可关闭的成功提示"
|
|
42
|
+
message="这是一条成功提示"
|
|
43
|
+
close
|
|
44
|
+
@close="handleClose"
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<h2>带操作的提示</h2>
|
|
49
|
+
<div class="demo-section">
|
|
50
|
+
<EbizAlert
|
|
51
|
+
message="带操作按钮的提示"
|
|
52
|
+
operation="查看详情"
|
|
53
|
+
/>
|
|
54
|
+
<EbizAlert
|
|
55
|
+
theme="warning"
|
|
56
|
+
title="带操作按钮的警告"
|
|
57
|
+
message="这是一条警告提示"
|
|
58
|
+
>
|
|
59
|
+
<template #operation>
|
|
60
|
+
<t-button theme="warning" variant="text" size="small">查看详情</t-button>
|
|
61
|
+
</template>
|
|
62
|
+
</EbizAlert>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<h2>自定义图标</h2>
|
|
66
|
+
<div class="demo-section">
|
|
67
|
+
<EbizAlert message="自定义图标提示" theme="success">
|
|
68
|
+
<template #icon>
|
|
69
|
+
<t-icon name="check-circle-filled" />
|
|
70
|
+
</template>
|
|
71
|
+
</EbizAlert>
|
|
72
|
+
<EbizAlert message="无图标提示" :icon="false" />
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<script setup>
|
|
78
|
+
import { EbizAlert } from '../index.js';
|
|
79
|
+
import { Button as TButton, Icon as TIcon } from 'tdesign-vue-next';
|
|
80
|
+
import { ref } from 'vue';
|
|
81
|
+
|
|
82
|
+
const handleClose = (e) => {
|
|
83
|
+
console.log('Alert closed', e);
|
|
84
|
+
};
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style lang="less" scoped>
|
|
88
|
+
.alert-demo {
|
|
89
|
+
padding: 20px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.demo-section {
|
|
93
|
+
margin-bottom: 24px;
|
|
94
|
+
|
|
95
|
+
.t-alert {
|
|
96
|
+
margin-bottom: 16px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="timeline-demo">
|
|
3
|
+
<h1>TDesign Timeline 组件示例</h1>
|
|
4
|
+
|
|
5
|
+
<h2>基础时间轴</h2>
|
|
6
|
+
<div class="demo-section">
|
|
7
|
+
<EbizTimeline>
|
|
8
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
9
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
10
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
11
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
12
|
+
</EbizTimeline>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<h2>时间轴方向</h2>
|
|
16
|
+
<div class="demo-section">
|
|
17
|
+
<h3>水平方向</h3>
|
|
18
|
+
<EbizTimeline layout="horizontal">
|
|
19
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
20
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
21
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
22
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
23
|
+
</EbizTimeline>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<h2>时间轴主题</h2>
|
|
27
|
+
<div class="demo-section">
|
|
28
|
+
<h3>点状主题</h3>
|
|
29
|
+
<EbizTimeline theme="dot">
|
|
30
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
31
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
32
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
33
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
34
|
+
</EbizTimeline>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<h2>不同的展示方式</h2>
|
|
38
|
+
<div class="demo-section">
|
|
39
|
+
<h3>左侧展示</h3>
|
|
40
|
+
<EbizTimeline mode="left">
|
|
41
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
42
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
43
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
44
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
45
|
+
</EbizTimeline>
|
|
46
|
+
|
|
47
|
+
<h3>右侧展示</h3>
|
|
48
|
+
<EbizTimeline mode="right">
|
|
49
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
50
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
51
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
52
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
53
|
+
</EbizTimeline>
|
|
54
|
+
|
|
55
|
+
<h3>同侧展示</h3>
|
|
56
|
+
<EbizTimeline mode="same">
|
|
57
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
58
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
59
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
60
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
61
|
+
</EbizTimeline>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<h2>标签位置</h2>
|
|
65
|
+
<div class="demo-section">
|
|
66
|
+
<h3>标签在左侧</h3>
|
|
67
|
+
<EbizTimeline labelAlign="left">
|
|
68
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
69
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
70
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
71
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
72
|
+
</EbizTimeline>
|
|
73
|
+
|
|
74
|
+
<h3>标签在顶部</h3>
|
|
75
|
+
<EbizTimeline labelAlign="top">
|
|
76
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" />
|
|
77
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" />
|
|
78
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" />
|
|
79
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" />
|
|
80
|
+
</EbizTimeline>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<h2>自定义节点颜色</h2>
|
|
84
|
+
<div class="demo-section">
|
|
85
|
+
<EbizTimeline>
|
|
86
|
+
<EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
|
|
87
|
+
<EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
|
|
88
|
+
<EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
|
|
89
|
+
<EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
|
|
90
|
+
</EbizTimeline>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<h2>使用插槽自定义内容</h2>
|
|
94
|
+
<div class="demo-section">
|
|
95
|
+
<EbizTimeline>
|
|
96
|
+
<EbizTimelineItem label="2022-01-01">
|
|
97
|
+
<div class="custom-content">
|
|
98
|
+
<h4>自定义内容一</h4>
|
|
99
|
+
<p>这是一个自定义内容示例</p>
|
|
100
|
+
</div>
|
|
101
|
+
</EbizTimelineItem>
|
|
102
|
+
<EbizTimelineItem label="2022-02-01">
|
|
103
|
+
<div class="custom-content">
|
|
104
|
+
<h4>自定义内容二</h4>
|
|
105
|
+
<p>这是一个自定义内容示例</p>
|
|
106
|
+
</div>
|
|
107
|
+
</EbizTimelineItem>
|
|
108
|
+
</EbizTimeline>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<h2>加载状态</h2>
|
|
112
|
+
<div class="demo-section">
|
|
113
|
+
<EbizTimeline>
|
|
114
|
+
<EbizTimelineItem label="2022-01-01" content="已完成" />
|
|
115
|
+
<EbizTimelineItem label="2022-02-01" content="进行中" loading />
|
|
116
|
+
<EbizTimelineItem label="2022-03-01" content="未开始" />
|
|
117
|
+
<EbizTimelineItem label="2022-04-01" content="未开始" />
|
|
118
|
+
</EbizTimeline>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
|
|
123
|
+
<script setup>
|
|
124
|
+
import { EbizTimeline, EbizTimelineItem } from '../index.js';
|
|
125
|
+
</script>
|
|
126
|
+
|
|
127
|
+
<style scoped>
|
|
128
|
+
.timeline-demo {
|
|
129
|
+
padding: 20px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.demo-section {
|
|
133
|
+
margin-bottom: 40px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
h1 {
|
|
137
|
+
margin-bottom: 30px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
h2 {
|
|
141
|
+
margin: 20px 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
h3 {
|
|
145
|
+
margin: 15px 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.custom-content {
|
|
149
|
+
padding: 10px;
|
|
150
|
+
border: 1px solid #eee;
|
|
151
|
+
border-radius: 4px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.custom-content h4 {
|
|
155
|
+
margin: 0 0 10px 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.custom-content p {
|
|
159
|
+
margin: 0;
|
|
160
|
+
}
|
|
161
|
+
</style>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="watermark-demo">
|
|
3
|
+
<h1>水印组件演示</h1>
|
|
4
|
+
<div class="demo-section">
|
|
5
|
+
<h2>基础用法</h2>
|
|
6
|
+
<div class="demo-card">
|
|
7
|
+
<EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
|
|
8
|
+
<div class="content-box">
|
|
9
|
+
<p>这是被水印覆盖的内容</p>
|
|
10
|
+
<p>水印会显示在此内容之上</p>
|
|
11
|
+
</div>
|
|
12
|
+
</EbizWatermark>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
|
|
17
|
+
<div style="width: 100%; height: 300px" />
|
|
18
|
+
</t-watermark>
|
|
19
|
+
|
|
20
|
+
<div class="demo-section">
|
|
21
|
+
<h2>自定义透明度和角度</h2>
|
|
22
|
+
<div class="demo-card">
|
|
23
|
+
<EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
|
|
24
|
+
<div class="content-box">
|
|
25
|
+
<p>此水印透明度为0.2且角度为0</p>
|
|
26
|
+
</div>
|
|
27
|
+
</EbizWatermark>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="demo-section">
|
|
32
|
+
<h2>自定义间距和大小</h2>
|
|
33
|
+
<div class="demo-card">
|
|
34
|
+
<EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
|
|
35
|
+
<div class="content-box">
|
|
36
|
+
<p>此水印设置了自定义的宽高和间距</p>
|
|
37
|
+
</div>
|
|
38
|
+
</EbizWatermark>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="demo-section">
|
|
43
|
+
<h2>可移动水印</h2>
|
|
44
|
+
<div class="demo-card">
|
|
45
|
+
<EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
|
|
46
|
+
<div class="content-box">
|
|
47
|
+
<p>此水印可以随着页面滚动而移动</p>
|
|
48
|
+
</div>
|
|
49
|
+
</EbizWatermark>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script setup>
|
|
56
|
+
import { EbizWatermark } from '../index.js';
|
|
57
|
+
import { Watermark as TWatermark } from 'tdesign-vue-next';
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<style scoped>
|
|
61
|
+
.watermark-demo {
|
|
62
|
+
padding: 20px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.demo-section {
|
|
66
|
+
margin-bottom: 30px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.demo-card {
|
|
70
|
+
border: 1px solid #eee;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
margin-top: 10px;
|
|
73
|
+
background-color: #fafafa;
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.content-box {
|
|
78
|
+
padding: 40px;
|
|
79
|
+
height: 200px;
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
align-items: center;
|
|
84
|
+
text-align: center;
|
|
85
|
+
}
|
|
86
|
+
</style>
|