@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.10
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/package.json +1 -1
- package/src/apiService/mockDataService.js +116 -0
- package/src/apiService/simpleDataService.js +133 -131
- package/src/components/Button.vue +3 -2
- package/src/components/EbizAvatar.vue +116 -0
- package/src/components/EbizEmployeeInfo.vue +139 -0
- package/src/components/EbizRemoteSelect.vue +99 -41
- package/src/components/EbizStatistic.vue +150 -0
- package/src/components/EbizTabHeader.vue +6 -10
- package/src/components/EbizTabPanel.vue +23 -0
- package/src/components/EbizTabs.vue +143 -0
- package/src/components/TdesignAlert.vue +116 -0
- package/src/components/TdesignCalendar/index.vue +6 -3
- package/src/components/TdesignDialog.vue +221 -0
- package/src/components/TdesignInput.vue +23 -23
- package/src/components/TdesignTimeline.vue +58 -0
- package/src/components/TdesignTimelineItem.vue +72 -0
- package/src/components/TdesignUpload.vue +67 -98
- package/src/components/TdesignWatermark.vue +108 -0
- package/src/index.js +79 -45
- package/src/main.js +2 -2
- package/src/router/index.js +48 -0
- package/src/views/DialogDemo.vue +126 -0
- package/src/views/EbizAvatar.vue +224 -0
- package/src/views/EbizEmployeeInfo.vue +250 -0
- package/src/views/Home.vue +9 -1
- package/src/views/RemoteSelect.vue +336 -5
- 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,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>
|