@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.
Files changed (199) hide show
  1. package/README.md +29 -29
  2. package/dist/designer-components.css +1 -1
  3. package/dist/index.mjs +4822 -4822
  4. package/package.json +1 -1
  5. package/src/App.vue +26 -26
  6. package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
  7. package/src/apiService/mockDataService.js +115 -115
  8. package/src/apiService/simpleDataService.js +297 -297
  9. package/src/assets/base.css +86 -86
  10. package/src/assets/logo.svg +1 -1
  11. package/src/components/Button.vue +149 -149
  12. package/src/components/DataContainer.vue +40 -40
  13. package/src/components/EbizApproval.vue +332 -338
  14. package/src/components/EbizAutoForm.vue +596 -596
  15. package/src/components/EbizAvatar.vue +115 -115
  16. package/src/components/EbizCheckbox.vue +93 -93
  17. package/src/components/EbizCheckboxGroup.vue +69 -69
  18. package/src/components/EbizDepartmentSelector.vue +144 -144
  19. package/src/components/EbizDescriptions.vue +340 -340
  20. package/src/components/EbizDescriptionsItem.vue +47 -47
  21. package/src/components/EbizDetailBlock.vue +81 -81
  22. package/src/components/EbizDialog.vue +260 -260
  23. package/src/components/EbizDiv.vue +32 -32
  24. package/src/components/EbizDivider.vue +96 -96
  25. package/src/components/EbizEmployeeInfo.vue +138 -138
  26. package/src/components/EbizEmployeeSelector.vue +1093 -1086
  27. package/src/components/EbizFileUpload.vue +238 -238
  28. package/src/components/EbizMap.vue +541 -541
  29. package/src/components/EbizOkrTree.vue +99 -99
  30. package/src/components/EbizPageHeader.vue +95 -95
  31. package/src/components/EbizPagination.vue +162 -162
  32. package/src/components/EbizPopconfirm.vue +47 -47
  33. package/src/components/EbizRadio.vue +86 -86
  34. package/src/components/EbizRadioGroup.vue +83 -83
  35. package/src/components/EbizRemoteSelect.vue +232 -232
  36. package/src/components/EbizRouteBreadcrumb.vue +46 -46
  37. package/src/components/EbizSelect.vue +85 -85
  38. package/src/components/EbizSpace.vue +100 -100
  39. package/src/components/EbizStatistic.vue +149 -149
  40. package/src/components/EbizStatsCard.vue +113 -113
  41. package/src/components/EbizSwiper.vue +113 -113
  42. package/src/components/EbizSwiperItem.vue +13 -13
  43. package/src/components/EbizSwitch.vue +85 -85
  44. package/src/components/EbizTabHeader.vue +132 -132
  45. package/src/components/EbizTabPanel.vue +22 -22
  46. package/src/components/EbizTable.vue +469 -469
  47. package/src/components/EbizTableColumn.vue +116 -116
  48. package/src/components/EbizTableSort.vue +179 -179
  49. package/src/components/EbizTabs.vue +142 -142
  50. package/src/components/EbizTdesignButtonDialog.vue +332 -332
  51. package/src/components/EbizTdesignLoading.vue +107 -107
  52. package/src/components/EbizTimePicker.vue +143 -143
  53. package/src/components/EbizTitle.vue +91 -91
  54. package/src/components/EbizTree.vue +152 -152
  55. package/src/components/EbizTreeMergeTable.vue +1414 -1414
  56. package/src/components/EbizTreeSelector.vue +418 -418
  57. package/src/components/EbizVxeTable.vue +290 -290
  58. package/src/components/Form.vue +28 -28
  59. package/src/components/Home.vue +7 -7
  60. package/src/components/MyComponent.vue +39 -39
  61. package/src/components/Table.vue +45 -45
  62. package/src/components/TdesignAlert.vue +115 -115
  63. package/src/components/TdesignButton.vue +135 -135
  64. package/src/components/TdesignCalendar/index.vue +145 -145
  65. package/src/components/TdesignCard.vue +195 -195
  66. package/src/components/TdesignCol.vue +101 -101
  67. package/src/components/TdesignCollapse.vue +142 -142
  68. package/src/components/TdesignCollapsePanel.vue +79 -79
  69. package/src/components/TdesignDatePicker.vue +124 -124
  70. package/src/components/TdesignDescriptions.vue +74 -74
  71. package/src/components/TdesignDescriptionsItem.vue +50 -50
  72. package/src/components/TdesignDialog.vue +225 -225
  73. package/src/components/TdesignForm.vue +138 -138
  74. package/src/components/TdesignFormItem.vue +105 -105
  75. package/src/components/TdesignGrid.vue +55 -55
  76. package/src/components/TdesignIcon.vue +67 -67
  77. package/src/components/TdesignImage.vue +162 -162
  78. package/src/components/TdesignImageViewer.vue +200 -200
  79. package/src/components/TdesignInput.vue +242 -242
  80. package/src/components/TdesignSelect.vue +444 -444
  81. package/src/components/TdesignTag.vue +117 -117
  82. package/src/components/TdesignTextarea.vue +142 -142
  83. package/src/components/TdesignTimeline.vue +58 -58
  84. package/src/components/TdesignTimelineItem.vue +71 -71
  85. package/src/components/TdesignUpload.vue +388 -388
  86. package/src/components/TdesignWatermark.vue +107 -107
  87. package/src/components/ebiz-form/components/cascader.vue +61 -61
  88. package/src/components/ebiz-form/components/checkbox.vue +37 -37
  89. package/src/components/ebiz-form/components/city.vue +137 -137
  90. package/src/components/ebiz-form/components/date-panel.vue +52 -52
  91. package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
  92. package/src/components/ebiz-form/components/date-range.vue +56 -56
  93. package/src/components/ebiz-form/components/date.vue +52 -52
  94. package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
  95. package/src/components/ebiz-form/components/editor.vue +78 -78
  96. package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
  97. package/src/components/ebiz-form/components/file.vue +149 -149
  98. package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
  99. package/src/components/ebiz-form/components/images.vue +129 -129
  100. package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
  101. package/src/components/ebiz-form/components/img.vue +129 -129
  102. package/src/components/ebiz-form/components/number.vue +50 -50
  103. package/src/components/ebiz-form/components/radio.vue +28 -28
  104. package/src/components/ebiz-form/components/select.vue +119 -119
  105. package/src/components/ebiz-form/components/switch.vue +23 -23
  106. package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
  107. package/src/components/ebiz-form/components/text.vue +52 -52
  108. package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
  109. package/src/components/ebiz-form/components/textarea.vue +29 -29
  110. package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
  111. package/src/components/ebiz-form/components/video.vue +97 -97
  112. package/src/components/ebiz-form/index.vue +157 -157
  113. package/src/components/examples/PopconfirmExample.vue +149 -149
  114. package/src/components/icons/IconCommunity.vue +7 -7
  115. package/src/components/icons/IconDocumentation.vue +7 -7
  116. package/src/components/icons/IconEcosystem.vue +7 -7
  117. package/src/components/icons/IconSupport.vue +7 -7
  118. package/src/components/icons/IconTooling.vue +19 -19
  119. package/src/components/senior/EbizSData/index.vue +260 -260
  120. package/src/components/senior/EbizSDialog/index.vue +713 -713
  121. package/src/components/senior/EbizSForm/README.md +157 -157
  122. package/src/components/senior/EbizSForm/index.vue +668 -668
  123. package/src/components/senior/EbizSForm/item.vue +522 -522
  124. package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
  125. package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
  126. package/src/index.js +218 -218
  127. package/src/main.js +55 -55
  128. package/src/router/index.js +374 -374
  129. package/src/utils/formatCode.js +24 -24
  130. package/src/utils/generateImportStatement.js +52 -52
  131. package/src/utils/hasJsx.js +25 -25
  132. package/src/utils/index.js +166 -166
  133. package/src/utils/mergeOptions.js +29 -29
  134. package/src/utils/parseRequiredBlocks.js +18 -18
  135. package/src/utils/upload.ts +126 -126
  136. package/src/utils/vue-sfc-validator.js +155 -155
  137. package/src/views/Button.vue +23 -23
  138. package/src/views/CheckboxDemo.vue +104 -104
  139. package/src/views/DataContainer.vue +19 -19
  140. package/src/views/DialogDemo.vue +125 -125
  141. package/src/views/EbizApprovalDemo.vue +76 -76
  142. package/src/views/EbizAutoFormDemo.vue +129 -129
  143. package/src/views/EbizAvatar.vue +223 -223
  144. package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
  145. package/src/views/EbizDetailBlockDemo.vue +30 -30
  146. package/src/views/EbizEmployeeInfo.vue +249 -249
  147. package/src/views/EbizEmployeeSelector.vue +83 -83
  148. package/src/views/EbizMap.vue +201 -201
  149. package/src/views/EbizRadioDemo.vue +151 -151
  150. package/src/views/EbizSDataDemo.vue +136 -136
  151. package/src/views/EbizSDialogDemo.vue +301 -301
  152. package/src/views/EbizSForm/index.vue +359 -359
  153. package/src/views/EbizSFormDemo.vue +420 -420
  154. package/src/views/EbizSpace.vue +185 -185
  155. package/src/views/EbizSwiper.vue +157 -157
  156. package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
  157. package/src/views/Form.vue +19 -19
  158. package/src/views/GridDemo.vue +238 -238
  159. package/src/views/Home.vue +146 -146
  160. package/src/views/Mindmap.vue +17 -17
  161. package/src/views/MyComponent.vue +19 -19
  162. package/src/views/OkrTree.vue +19 -19
  163. package/src/views/PageHeaderDemo.vue +104 -104
  164. package/src/views/PaginationDemo.vue +96 -96
  165. package/src/views/PermissionBoxDemo.vue +85 -85
  166. package/src/views/PopconfirmDemo.vue +80 -80
  167. package/src/views/RemoteSelect.vue +350 -350
  168. package/src/views/StatisticDemo.vue +190 -190
  169. package/src/views/SwitchDemo.vue +79 -79
  170. package/src/views/Table.vue +19 -19
  171. package/src/views/TableDemo.vue +334 -334
  172. package/src/views/TableSortDemo.vue +143 -143
  173. package/src/views/TableView.vue +68 -68
  174. package/src/views/TabsDemo.vue +282 -282
  175. package/src/views/TagDemo.vue +101 -101
  176. package/src/views/TdesignAlert.vue +98 -98
  177. package/src/views/TdesignButton.vue +190 -190
  178. package/src/views/TdesignCalendar.vue +94 -94
  179. package/src/views/TdesignCard.vue +296 -296
  180. package/src/views/TdesignCollapse.vue +293 -293
  181. package/src/views/TdesignDatePicker.vue +187 -187
  182. package/src/views/TdesignDescriptions.vue +101 -101
  183. package/src/views/TdesignForm.vue +248 -248
  184. package/src/views/TdesignIcon.vue +203 -203
  185. package/src/views/TdesignImage.vue +215 -215
  186. package/src/views/TdesignImageViewer.vue +198 -198
  187. package/src/views/TdesignInput.vue +252 -252
  188. package/src/views/TdesignSelect.vue +473 -473
  189. package/src/views/TdesignSwiper.vue +157 -157
  190. package/src/views/TextareaDemo.vue +93 -93
  191. package/src/views/TimePickerDemo.vue +146 -146
  192. package/src/views/TimelineDemo.vue +160 -160
  193. package/src/views/Title.vue +19 -19
  194. package/src/views/TreeDemo.vue +254 -254
  195. package/src/views/TreeMergeTableDemo.vue +239 -239
  196. package/src/views/TreeSelectorDemo.vue +245 -245
  197. package/src/views/UploadDemo.vue +121 -121
  198. package/src/views/VxeTableDemo.vue +279 -279
  199. package/src/views/WatermarkDemo.vue +85 -85
