@ebiz/designer-components 0.0.57 → 0.0.59
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/README.md +29 -29
- package/dist/designer-components.css +1 -1
- package/dist/index.mjs +4822 -4822
- package/package.json +1 -1
- package/src/App.vue +26 -26
- package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
- package/src/apiService/mockDataService.js +115 -115
- package/src/apiService/simpleDataService.js +297 -297
- package/src/assets/base.css +86 -86
- package/src/assets/logo.svg +1 -1
- package/src/components/Button.vue +149 -149
- package/src/components/DataContainer.vue +40 -40
- package/src/components/EbizApproval.vue +332 -338
- package/src/components/EbizAutoForm.vue +596 -596
- package/src/components/EbizAvatar.vue +115 -115
- package/src/components/EbizCheckbox.vue +93 -93
- package/src/components/EbizCheckboxGroup.vue +69 -69
- package/src/components/EbizDepartmentSelector.vue +144 -144
- package/src/components/EbizDescriptions.vue +340 -340
- package/src/components/EbizDescriptionsItem.vue +47 -47
- package/src/components/EbizDetailBlock.vue +81 -81
- package/src/components/EbizDialog.vue +260 -260
- package/src/components/EbizDiv.vue +32 -32
- package/src/components/EbizDivider.vue +96 -96
- package/src/components/EbizEmployeeInfo.vue +138 -138
- package/src/components/EbizEmployeeSelector.vue +1093 -1086
- package/src/components/EbizFileUpload.vue +238 -238
- package/src/components/EbizMap.vue +541 -541
- package/src/components/EbizOkrTree.vue +99 -99
- package/src/components/EbizPageHeader.vue +95 -95
- package/src/components/EbizPagination.vue +162 -162
- package/src/components/EbizPopconfirm.vue +47 -47
- package/src/components/EbizRadio.vue +86 -86
- package/src/components/EbizRadioGroup.vue +83 -83
- package/src/components/EbizRemoteSelect.vue +232 -232
- package/src/components/EbizRouteBreadcrumb.vue +46 -46
- package/src/components/EbizSelect.vue +85 -85
- package/src/components/EbizSpace.vue +100 -100
- package/src/components/EbizStatistic.vue +149 -149
- package/src/components/EbizStatsCard.vue +113 -113
- package/src/components/EbizSwiper.vue +113 -113
- package/src/components/EbizSwiperItem.vue +13 -13
- package/src/components/EbizSwitch.vue +85 -85
- package/src/components/EbizTabHeader.vue +132 -132
- package/src/components/EbizTabPanel.vue +22 -22
- package/src/components/EbizTable.vue +469 -469
- package/src/components/EbizTableColumn.vue +116 -116
- package/src/components/EbizTableSort.vue +179 -179
- package/src/components/EbizTabs.vue +142 -142
- package/src/components/EbizTdesignButtonDialog.vue +332 -332
- package/src/components/EbizTdesignLoading.vue +107 -107
- package/src/components/EbizTimePicker.vue +143 -143
- package/src/components/EbizTitle.vue +91 -91
- package/src/components/EbizTree.vue +152 -152
- package/src/components/EbizTreeMergeTable.vue +1414 -1414
- package/src/components/EbizTreeSelector.vue +418 -418
- package/src/components/EbizVxeTable.vue +290 -290
- package/src/components/Form.vue +28 -28
- package/src/components/Home.vue +7 -7
- package/src/components/MyComponent.vue +39 -39
- package/src/components/Table.vue +45 -45
- package/src/components/TdesignAlert.vue +115 -115
- package/src/components/TdesignButton.vue +135 -135
- package/src/components/TdesignCalendar/index.vue +145 -145
- package/src/components/TdesignCard.vue +195 -195
- package/src/components/TdesignCol.vue +101 -101
- package/src/components/TdesignCollapse.vue +142 -142
- package/src/components/TdesignCollapsePanel.vue +79 -79
- package/src/components/TdesignDatePicker.vue +124 -124
- package/src/components/TdesignDescriptions.vue +74 -74
- package/src/components/TdesignDescriptionsItem.vue +50 -50
- package/src/components/TdesignDialog.vue +225 -225
- package/src/components/TdesignForm.vue +138 -138
- package/src/components/TdesignFormItem.vue +105 -105
- package/src/components/TdesignGrid.vue +55 -55
- package/src/components/TdesignIcon.vue +67 -67
- package/src/components/TdesignImage.vue +162 -162
- package/src/components/TdesignImageViewer.vue +200 -200
- package/src/components/TdesignInput.vue +242 -242
- package/src/components/TdesignSelect.vue +444 -444
- package/src/components/TdesignTag.vue +117 -117
- package/src/components/TdesignTextarea.vue +142 -142
- package/src/components/TdesignTimeline.vue +58 -58
- package/src/components/TdesignTimelineItem.vue +71 -71
- package/src/components/TdesignUpload.vue +388 -388
- package/src/components/TdesignWatermark.vue +107 -107
- package/src/components/ebiz-form/components/cascader.vue +61 -61
- package/src/components/ebiz-form/components/checkbox.vue +37 -37
- package/src/components/ebiz-form/components/city.vue +137 -137
- package/src/components/ebiz-form/components/date-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range.vue +56 -56
- package/src/components/ebiz-form/components/date.vue +52 -52
- package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/editor.vue +78 -78
- package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/file.vue +149 -149
- package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/images.vue +129 -129
- package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/img.vue +129 -129
- package/src/components/ebiz-form/components/number.vue +50 -50
- package/src/components/ebiz-form/components/radio.vue +28 -28
- package/src/components/ebiz-form/components/select.vue +119 -119
- package/src/components/ebiz-form/components/switch.vue +23 -23
- package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/text.vue +52 -52
- package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
- package/src/components/ebiz-form/components/textarea.vue +29 -29
- package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/video.vue +97 -97
- package/src/components/ebiz-form/index.vue +157 -157
- package/src/components/examples/PopconfirmExample.vue +149 -149
- package/src/components/icons/IconCommunity.vue +7 -7
- package/src/components/icons/IconDocumentation.vue +7 -7
- package/src/components/icons/IconEcosystem.vue +7 -7
- package/src/components/icons/IconSupport.vue +7 -7
- package/src/components/icons/IconTooling.vue +19 -19
- package/src/components/senior/EbizSData/index.vue +260 -260
- package/src/components/senior/EbizSDialog/index.vue +713 -712
- package/src/components/senior/EbizSForm/README.md +157 -157
- package/src/components/senior/EbizSForm/index.vue +668 -668
- package/src/components/senior/EbizSForm/item.vue +522 -522
- package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
- package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
- package/src/index.js +218 -218
- package/src/main.js +55 -55
- package/src/router/index.js +374 -374
- package/src/utils/formatCode.js +24 -24
- package/src/utils/generateImportStatement.js +52 -52
- package/src/utils/hasJsx.js +25 -25
- package/src/utils/index.js +166 -166
- package/src/utils/mergeOptions.js +29 -29
- package/src/utils/parseRequiredBlocks.js +18 -18
- package/src/utils/upload.ts +126 -126
- package/src/utils/vue-sfc-validator.js +155 -155
- package/src/views/Button.vue +23 -23
- package/src/views/CheckboxDemo.vue +104 -104
- package/src/views/DataContainer.vue +19 -19
- package/src/views/DialogDemo.vue +125 -125
- package/src/views/EbizApprovalDemo.vue +76 -76
- package/src/views/EbizAutoFormDemo.vue +129 -129
- package/src/views/EbizAvatar.vue +223 -223
- package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
- package/src/views/EbizDetailBlockDemo.vue +30 -30
- package/src/views/EbizEmployeeInfo.vue +249 -249
- package/src/views/EbizEmployeeSelector.vue +83 -83
- package/src/views/EbizMap.vue +201 -201
- package/src/views/EbizRadioDemo.vue +151 -151
- package/src/views/EbizSDataDemo.vue +136 -136
- package/src/views/EbizSDialogDemo.vue +301 -301
- package/src/views/EbizSForm/index.vue +359 -359
- package/src/views/EbizSFormDemo.vue +420 -420
- package/src/views/EbizSpace.vue +185 -185
- package/src/views/EbizSwiper.vue +157 -157
- package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
- package/src/views/Form.vue +19 -19
- package/src/views/GridDemo.vue +238 -238
- package/src/views/Home.vue +146 -146
- package/src/views/Mindmap.vue +17 -17
- package/src/views/MyComponent.vue +19 -19
- package/src/views/OkrTree.vue +19 -19
- package/src/views/PageHeaderDemo.vue +104 -104
- package/src/views/PaginationDemo.vue +96 -96
- package/src/views/PermissionBoxDemo.vue +85 -85
- package/src/views/PopconfirmDemo.vue +80 -80
- package/src/views/RemoteSelect.vue +350 -350
- package/src/views/StatisticDemo.vue +190 -190
- package/src/views/SwitchDemo.vue +79 -79
- package/src/views/Table.vue +19 -19
- package/src/views/TableDemo.vue +334 -334
- package/src/views/TableSortDemo.vue +143 -143
- package/src/views/TableView.vue +68 -68
- package/src/views/TabsDemo.vue +282 -282
- package/src/views/TagDemo.vue +101 -101
- package/src/views/TdesignAlert.vue +98 -98
- package/src/views/TdesignButton.vue +190 -190
- package/src/views/TdesignCalendar.vue +94 -94
- package/src/views/TdesignCard.vue +296 -296
- package/src/views/TdesignCollapse.vue +293 -293
- package/src/views/TdesignDatePicker.vue +187 -187
- package/src/views/TdesignDescriptions.vue +101 -101
- package/src/views/TdesignForm.vue +248 -248
- package/src/views/TdesignIcon.vue +203 -203
- package/src/views/TdesignImage.vue +215 -215
- package/src/views/TdesignImageViewer.vue +198 -198
- package/src/views/TdesignInput.vue +252 -252
- package/src/views/TdesignSelect.vue +473 -473
- package/src/views/TdesignSwiper.vue +157 -157
- package/src/views/TextareaDemo.vue +93 -93
- package/src/views/TimePickerDemo.vue +146 -146
- package/src/views/TimelineDemo.vue +160 -160
- package/src/views/Title.vue +19 -19
- package/src/views/TreeDemo.vue +254 -254
- package/src/views/TreeMergeTableDemo.vue +239 -239
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/src/views/UploadDemo.vue +121 -121
- package/src/views/VxeTableDemo.vue +279 -279
- package/src/views/WatermarkDemo.vue +85 -85
@@ -1,188 +1,188 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="tdesign-datepicker-demo">
|
3
|
-
<h2>TDesign 日期选择器示例</h2>
|
4
|
-
|
5
|
-
<div class="section">
|
6
|
-
<h3>基础日期选择器</h3>
|
7
|
-
<div class="demo-row">
|
8
|
-
<ebiz-tdesign-date-picker v-model="baseDate" placeholder="请选择日期" />
|
9
|
-
<div class="result">选择的日期: {{ baseDate || '未选择' }}</div>
|
10
|
-
</div>
|
11
|
-
</div>
|
12
|
-
|
13
|
-
<div class="section">
|
14
|
-
<h3>不同选择器模式</h3>
|
15
|
-
<div class="demo-row">
|
16
|
-
<ebiz-tdesign-date-picker v-model="modeDate1" mode="date" placeholder="日期选择" />
|
17
|
-
<ebiz-tdesign-date-picker v-model="modeDate2" mode="month" placeholder="月份选择" />
|
18
|
-
<ebiz-tdesign-date-picker v-model="modeDate3" mode="year" placeholder="年份选择" />
|
19
|
-
<ebiz-tdesign-date-picker v-model="modeDate4" mode="week" placeholder="周选择" />
|
20
|
-
<ebiz-tdesign-date-picker v-model="modeDate5" mode="quarter" placeholder="季度选择" />
|
21
|
-
</div>
|
22
|
-
</div>
|
23
|
-
|
24
|
-
<div class="section">
|
25
|
-
<h3>不同尺寸</h3>
|
26
|
-
<div class="demo-row">
|
27
|
-
<ebiz-tdesign-date-picker v-model="sizeDate1" size="small" placeholder="小尺寸" />
|
28
|
-
<ebiz-tdesign-date-picker v-model="sizeDate2" size="medium" placeholder="中等尺寸" />
|
29
|
-
<ebiz-tdesign-date-picker v-model="sizeDate3" size="large" placeholder="大尺寸" />
|
30
|
-
</div>
|
31
|
-
</div>
|
32
|
-
|
33
|
-
<div class="section">
|
34
|
-
<h3>日期格式</h3>
|
35
|
-
<div class="demo-row">
|
36
|
-
<ebiz-tdesign-date-picker v-model="formatDate1" format="YYYY/MM/DD" placeholder="YYYY/MM/DD" />
|
37
|
-
<ebiz-tdesign-date-picker v-model="formatDate2" format="YYYY年MM月DD日" placeholder="YYYY年MM月DD日" />
|
38
|
-
<ebiz-tdesign-date-picker v-model="formatDate3" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
|
39
|
-
</div>
|
40
|
-
</div>
|
41
|
-
|
42
|
-
<div class="section">
|
43
|
-
<h3>带时间选择</h3>
|
44
|
-
<div class="demo-row">
|
45
|
-
<ebiz-tdesign-date-picker
|
46
|
-
v-model="timeDate"
|
47
|
-
enableTimePicker
|
48
|
-
format="YYYY-MM-DD HH:mm:ss"
|
49
|
-
placeholder="选择日期和时间"
|
50
|
-
/>
|
51
|
-
<div class="result">选择的日期和时间: {{ timeDate || '未选择' }}</div>
|
52
|
-
</div>
|
53
|
-
</div>
|
54
|
-
|
55
|
-
<div class="section">
|
56
|
-
<h3>快捷选项</h3>
|
57
|
-
<div class="demo-row">
|
58
|
-
<ebiz-tdesign-date-picker
|
59
|
-
v-model="presetDate"
|
60
|
-
placeholder="带预设的日期选择"
|
61
|
-
:presets="presetOptions"
|
62
|
-
/>
|
63
|
-
<div class="result">选择的日期: {{ presetDate || '未选择' }}</div>
|
64
|
-
</div>
|
65
|
-
</div>
|
66
|
-
|
67
|
-
<div class="section">
|
68
|
-
<h3>不同状态</h3>
|
69
|
-
<div class="demo-row">
|
70
|
-
<ebiz-tdesign-date-picker v-model="statusDate1" status="default" placeholder="默认状态" />
|
71
|
-
<ebiz-tdesign-date-picker v-model="statusDate2" status="success" placeholder="成功状态" />
|
72
|
-
<ebiz-tdesign-date-picker v-model="statusDate3" status="warning" placeholder="警告状态" />
|
73
|
-
<ebiz-tdesign-date-picker v-model="statusDate4" status="error" placeholder="错误状态" />
|
74
|
-
</div>
|
75
|
-
</div>
|
76
|
-
|
77
|
-
<div class="section">
|
78
|
-
<h3>允许直接输入</h3>
|
79
|
-
<div class="demo-row">
|
80
|
-
<ebiz-tdesign-date-picker
|
81
|
-
v-model="inputDate"
|
82
|
-
allowInput
|
83
|
-
placeholder="可直接输入日期"
|
84
|
-
/>
|
85
|
-
<div class="result">输入的日期: {{ inputDate || '未输入' }}</div>
|
86
|
-
</div>
|
87
|
-
</div>
|
88
|
-
</div>
|
89
|
-
</template>
|
90
|
-
|
91
|
-
<script>
|
92
|
-
import { EbizTdesignDatePicker } from '../index.js';
|
93
|
-
|
94
|
-
export default {
|
95
|
-
name: 'TdesignDatePickerDemo',
|
96
|
-
components: {
|
97
|
-
EbizTdesignDatePicker
|
98
|
-
},
|
99
|
-
data() {
|
100
|
-
return {
|
101
|
-
baseDate: '',
|
102
|
-
modeDate1: '',
|
103
|
-
modeDate2: '',
|
104
|
-
modeDate3: '',
|
105
|
-
modeDate4: '',
|
106
|
-
modeDate5: '',
|
107
|
-
sizeDate1: '',
|
108
|
-
sizeDate2: '',
|
109
|
-
sizeDate3: '',
|
110
|
-
formatDate1: '',
|
111
|
-
formatDate2: '',
|
112
|
-
formatDate3: '',
|
113
|
-
timeDate: '',
|
114
|
-
presetDate: '',
|
115
|
-
statusDate1: '',
|
116
|
-
statusDate2: '',
|
117
|
-
statusDate3: '',
|
118
|
-
statusDate4: '',
|
119
|
-
inputDate: '',
|
120
|
-
presetOptions: {
|
121
|
-
'最近一周': () => {
|
122
|
-
const end = new Date();
|
123
|
-
const start = new Date();
|
124
|
-
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
125
|
-
return start;
|
126
|
-
},
|
127
|
-
'最近一个月': () => {
|
128
|
-
const end = new Date();
|
129
|
-
const start = new Date();
|
130
|
-
start.setMonth(start.getMonth() - 1);
|
131
|
-
return start;
|
132
|
-
},
|
133
|
-
'最近三个月': () => {
|
134
|
-
const end = new Date();
|
135
|
-
const start = new Date();
|
136
|
-
start.setMonth(start.getMonth() - 3);
|
137
|
-
return start;
|
138
|
-
},
|
139
|
-
'今天': () => new Date(),
|
140
|
-
'昨天': () => {
|
141
|
-
const date = new Date();
|
142
|
-
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
143
|
-
return date;
|
144
|
-
}
|
145
|
-
}
|
146
|
-
};
|
147
|
-
}
|
148
|
-
};
|
149
|
-
</script>
|
150
|
-
|
151
|
-
<style scoped>
|
152
|
-
.tdesign-datepicker-demo {
|
153
|
-
padding: 20px;
|
154
|
-
max-width: 1200px;
|
155
|
-
margin: 0 auto;
|
156
|
-
}
|
157
|
-
|
158
|
-
.section {
|
159
|
-
margin-bottom: 30px;
|
160
|
-
border-bottom: 1px solid #eee;
|
161
|
-
padding-bottom: 20px;
|
162
|
-
}
|
163
|
-
|
164
|
-
h2 {
|
165
|
-
margin-bottom: 20px;
|
166
|
-
font-size: 24px;
|
167
|
-
color: #0052d9;
|
168
|
-
}
|
169
|
-
|
170
|
-
h3 {
|
171
|
-
margin-bottom: 12px;
|
172
|
-
font-size: 18px;
|
173
|
-
color: #333;
|
174
|
-
}
|
175
|
-
|
176
|
-
.demo-row {
|
177
|
-
display: flex;
|
178
|
-
flex-wrap: wrap;
|
179
|
-
gap: 16px;
|
180
|
-
margin-bottom: 16px;
|
181
|
-
align-items: center;
|
182
|
-
}
|
183
|
-
|
184
|
-
.result {
|
185
|
-
margin-left: 10px;
|
186
|
-
color: #666;
|
187
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="tdesign-datepicker-demo">
|
3
|
+
<h2>TDesign 日期选择器示例</h2>
|
4
|
+
|
5
|
+
<div class="section">
|
6
|
+
<h3>基础日期选择器</h3>
|
7
|
+
<div class="demo-row">
|
8
|
+
<ebiz-tdesign-date-picker v-model="baseDate" placeholder="请选择日期" />
|
9
|
+
<div class="result">选择的日期: {{ baseDate || '未选择' }}</div>
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
|
13
|
+
<div class="section">
|
14
|
+
<h3>不同选择器模式</h3>
|
15
|
+
<div class="demo-row">
|
16
|
+
<ebiz-tdesign-date-picker v-model="modeDate1" mode="date" placeholder="日期选择" />
|
17
|
+
<ebiz-tdesign-date-picker v-model="modeDate2" mode="month" placeholder="月份选择" />
|
18
|
+
<ebiz-tdesign-date-picker v-model="modeDate3" mode="year" placeholder="年份选择" />
|
19
|
+
<ebiz-tdesign-date-picker v-model="modeDate4" mode="week" placeholder="周选择" />
|
20
|
+
<ebiz-tdesign-date-picker v-model="modeDate5" mode="quarter" placeholder="季度选择" />
|
21
|
+
</div>
|
22
|
+
</div>
|
23
|
+
|
24
|
+
<div class="section">
|
25
|
+
<h3>不同尺寸</h3>
|
26
|
+
<div class="demo-row">
|
27
|
+
<ebiz-tdesign-date-picker v-model="sizeDate1" size="small" placeholder="小尺寸" />
|
28
|
+
<ebiz-tdesign-date-picker v-model="sizeDate2" size="medium" placeholder="中等尺寸" />
|
29
|
+
<ebiz-tdesign-date-picker v-model="sizeDate3" size="large" placeholder="大尺寸" />
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<div class="section">
|
34
|
+
<h3>日期格式</h3>
|
35
|
+
<div class="demo-row">
|
36
|
+
<ebiz-tdesign-date-picker v-model="formatDate1" format="YYYY/MM/DD" placeholder="YYYY/MM/DD" />
|
37
|
+
<ebiz-tdesign-date-picker v-model="formatDate2" format="YYYY年MM月DD日" placeholder="YYYY年MM月DD日" />
|
38
|
+
<ebiz-tdesign-date-picker v-model="formatDate3" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
<div class="section">
|
43
|
+
<h3>带时间选择</h3>
|
44
|
+
<div class="demo-row">
|
45
|
+
<ebiz-tdesign-date-picker
|
46
|
+
v-model="timeDate"
|
47
|
+
enableTimePicker
|
48
|
+
format="YYYY-MM-DD HH:mm:ss"
|
49
|
+
placeholder="选择日期和时间"
|
50
|
+
/>
|
51
|
+
<div class="result">选择的日期和时间: {{ timeDate || '未选择' }}</div>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div class="section">
|
56
|
+
<h3>快捷选项</h3>
|
57
|
+
<div class="demo-row">
|
58
|
+
<ebiz-tdesign-date-picker
|
59
|
+
v-model="presetDate"
|
60
|
+
placeholder="带预设的日期选择"
|
61
|
+
:presets="presetOptions"
|
62
|
+
/>
|
63
|
+
<div class="result">选择的日期: {{ presetDate || '未选择' }}</div>
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
|
67
|
+
<div class="section">
|
68
|
+
<h3>不同状态</h3>
|
69
|
+
<div class="demo-row">
|
70
|
+
<ebiz-tdesign-date-picker v-model="statusDate1" status="default" placeholder="默认状态" />
|
71
|
+
<ebiz-tdesign-date-picker v-model="statusDate2" status="success" placeholder="成功状态" />
|
72
|
+
<ebiz-tdesign-date-picker v-model="statusDate3" status="warning" placeholder="警告状态" />
|
73
|
+
<ebiz-tdesign-date-picker v-model="statusDate4" status="error" placeholder="错误状态" />
|
74
|
+
</div>
|
75
|
+
</div>
|
76
|
+
|
77
|
+
<div class="section">
|
78
|
+
<h3>允许直接输入</h3>
|
79
|
+
<div class="demo-row">
|
80
|
+
<ebiz-tdesign-date-picker
|
81
|
+
v-model="inputDate"
|
82
|
+
allowInput
|
83
|
+
placeholder="可直接输入日期"
|
84
|
+
/>
|
85
|
+
<div class="result">输入的日期: {{ inputDate || '未输入' }}</div>
|
86
|
+
</div>
|
87
|
+
</div>
|
88
|
+
</div>
|
89
|
+
</template>
|
90
|
+
|
91
|
+
<script>
|
92
|
+
import { EbizTdesignDatePicker } from '../index.js';
|
93
|
+
|
94
|
+
export default {
|
95
|
+
name: 'TdesignDatePickerDemo',
|
96
|
+
components: {
|
97
|
+
EbizTdesignDatePicker
|
98
|
+
},
|
99
|
+
data() {
|
100
|
+
return {
|
101
|
+
baseDate: '',
|
102
|
+
modeDate1: '',
|
103
|
+
modeDate2: '',
|
104
|
+
modeDate3: '',
|
105
|
+
modeDate4: '',
|
106
|
+
modeDate5: '',
|
107
|
+
sizeDate1: '',
|
108
|
+
sizeDate2: '',
|
109
|
+
sizeDate3: '',
|
110
|
+
formatDate1: '',
|
111
|
+
formatDate2: '',
|
112
|
+
formatDate3: '',
|
113
|
+
timeDate: '',
|
114
|
+
presetDate: '',
|
115
|
+
statusDate1: '',
|
116
|
+
statusDate2: '',
|
117
|
+
statusDate3: '',
|
118
|
+
statusDate4: '',
|
119
|
+
inputDate: '',
|
120
|
+
presetOptions: {
|
121
|
+
'最近一周': () => {
|
122
|
+
const end = new Date();
|
123
|
+
const start = new Date();
|
124
|
+
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
125
|
+
return start;
|
126
|
+
},
|
127
|
+
'最近一个月': () => {
|
128
|
+
const end = new Date();
|
129
|
+
const start = new Date();
|
130
|
+
start.setMonth(start.getMonth() - 1);
|
131
|
+
return start;
|
132
|
+
},
|
133
|
+
'最近三个月': () => {
|
134
|
+
const end = new Date();
|
135
|
+
const start = new Date();
|
136
|
+
start.setMonth(start.getMonth() - 3);
|
137
|
+
return start;
|
138
|
+
},
|
139
|
+
'今天': () => new Date(),
|
140
|
+
'昨天': () => {
|
141
|
+
const date = new Date();
|
142
|
+
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
143
|
+
return date;
|
144
|
+
}
|
145
|
+
}
|
146
|
+
};
|
147
|
+
}
|
148
|
+
};
|
149
|
+
</script>
|
150
|
+
|
151
|
+
<style scoped>
|
152
|
+
.tdesign-datepicker-demo {
|
153
|
+
padding: 20px;
|
154
|
+
max-width: 1200px;
|
155
|
+
margin: 0 auto;
|
156
|
+
}
|
157
|
+
|
158
|
+
.section {
|
159
|
+
margin-bottom: 30px;
|
160
|
+
border-bottom: 1px solid #eee;
|
161
|
+
padding-bottom: 20px;
|
162
|
+
}
|
163
|
+
|
164
|
+
h2 {
|
165
|
+
margin-bottom: 20px;
|
166
|
+
font-size: 24px;
|
167
|
+
color: #0052d9;
|
168
|
+
}
|
169
|
+
|
170
|
+
h3 {
|
171
|
+
margin-bottom: 12px;
|
172
|
+
font-size: 18px;
|
173
|
+
color: #333;
|
174
|
+
}
|
175
|
+
|
176
|
+
.demo-row {
|
177
|
+
display: flex;
|
178
|
+
flex-wrap: wrap;
|
179
|
+
gap: 16px;
|
180
|
+
margin-bottom: 16px;
|
181
|
+
align-items: center;
|
182
|
+
}
|
183
|
+
|
184
|
+
.result {
|
185
|
+
margin-left: 10px;
|
186
|
+
color: #666;
|
187
|
+
}
|
188
188
|
</style>
|
@@ -1,102 +1,102 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="container">
|
3
|
-
<h2>描述列表组件演示</h2>
|
4
|
-
|
5
|
-
<div class="demo-section">
|
6
|
-
<h3>基础用法</h3>
|
7
|
-
<EbizDescriptions title="配送信息" :column="2">
|
8
|
-
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
9
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
10
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
11
|
-
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
12
|
-
</EbizDescriptions>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
<div class="demo-section">
|
16
|
-
<h3>带边框</h3>
|
17
|
-
<EbizDescriptions title="配送信息" :column="2" border>
|
18
|
-
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
19
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
20
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
21
|
-
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
22
|
-
</EbizDescriptions>
|
23
|
-
</div>
|
24
|
-
|
25
|
-
<div class="demo-section">
|
26
|
-
<h3>带冒号</h3>
|
27
|
-
<EbizDescriptions title="配送信息" :column="2" colon>
|
28
|
-
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
29
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
30
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
31
|
-
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
32
|
-
</EbizDescriptions>
|
33
|
-
</div>
|
34
|
-
|
35
|
-
<div class="demo-section">
|
36
|
-
<h3>垂直布局</h3>
|
37
|
-
<EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
|
38
|
-
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
39
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
40
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
41
|
-
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
42
|
-
</EbizDescriptions>
|
43
|
-
</div>
|
44
|
-
|
45
|
-
<div class="demo-section">
|
46
|
-
<h3>自定义列数</h3>
|
47
|
-
<EbizDescriptions title="配送信息" :column="3" border>
|
48
|
-
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
49
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
50
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
51
|
-
<EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
52
|
-
</EbizDescriptions>
|
53
|
-
</div>
|
54
|
-
|
55
|
-
<div class="demo-section">
|
56
|
-
<h3>自定义样式</h3>
|
57
|
-
<EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
|
58
|
-
<EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
|
59
|
-
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
60
|
-
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
61
|
-
<EbizDescriptionsItem label="地址" content-class-name="custom-content">
|
62
|
-
<span style="color: #0052d9">深圳市南山区深南大道10000号</span>
|
63
|
-
</EbizDescriptionsItem>
|
64
|
-
</EbizDescriptions>
|
65
|
-
</div>
|
66
|
-
</div>
|
67
|
-
</template>
|
68
|
-
|
69
|
-
<script setup>
|
70
|
-
import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
|
71
|
-
</script>
|
72
|
-
|
73
|
-
<style scoped>
|
74
|
-
.container {
|
75
|
-
padding: 24px;
|
76
|
-
max-width: 1000px;
|
77
|
-
margin: 0 auto;
|
78
|
-
}
|
79
|
-
|
80
|
-
.demo-section {
|
81
|
-
margin-bottom: 32px;
|
82
|
-
}
|
83
|
-
|
84
|
-
h2 {
|
85
|
-
font-size: 24px;
|
86
|
-
margin-bottom: 24px;
|
87
|
-
}
|
88
|
-
|
89
|
-
h3 {
|
90
|
-
font-size: 18px;
|
91
|
-
margin-bottom: 16px;
|
92
|
-
}
|
93
|
-
|
94
|
-
.custom-label {
|
95
|
-
font-weight: bold;
|
96
|
-
color: #0052d9;
|
97
|
-
}
|
98
|
-
|
99
|
-
.custom-content {
|
100
|
-
font-style: italic;
|
101
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="container">
|
3
|
+
<h2>描述列表组件演示</h2>
|
4
|
+
|
5
|
+
<div class="demo-section">
|
6
|
+
<h3>基础用法</h3>
|
7
|
+
<EbizDescriptions title="配送信息" :column="2">
|
8
|
+
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
9
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
10
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
11
|
+
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
12
|
+
</EbizDescriptions>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<div class="demo-section">
|
16
|
+
<h3>带边框</h3>
|
17
|
+
<EbizDescriptions title="配送信息" :column="2" border>
|
18
|
+
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
19
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
20
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
21
|
+
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
22
|
+
</EbizDescriptions>
|
23
|
+
</div>
|
24
|
+
|
25
|
+
<div class="demo-section">
|
26
|
+
<h3>带冒号</h3>
|
27
|
+
<EbizDescriptions title="配送信息" :column="2" colon>
|
28
|
+
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
29
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
30
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
31
|
+
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
32
|
+
</EbizDescriptions>
|
33
|
+
</div>
|
34
|
+
|
35
|
+
<div class="demo-section">
|
36
|
+
<h3>垂直布局</h3>
|
37
|
+
<EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
|
38
|
+
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
39
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
40
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
41
|
+
<EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
42
|
+
</EbizDescriptions>
|
43
|
+
</div>
|
44
|
+
|
45
|
+
<div class="demo-section">
|
46
|
+
<h3>自定义列数</h3>
|
47
|
+
<EbizDescriptions title="配送信息" :column="3" border>
|
48
|
+
<EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
|
49
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
50
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
51
|
+
<EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
|
52
|
+
</EbizDescriptions>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div class="demo-section">
|
56
|
+
<h3>自定义样式</h3>
|
57
|
+
<EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
|
58
|
+
<EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
|
59
|
+
<EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
|
60
|
+
<EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
|
61
|
+
<EbizDescriptionsItem label="地址" content-class-name="custom-content">
|
62
|
+
<span style="color: #0052d9">深圳市南山区深南大道10000号</span>
|
63
|
+
</EbizDescriptionsItem>
|
64
|
+
</EbizDescriptions>
|
65
|
+
</div>
|
66
|
+
</div>
|
67
|
+
</template>
|
68
|
+
|
69
|
+
<script setup>
|
70
|
+
import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
|
71
|
+
</script>
|
72
|
+
|
73
|
+
<style scoped>
|
74
|
+
.container {
|
75
|
+
padding: 24px;
|
76
|
+
max-width: 1000px;
|
77
|
+
margin: 0 auto;
|
78
|
+
}
|
79
|
+
|
80
|
+
.demo-section {
|
81
|
+
margin-bottom: 32px;
|
82
|
+
}
|
83
|
+
|
84
|
+
h2 {
|
85
|
+
font-size: 24px;
|
86
|
+
margin-bottom: 24px;
|
87
|
+
}
|
88
|
+
|
89
|
+
h3 {
|
90
|
+
font-size: 18px;
|
91
|
+
margin-bottom: 16px;
|
92
|
+
}
|
93
|
+
|
94
|
+
.custom-label {
|
95
|
+
font-weight: bold;
|
96
|
+
color: #0052d9;
|
97
|
+
}
|
98
|
+
|
99
|
+
.custom-content {
|
100
|
+
font-style: italic;
|
101
|
+
}
|
102
102
|
</style>
|