@ebiz/designer-components 0.0.58 → 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 -713
- 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
package/src/views/TagDemo.vue
CHANGED
@@ -1,102 +1,102 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="tag-demo">
|
3
|
-
<h1>TDesign Tag 组件示例</h1>
|
4
|
-
|
5
|
-
<h2>基础标签</h2>
|
6
|
-
<div class="demo-section">
|
7
|
-
<EbizTag content="默认标签" />
|
8
|
-
<EbizTag theme="primary" content="主题标签" />
|
9
|
-
<EbizTag theme="warning" content="警告标签" />
|
10
|
-
<EbizTag theme="danger" content="危险标签" />
|
11
|
-
<EbizTag theme="success" content="成功标签" />
|
12
|
-
</div>
|
13
|
-
|
14
|
-
<h2>不同尺寸</h2>
|
15
|
-
<div class="demo-section">
|
16
|
-
<EbizTag size="small" content="小尺寸" />
|
17
|
-
<EbizTag size="medium" content="中尺寸" />
|
18
|
-
<EbizTag size="large" content="大尺寸" />
|
19
|
-
</div>
|
20
|
-
|
21
|
-
<h2>不同变体</h2>
|
22
|
-
<div class="demo-section">
|
23
|
-
<EbizTag variant="dark" content="深色" />
|
24
|
-
<EbizTag variant="light" content="浅色" />
|
25
|
-
<EbizTag variant="outline" content="描边" />
|
26
|
-
<EbizTag variant="light-outline" content="浅色描边" />
|
27
|
-
</div>
|
28
|
-
|
29
|
-
<h2>可关闭标签</h2>
|
30
|
-
<div class="demo-section">
|
31
|
-
<EbizTag v-for="(tag, index) in closableTags" :key="index"
|
32
|
-
:content="tag"
|
33
|
-
closable
|
34
|
-
@close="handleClose(index)" />
|
35
|
-
</div>
|
36
|
-
|
37
|
-
<h2>可选中标签</h2>
|
38
|
-
<div class="demo-section">
|
39
|
-
<EbizTag v-for="item in checkableTags" :key="item.name"
|
40
|
-
:content="item.name"
|
41
|
-
checkable
|
42
|
-
:checked="item.checked"
|
43
|
-
@change="(checked) => handleChange(item, checked)" />
|
44
|
-
</div>
|
45
|
-
|
46
|
-
<h2>带图标的标签</h2>
|
47
|
-
<div class="demo-section">
|
48
|
-
<EbizTag content="星标标签" icon="star" />
|
49
|
-
<EbizTag content="成功标签" theme="success" icon="check-circle" />
|
50
|
-
<EbizTag content="警告标签" theme="warning" icon="error-circle" />
|
51
|
-
</div>
|
52
|
-
|
53
|
-
<h2>最大宽度</h2>
|
54
|
-
<div class="demo-section">
|
55
|
-
<EbizTag content="这是一个很长很长很长很长很长很长很长很长很长很长的标签" :maxWidth="150" />
|
56
|
-
</div>
|
57
|
-
</div>
|
58
|
-
</template>
|
59
|
-
|
60
|
-
<script setup>
|
61
|
-
import { ref } from 'vue';
|
62
|
-
import { EbizTag } from '../index.js';
|
63
|
-
|
64
|
-
const closableTags = ref(['标签1', '标签2', '标签3', '标签4']);
|
65
|
-
|
66
|
-
const checkableTags = ref([
|
67
|
-
{ name: '选项1', checked: true },
|
68
|
-
{ name: '选项2', checked: false },
|
69
|
-
{ name: '选项3', checked: false },
|
70
|
-
]);
|
71
|
-
|
72
|
-
const handleClose = (index) => {
|
73
|
-
closableTags.value.splice(index, 1);
|
74
|
-
};
|
75
|
-
|
76
|
-
const handleChange = (item, checked) => {
|
77
|
-
item.checked = checked;
|
78
|
-
};
|
79
|
-
</script>
|
80
|
-
|
81
|
-
<style scoped>
|
82
|
-
.tag-demo {
|
83
|
-
max-width: 800px;
|
84
|
-
margin: 0 auto;
|
85
|
-
padding: 20px;
|
86
|
-
}
|
87
|
-
|
88
|
-
.demo-section {
|
89
|
-
margin-bottom: 20px;
|
90
|
-
display: flex;
|
91
|
-
flex-wrap: wrap;
|
92
|
-
gap: 8px;
|
93
|
-
}
|
94
|
-
|
95
|
-
h1 {
|
96
|
-
margin-bottom: 24px;
|
97
|
-
}
|
98
|
-
|
99
|
-
h2 {
|
100
|
-
margin: 16px 0 8px;
|
101
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="tag-demo">
|
3
|
+
<h1>TDesign Tag 组件示例</h1>
|
4
|
+
|
5
|
+
<h2>基础标签</h2>
|
6
|
+
<div class="demo-section">
|
7
|
+
<EbizTag content="默认标签" />
|
8
|
+
<EbizTag theme="primary" content="主题标签" />
|
9
|
+
<EbizTag theme="warning" content="警告标签" />
|
10
|
+
<EbizTag theme="danger" content="危险标签" />
|
11
|
+
<EbizTag theme="success" content="成功标签" />
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<h2>不同尺寸</h2>
|
15
|
+
<div class="demo-section">
|
16
|
+
<EbizTag size="small" content="小尺寸" />
|
17
|
+
<EbizTag size="medium" content="中尺寸" />
|
18
|
+
<EbizTag size="large" content="大尺寸" />
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<h2>不同变体</h2>
|
22
|
+
<div class="demo-section">
|
23
|
+
<EbizTag variant="dark" content="深色" />
|
24
|
+
<EbizTag variant="light" content="浅色" />
|
25
|
+
<EbizTag variant="outline" content="描边" />
|
26
|
+
<EbizTag variant="light-outline" content="浅色描边" />
|
27
|
+
</div>
|
28
|
+
|
29
|
+
<h2>可关闭标签</h2>
|
30
|
+
<div class="demo-section">
|
31
|
+
<EbizTag v-for="(tag, index) in closableTags" :key="index"
|
32
|
+
:content="tag"
|
33
|
+
closable
|
34
|
+
@close="handleClose(index)" />
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<h2>可选中标签</h2>
|
38
|
+
<div class="demo-section">
|
39
|
+
<EbizTag v-for="item in checkableTags" :key="item.name"
|
40
|
+
:content="item.name"
|
41
|
+
checkable
|
42
|
+
:checked="item.checked"
|
43
|
+
@change="(checked) => handleChange(item, checked)" />
|
44
|
+
</div>
|
45
|
+
|
46
|
+
<h2>带图标的标签</h2>
|
47
|
+
<div class="demo-section">
|
48
|
+
<EbizTag content="星标标签" icon="star" />
|
49
|
+
<EbizTag content="成功标签" theme="success" icon="check-circle" />
|
50
|
+
<EbizTag content="警告标签" theme="warning" icon="error-circle" />
|
51
|
+
</div>
|
52
|
+
|
53
|
+
<h2>最大宽度</h2>
|
54
|
+
<div class="demo-section">
|
55
|
+
<EbizTag content="这是一个很长很长很长很长很长很长很长很长很长很长的标签" :maxWidth="150" />
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
</template>
|
59
|
+
|
60
|
+
<script setup>
|
61
|
+
import { ref } from 'vue';
|
62
|
+
import { EbizTag } from '../index.js';
|
63
|
+
|
64
|
+
const closableTags = ref(['标签1', '标签2', '标签3', '标签4']);
|
65
|
+
|
66
|
+
const checkableTags = ref([
|
67
|
+
{ name: '选项1', checked: true },
|
68
|
+
{ name: '选项2', checked: false },
|
69
|
+
{ name: '选项3', checked: false },
|
70
|
+
]);
|
71
|
+
|
72
|
+
const handleClose = (index) => {
|
73
|
+
closableTags.value.splice(index, 1);
|
74
|
+
};
|
75
|
+
|
76
|
+
const handleChange = (item, checked) => {
|
77
|
+
item.checked = checked;
|
78
|
+
};
|
79
|
+
</script>
|
80
|
+
|
81
|
+
<style scoped>
|
82
|
+
.tag-demo {
|
83
|
+
max-width: 800px;
|
84
|
+
margin: 0 auto;
|
85
|
+
padding: 20px;
|
86
|
+
}
|
87
|
+
|
88
|
+
.demo-section {
|
89
|
+
margin-bottom: 20px;
|
90
|
+
display: flex;
|
91
|
+
flex-wrap: wrap;
|
92
|
+
gap: 8px;
|
93
|
+
}
|
94
|
+
|
95
|
+
h1 {
|
96
|
+
margin-bottom: 24px;
|
97
|
+
}
|
98
|
+
|
99
|
+
h2 {
|
100
|
+
margin: 16px 0 8px;
|
101
|
+
}
|
102
102
|
</style>
|
@@ -1,99 +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
|
-
}
|
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
99
|
</style>
|