@@ -1,105 +1,105 @@
1
- <template>
2
- <div class="checkbox-demo">
3
- <h2>多选框组件示例</h2>
4
-
5
- <h3>基础多选框</h3>
6
- <div class="demo-section">
7
- <EbizCheckbox>未选中项</EbizCheckbox>
8
- <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
9
- <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
10
- <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
11
- </div>
12
-
13
- <h3>半选状态</h3>
14
- <div class="demo-section">
15
- <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
16
- </div>
17
-
18
- <h3>多选框组</h3>
19
- <div class="demo-section">
20
- <p>选中值:{{ groupValue }}</p>
21
- <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
22
- </div>
23
-
24
- <h3>全选功能</h3>
25
- <div class="demo-section">
26
- <p>选中值:{{ allCheckValue }}</p>
27
- <EbizCheckboxGroup v-model="allCheckValue">
28
- <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
29
- <EbizCheckbox value="1">选项一</EbizCheckbox>
30
- <EbizCheckbox value="2">选项二</EbizCheckbox>
31
- <EbizCheckbox value="3">选项三</EbizCheckbox>
32
- </EbizCheckboxGroup>
33
- </div>
34
- </div>
35
- </template>
36
-
37
- <script>
38
- export default {
39
- name: "CheckboxDemo"
40
- }
41
- </script>
42
-
43
- <script setup>
44
- import { ref } from 'vue';
45
- import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
46
-
47
- // 单个多选框状态
48
- const checkbox1 = ref(true);
49
- const checkboxDisabled = ref(true);
50
-
51
- // 多选框组的值
52
- const groupValue = ref(['option1']);
53
-
54
- // 多选框组的配置选项
55
- const options = [
56
- { label: '选项一', value: 'option1' },
57
- { label: '选项二', value: 'option2' },
58
- { label: '选项三', value: 'option3', disabled: true }
59
- ];
60
-
61
- // 多选框组的值变化事件
62
- const onGroupChange = (value, context) => {
63
- console.log('选中值变化:', value);
64
- console.log('上下文信息:', context);
65
- };
66
-
67
- // 全选功能的值
68
- const allCheckValue = ref(['1']);
69
-
70
- // 全选状态变化事件
71
- const onCheckAllChange = (checked) => {
72
- if (checked) {
73
- allCheckValue.value = ['1', '2', '3'];
74
- } else {
75
- allCheckValue.value = [];
76
- }
77
- };
78
- </script>
79
-
80
- <style lang="less" scoped>
81
- .checkbox-demo {
82
- padding: 20px;
83
-
84
- h2 {
85
- margin-bottom: 20px;
86
- font-size: 24px;
87
- }
88
-
89
- h3 {
90
- margin: 20px 0 10px;
91
- font-size: 18px;
92
- }
93
-
94
- .demo-section {
95
- padding: 16px;
96
- margin-bottom: 16px;
97
- border: 1px solid #eee;
98
- border-radius: 4px;
99
-
100
- .t-checkbox {
101
- margin-right: 16px;
102
- }
103
- }
104
- }
1
+ <template>
2
+ <div class="checkbox-demo">
3
+ <h2>多选框组件示例</h2>
4
+
5
+ <h3>基础多选框</h3>
6
+ <div class="demo-section">
7
+ <EbizCheckbox>未选中项</EbizCheckbox>
8
+ <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
9
+ <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
10
+ <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
11
+ </div>
12
+
13
+ <h3>半选状态</h3>
14
+ <div class="demo-section">
15
+ <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
16
+ </div>
17
+
18
+ <h3>多选框组</h3>
19
+ <div class="demo-section">
20
+ <p>选中值:{{ groupValue }}</p>
21
+ <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
22
+ </div>
23
+
24
+ <h3>全选功能</h3>
25
+ <div class="demo-section">
26
+ <p>选中值:{{ allCheckValue }}</p>
27
+ <EbizCheckboxGroup v-model="allCheckValue">
28
+ <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
29
+ <EbizCheckbox value="1">选项一</EbizCheckbox>
30
+ <EbizCheckbox value="2">选项二</EbizCheckbox>
31
+ <EbizCheckbox value="3">选项三</EbizCheckbox>
32
+ </EbizCheckboxGroup>
33
+ </div>
34
+ </div>
35
+ </template>
36
+
37
+ <script>
38
+ export default {
39
+ name: "CheckboxDemo"
40
+ }
41
+ </script>
42
+
43
+ <script setup>
44
+ import { ref } from 'vue';
45
+ import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
46
+
47
+ // 单个多选框状态
48
+ const checkbox1 = ref(true);
49
+ const checkboxDisabled = ref(true);
50
+
51
+ // 多选框组的值
52
+ const groupValue = ref(['option1']);
53
+
54
+ // 多选框组的配置选项
55
+ const options = [
56
+ { label: '选项一', value: 'option1' },
57
+ { label: '选项二', value: 'option2' },
58
+ { label: '选项三', value: 'option3', disabled: true }
59
+ ];
60
+
61
+ // 多选框组的值变化事件
62
+ const onGroupChange = (value, context) => {
63
+ console.log('选中值变化:', value);
64
+ console.log('上下文信息:', context);
65
+ };
66
+
67
+ // 全选功能的值
68
+ const allCheckValue = ref(['1']);
69
+
70
+ // 全选状态变化事件
71
+ const onCheckAllChange = (checked) => {
72
+ if (checked) {
73
+ allCheckValue.value = ['1', '2', '3'];
74
+ } else {
75
+ allCheckValue.value = [];
76
+ }
77
+ };
78
+ </script>
79
+
80
+ <style lang="less" scoped>
81
+ .checkbox-demo {
82
+ padding: 20px;
83
+
84
+ h2 {
85
+ margin-bottom: 20px;
86
+ font-size: 24px;
87
+ }
88
+
89
+ h3 {
90
+ margin: 20px 0 10px;
91
+ font-size: 18px;
92
+ }
93
+
94
+ .demo-section {
95
+ padding: 16px;
96
+ margin-bottom: 16px;
97
+ border: 1px solid #eee;
98
+ border-radius: 4px;
99
+
100
+ .t-checkbox {
101
+ margin-right: 16px;
102
+ }
103
+ }
104
+ }
105
105
  </style>
@@ -1,20 +1,20 @@
1
- <template>
2
- <div>
3
- <ebiz-route-breadcrumb />
4
- <ebiz-data-container />
5
- </div>
6
- </template>
7
-
8
- <script>
9
- import { EbizDataContainer } from '@/index.js'
10
-
11
- export default {
12
- name: 'DataContainerDemo',
13
- components: {
14
- EbizDataContainer
15
- }
16
- }
17
- </script>
18
-
19
- <style scoped>
1
+ <template>
2
+ <div>
3
+ <ebiz-route-breadcrumb />
4
+ <ebiz-data-container />
5
+ </div>
6
+ </template>
7
+
8
+ <script>
9
+ import { EbizDataContainer } from '@/index.js'
10
+
11
+ export default {
12
+ name: 'DataContainerDemo',
13
+ components: {
14
+ EbizDataContainer
15
+ }
16
+ }
17
+ </script>
18
+
19
+ <style scoped>
20
20
  </style>
@@ -1,126 +1,126 @@
1
- <template>
2
- <div class="dialog-demo">
3
- <h1>TDesign Dialog 组件示例</h1>
4
-
5
- <h2>基础对话框</h2>
6
- <div class="demo-section">
7
- <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
8
- <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框,用于展示简单的信息或进行简单的操作。'"
9
- :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
10
- </div>
11
-
12
- <h2>不同模式的对话框</h2>
13
- <div class="demo-section">
14
- <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
15
- <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
16
- <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
17
-
18
- <!-- 模态对话框 -->
19
- <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互,直到对话框关闭。'"
20
- :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
21
-
22
- <!-- 非模态对话框 -->
23
- <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
24
- :body="'非模态对话框不会阻止用户与页面的其他部分交互,可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
25
- cancel-btn="取消" />
26
-
27
- <!-- 全屏对话框 -->
28
- <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
29
- :body="'全屏对话框会占据整个屏幕,通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
30
- cancel-btn="取消" />
31
- </div>
32
-
33
- <h2>自定义内容的对话框</h2>
34
- <div class="demo-section">
35
- <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
36
- <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
37
- <template #body>
38
- <div style="padding: 20px;">
39
- <h3>这是自定义的内容区域</h3>
40
- <p>可以在这里放置任何你想要展示的内容,包括表单、图表、列表等。</p>
41
- <div style="margin-top: 20px;">
42
- <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
43
- </div>
44
- </div>
45
- </template>
46
- <template #footer>
47
- <div style="display: flex; justify-content: flex-end;">
48
- <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
49
- <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
50
- </div>
51
- </template>
52
- </EbizDialog>
53
- </div>
54
-
55
- <h2>可拖拽的对话框</h2>
56
- <div class="demo-section">
57
- <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
58
- <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
59
- :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
60
- </div>
61
-
62
- <h2>不同位置的对话框</h2>
63
- <div class="demo-section">
64
- <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
65
- <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
66
-
67
- <!-- 顶部对话框 -->
68
- <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
69
- :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
70
-
71
- <!-- 居中对话框 -->
72
- <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
73
- :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
74
- </div>
75
- </div>
76
- </template>
77
-
78
- <script setup>
79
- import { ref } from 'vue';
80
- import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
81
-
82
- // 基础对话框
83
- const showBasicDialog = ref(false);
84
-
85
- // 不同模式的对话框
86
- const showModalDialog = ref(false);
87
- const showModelessDialog = ref(false);
88
- const showFullscreenDialog = ref(false);
89
-
90
- // 自定义内容的对话框
91
- const showCustomDialog = ref(false);
92
- const customInput = ref('');
93
-
94
- // 可拖拽的对话框
95
- const showDraggableDialog = ref(false);
96
-
97
- // 不同位置的对话框
98
- const showTopDialog = ref(false);
99
- const showCenterDialog = ref(false);
100
-
101
- // 自定义确认处理函数
102
- const handleCustomConfirm = () => {
103
- // 在实际应用中,这里可以添加表单验证或数据处理逻辑
104
- console.log('自定义确认按钮点击,输入内容:', customInput.value);
105
- showCustomDialog.value = false;
106
- };
107
- </script>
108
-
109
- <style lang="less" scoped>
110
- .dialog-demo {
111
- padding: 20px;
112
-
113
- h1 {
114
- margin-bottom: 20px;
115
- }
116
-
117
- h2 {
118
- margin-top: 30px;
119
- margin-bottom: 16px;
120
- }
121
-
122
- .demo-section {
123
- margin-bottom: 24px;
124
- }
125
- }
1
+ <template>
2
+ <div class="dialog-demo">
3
+ <h1>TDesign Dialog 组件示例</h1>
4
+
5
+ <h2>基础对话框</h2>
6
+ <div class="demo-section">
7
+ <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
8
+ <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框,用于展示简单的信息或进行简单的操作。'"
9
+ :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
10
+ </div>
11
+
12
+ <h2>不同模式的对话框</h2>
13
+ <div class="demo-section">
14
+ <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
15
+ <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
16
+ <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
17
+
18
+ <!-- 模态对话框 -->
19
+ <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互,直到对话框关闭。'"
20
+ :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
21
+
22
+ <!-- 非模态对话框 -->
23
+ <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
24
+ :body="'非模态对话框不会阻止用户与页面的其他部分交互,可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
25
+ cancel-btn="取消" />
26
+
27
+ <!-- 全屏对话框 -->
28
+ <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
29
+ :body="'全屏对话框会占据整个屏幕,通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
30
+ cancel-btn="取消" />
31
+ </div>
32
+
33
+ <h2>自定义内容的对话框</h2>
34
+ <div class="demo-section">
35
+ <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
36
+ <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
37
+ <template #body>
38
+ <div style="padding: 20px;">
39
+ <h3>这是自定义的内容区域</h3>
40
+ <p>可以在这里放置任何你想要展示的内容,包括表单、图表、列表等。</p>
41
+ <div style="margin-top: 20px;">
42
+ <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
43
+ </div>
44
+ </div>
45
+ </template>
46
+ <template #footer>
47
+ <div style="display: flex; justify-content: flex-end;">
48
+ <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
49
+ <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
50
+ </div>
51
+ </template>
52
+ </EbizDialog>
53
+ </div>
54
+
55
+ <h2>可拖拽的对话框</h2>
56
+ <div class="demo-section">
57
+ <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
58
+ <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
59
+ :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
60
+ </div>
61
+
62
+ <h2>不同位置的对话框</h2>
63
+ <div class="demo-section">
64
+ <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
65
+ <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
66
+
67
+ <!-- 顶部对话框 -->
68
+ <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
69
+ :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
70
+
71
+ <!-- 居中对话框 -->
72
+ <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
73
+ :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
74
+ </div>
75
+ </div>
76
+ </template>
77
+
78
+ <script setup>
79
+ import { ref } from 'vue';
80
+ import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
81
+
82
+ // 基础对话框
83
+ const showBasicDialog = ref(false);
84
+
85
+ // 不同模式的对话框
86
+ const showModalDialog = ref(false);
87
+ const showModelessDialog = ref(false);
88
+ const showFullscreenDialog = ref(false);
89
+
90
+ // 自定义内容的对话框
91
+ const showCustomDialog = ref(false);
92
+ const customInput = ref('');
93
+
94
+ // 可拖拽的对话框
95
+ const showDraggableDialog = ref(false);
96
+
97
+ // 不同位置的对话框
98
+ const showTopDialog = ref(false);
99
+ const showCenterDialog = ref(false);
100
+
101
+ // 自定义确认处理函数
102
+ const handleCustomConfirm = () => {
103
+ // 在实际应用中,这里可以添加表单验证或数据处理逻辑
104
+ console.log('自定义确认按钮点击,输入内容:', customInput.value);
105
+ showCustomDialog.value = false;
106
+ };
107
+ </script>
108
+
109
+ <style lang="less" scoped>
110
+ .dialog-demo {
111
+ padding: 20px;
112
+
113
+ h1 {
114
+ margin-bottom: 20px;
115
+ }
116
+
117
+ h2 {
118
+ margin-top: 30px;
119
+ margin-bottom: 16px;
120
+ }
121
+
122
+ .demo-section {
123
+ margin-bottom: 24px;
124
+ }
125
+ }
126
126
  </style>
@@ -1,77 +1,77 @@
1
- <template>
2
- <div class="approval-demo">
3
- <h2>审批组件示例</h2>
4
-
5
- <div class="demo-section">
6
- <h3>基础用法</h3>
7
- <ebiz-approval
8
- v-model:approverList="approverList"
9
- v-model:ccList="ccList"
10
- key="approval-1"
11
- :required="true"
12
- @change="handleChange"
13
- />
14
- </div>
15
-
16
- <div class="demo-section">
17
- <h3>不显示抄送人</h3>
18
- <ebiz-approval
19
- v-model:approverList="approverList2"
20
- v-model:ccList="ccList2"
21
- key="approval-2"
22
- :id="2"
23
- :required="true"
24
- :showCC="false"
25
- @change="handleChange"
26
- />
27
- </div>
28
-
29
- <div class="demo-section">
30
- <h3>非必填</h3>
31
- <ebiz-approval
32
- v-model:approverList="approverList3"
33
- v-model:ccList="ccList3"
34
- key="approval-3"
35
- :id="3"
36
- :required="false"
37
- @change="handleChange"
38
- />
39
- </div>
40
- </div>
41
- </template>
42
-
43
- <script setup lang="ts">
44
- import { ref } from 'vue'
45
- import { EbizApproval } from '../index'
46
-
47
- const approverList = ref([])
48
- const ccList = ref([])
49
-
50
- const approverList2 = ref(['1'])
51
- const ccList2 = ref([])
52
-
53
- const approverList3 = ref(['1', '2', '3'])
54
- const ccList3 = ref(['4', '5'])
55
-
56
- const handleChange = (data: any) => {
57
- console.log('变更数据:', data)
58
- }
59
- </script>
60
-
61
- <style lang="less" scoped>
62
- .approval-demo {
63
- padding: 20px;
64
-
65
- h2 {
66
- margin-bottom: 24px;
67
- }
68
-
69
- .demo-section {
70
- margin-bottom: 32px;
71
-
72
- h3 {
73
- margin-bottom: 16px;
74
- }
75
- }
76
- }
1
+ <template>
2
+ <div class="approval-demo">
3
+ <h2>审批组件示例</h2>
4
+
5
+ <div class="demo-section">
6
+ <h3>基础用法</h3>
7
+ <ebiz-approval
8
+ v-model:approverList="approverList"
9
+ v-model:ccList="ccList"
10
+ key="approval-1"
11
+ :required="true"
12
+ @change="handleChange"
13
+ />
14
+ </div>
15
+
16
+ <div class="demo-section">
17
+ <h3>不显示抄送人</h3>
18
+ <ebiz-approval
19
+ v-model:approverList="approverList2"
20
+ v-model:ccList="ccList2"
21
+ key="approval-2"
22
+ :id="2"
23
+ :required="true"
24
+ :showCC="false"
25
+ @change="handleChange"
26
+ />
27
+ </div>
28
+
29
+ <div class="demo-section">
30
+ <h3>非必填</h3>
31
+ <ebiz-approval
32
+ v-model:approverList="approverList3"
33
+ v-model:ccList="ccList3"
34
+ key="approval-3"
35
+ :id="3"
36
+ :required="false"
37
+ @change="handleChange"
38
+ />
39
+ </div>
40
+ </div>
41
+ </template>
42
+
43
+ <script setup lang="ts">
44
+ import { ref } from 'vue'
45
+ import { EbizApproval } from '../index'
46
+
47
+ const approverList = ref([])
48
+ const ccList = ref([])
49
+
50
+ const approverList2 = ref(['1'])
51
+ const ccList2 = ref([])
52
+
53
+ const approverList3 = ref(['1', '2', '3'])
54
+ const ccList3 = ref(['4', '5'])
55
+
56
+ const handleChange = (data: any) => {
57
+ console.log('变更数据:', data)
58
+ }
59
+ </script>
60
+
61
+ <style lang="less" scoped>
62
+ .approval-demo {
63
+ padding: 20px;
64
+
65
+ h2 {
66
+ margin-bottom: 24px;
67
+ }
68
+
69
+ .demo-section {
70
+ margin-bottom: 32px;
71
+
72
+ h3 {
73
+ margin-bottom: 16px;
74
+ }
75
+ }
76
+ }
77
77
  </style>