@ebiz/designer-components 0.0.63 → 0.1.1

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 (205) hide show
  1. package/README.md +29 -29
  2. package/dist/designer-components.css +1 -1
  3. package/dist/index.mjs +2099 -2089
  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 -332
  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/EbizDropdown.vue +117 -0
  26. package/src/components/EbizDropdownItem.vue +81 -0
  27. package/src/components/EbizEmployeeInfo.vue +138 -138
  28. package/src/components/EbizEmployeeSelector.vue +1095 -1095
  29. package/src/components/EbizFileUpload.vue +238 -238
  30. package/src/components/EbizMap.vue +541 -541
  31. package/src/components/EbizMeetingRoomSelector.vue +664 -664
  32. package/src/components/EbizMobileMeetingRoomSelector.vue +727 -727
  33. package/src/components/EbizOkrTree.vue +99 -99
  34. package/src/components/EbizPageHeader.vue +95 -95
  35. package/src/components/EbizPagination.vue +162 -162
  36. package/src/components/EbizPopconfirm.vue +47 -47
  37. package/src/components/EbizRadio.vue +86 -86
  38. package/src/components/EbizRadioGroup.vue +83 -83
  39. package/src/components/EbizRemoteSelect.vue +232 -232
  40. package/src/components/EbizRouteBreadcrumb.vue +46 -46
  41. package/src/components/EbizSelect.vue +85 -85
  42. package/src/components/EbizSpace.vue +100 -100
  43. package/src/components/EbizStatistic.vue +149 -149
  44. package/src/components/EbizStatsCard.vue +113 -113
  45. package/src/components/EbizSwiper.vue +113 -113
  46. package/src/components/EbizSwiperItem.vue +13 -13
  47. package/src/components/EbizSwitch.vue +85 -85
  48. package/src/components/EbizTabHeader.vue +132 -132
  49. package/src/components/EbizTabPanel.vue +22 -22
  50. package/src/components/EbizTable.vue +469 -469
  51. package/src/components/EbizTableColumn.vue +116 -116
  52. package/src/components/EbizTableSort.vue +179 -179
  53. package/src/components/EbizTabs.vue +142 -142
  54. package/src/components/EbizTdesignButtonDialog.vue +332 -332
  55. package/src/components/EbizTdesignLoading.vue +107 -107
  56. package/src/components/EbizTimePicker.vue +143 -143
  57. package/src/components/EbizTitle.vue +91 -91
  58. package/src/components/EbizTree.vue +152 -152
  59. package/src/components/EbizTreeMergeTable.vue +1414 -1414
  60. package/src/components/EbizTreeSelector.vue +418 -418
  61. package/src/components/EbizVxeTable.vue +290 -290
  62. package/src/components/Form.vue +28 -28
  63. package/src/components/Home.vue +7 -7
  64. package/src/components/MyComponent.vue +39 -39
  65. package/src/components/Table.vue +45 -45
  66. package/src/components/TdesignAlert.vue +115 -115
  67. package/src/components/TdesignButton.vue +135 -135
  68. package/src/components/TdesignCalendar/index.vue +145 -145
  69. package/src/components/TdesignCard.vue +195 -195
  70. package/src/components/TdesignCol.vue +101 -101
  71. package/src/components/TdesignCollapse.vue +142 -142
  72. package/src/components/TdesignCollapsePanel.vue +79 -79
  73. package/src/components/TdesignDatePicker.vue +124 -124
  74. package/src/components/TdesignDescriptions.vue +74 -74
  75. package/src/components/TdesignDescriptionsItem.vue +50 -50
  76. package/src/components/TdesignDialog.vue +225 -225
  77. package/src/components/TdesignForm.vue +138 -138
  78. package/src/components/TdesignFormItem.vue +105 -105
  79. package/src/components/TdesignGrid.vue +55 -55
  80. package/src/components/TdesignIcon.vue +67 -67
  81. package/src/components/TdesignImage.vue +162 -162
  82. package/src/components/TdesignImageViewer.vue +200 -200
  83. package/src/components/TdesignInput.vue +242 -242
  84. package/src/components/TdesignSelect.vue +444 -444
  85. package/src/components/TdesignTag.vue +117 -117
  86. package/src/components/TdesignTextarea.vue +142 -142
  87. package/src/components/TdesignTimeline.vue +58 -58
  88. package/src/components/TdesignTimelineItem.vue +71 -71
  89. package/src/components/TdesignUpload.vue +392 -392
  90. package/src/components/TdesignWatermark.vue +107 -107
  91. package/src/components/ebiz-form/components/cascader.vue +61 -61
  92. package/src/components/ebiz-form/components/checkbox.vue +37 -37
  93. package/src/components/ebiz-form/components/city.vue +137 -137
  94. package/src/components/ebiz-form/components/date-panel.vue +52 -52
  95. package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
  96. package/src/components/ebiz-form/components/date-range.vue +56 -56
  97. package/src/components/ebiz-form/components/date.vue +52 -52
  98. package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
  99. package/src/components/ebiz-form/components/editor.vue +78 -78
  100. package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
  101. package/src/components/ebiz-form/components/file.vue +149 -149
  102. package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
  103. package/src/components/ebiz-form/components/images.vue +129 -129
  104. package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
  105. package/src/components/ebiz-form/components/img.vue +129 -129
  106. package/src/components/ebiz-form/components/number.vue +50 -50
  107. package/src/components/ebiz-form/components/radio.vue +28 -28
  108. package/src/components/ebiz-form/components/select.vue +119 -119
  109. package/src/components/ebiz-form/components/switch.vue +23 -23
  110. package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
  111. package/src/components/ebiz-form/components/text.vue +52 -52
  112. package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
  113. package/src/components/ebiz-form/components/textarea.vue +29 -29
  114. package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
  115. package/src/components/ebiz-form/components/video.vue +97 -97
  116. package/src/components/ebiz-form/index.vue +157 -157
  117. package/src/components/examples/PopconfirmExample.vue +149 -149
  118. package/src/components/icons/IconCommunity.vue +7 -7
  119. package/src/components/icons/IconDocumentation.vue +7 -7
  120. package/src/components/icons/IconEcosystem.vue +7 -7
  121. package/src/components/icons/IconSupport.vue +7 -7
  122. package/src/components/icons/IconTooling.vue +19 -19
  123. package/src/components/senior/EbizSData/index.vue +262 -262
  124. package/src/components/senior/EbizSDialog/index.vue +715 -715
  125. package/src/components/senior/EbizSForm/README.md +157 -157
  126. package/src/components/senior/EbizSForm/index.vue +668 -668
  127. package/src/components/senior/EbizSForm/item.vue +512 -505
  128. package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
  129. package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
  130. package/src/index.js +224 -224
  131. package/src/main.js +55 -55
  132. package/src/router/index.js +386 -386
  133. package/src/utils/formatCode.js +24 -24
  134. package/src/utils/generateImportStatement.js +52 -52
  135. package/src/utils/hasJsx.js +25 -25
  136. package/src/utils/index.js +166 -166
  137. package/src/utils/mergeOptions.js +29 -29
  138. package/src/utils/parseRequiredBlocks.js +18 -18
  139. package/src/utils/upload.ts +126 -126
  140. package/src/utils/vue-sfc-validator.js +155 -155
  141. package/src/views/Button.vue +23 -23
  142. package/src/views/CheckboxDemo.vue +104 -104
  143. package/src/views/DataContainer.vue +19 -19
  144. package/src/views/DialogDemo.vue +125 -125
  145. package/src/views/EbizApprovalDemo.vue +76 -76
  146. package/src/views/EbizAutoFormDemo.vue +129 -129
  147. package/src/views/EbizAvatar.vue +223 -223
  148. package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
  149. package/src/views/EbizDetailBlockDemo.vue +30 -30
  150. package/src/views/EbizEmployeeInfo.vue +249 -249
  151. package/src/views/EbizEmployeeSelector.vue +83 -83
  152. package/src/views/EbizMap.vue +201 -201
  153. package/src/views/EbizMeetingRoomSelectorDemo.vue +293 -293
  154. package/src/views/EbizMobileMeetingRoomSelectorDemo.vue +566 -566
  155. package/src/views/EbizRadioDemo.vue +151 -151
  156. package/src/views/EbizSDataDemo.vue +136 -136
  157. package/src/views/EbizSDialogDemo.vue +301 -301
  158. package/src/views/EbizSForm/index.vue +359 -359
  159. package/src/views/EbizSFormDemo.vue +420 -420
  160. package/src/views/EbizSpace.vue +185 -185
  161. package/src/views/EbizSwiper.vue +157 -157
  162. package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
  163. package/src/views/Form.vue +19 -19
  164. package/src/views/GridDemo.vue +238 -238
  165. package/src/views/Home.vue +148 -148
  166. package/src/views/Mindmap.vue +17 -17
  167. package/src/views/MyComponent.vue +19 -19
  168. package/src/views/OkrTree.vue +19 -19
  169. package/src/views/PageHeaderDemo.vue +104 -104
  170. package/src/views/PaginationDemo.vue +96 -96
  171. package/src/views/PermissionBoxDemo.vue +85 -85
  172. package/src/views/PopconfirmDemo.vue +80 -80
  173. package/src/views/RemoteSelect.vue +350 -350
  174. package/src/views/StatisticDemo.vue +190 -190
  175. package/src/views/SwitchDemo.vue +79 -79
  176. package/src/views/Table.vue +19 -19
  177. package/src/views/TableDemo.vue +334 -334
  178. package/src/views/TableSortDemo.vue +143 -143
  179. package/src/views/TableView.vue +68 -68
  180. package/src/views/TabsDemo.vue +282 -282
  181. package/src/views/TagDemo.vue +101 -101
  182. package/src/views/TdesignAlert.vue +98 -98
  183. package/src/views/TdesignButton.vue +190 -190
  184. package/src/views/TdesignCalendar.vue +94 -94
  185. package/src/views/TdesignCard.vue +296 -296
  186. package/src/views/TdesignCollapse.vue +293 -293
  187. package/src/views/TdesignDatePicker.vue +187 -187
  188. package/src/views/TdesignDescriptions.vue +101 -101
  189. package/src/views/TdesignForm.vue +248 -248
  190. package/src/views/TdesignIcon.vue +203 -203
  191. package/src/views/TdesignImage.vue +215 -215
  192. package/src/views/TdesignImageViewer.vue +198 -198
  193. package/src/views/TdesignInput.vue +252 -252
  194. package/src/views/TdesignSelect.vue +473 -473
  195. package/src/views/TdesignSwiper.vue +157 -157
  196. package/src/views/TextareaDemo.vue +93 -93
  197. package/src/views/TimePickerDemo.vue +146 -146
  198. package/src/views/TimelineDemo.vue +160 -160
  199. package/src/views/Title.vue +19 -19
  200. package/src/views/TreeDemo.vue +254 -254
  201. package/src/views/TreeMergeTableDemo.vue +239 -239
  202. package/src/views/TreeSelectorDemo.vue +245 -245
  203. package/src/views/UploadDemo.vue +121 -121
  204. package/src/views/VxeTableDemo.vue +279 -279
  205. package/src/views/WatermarkDemo.vue +85 -85
@@ -1,146 +1,146 @@
1
- <template>
2
- <t-calendar
3
- :cell-click="cellClick"
4
- :controller="controller"
5
- :cell-append="cellAppend"
6
- :cell-data="cellData"
7
- :firstDayOfWeek="firstDayOfWeek"
8
- :format="format"
9
- :head-mode="headMode"
10
- :is-full-screen="isFullScreen"
11
- :multiple="multiple"
12
- :month="month"
13
- :mode="mode"
14
- :month-change="monthChange"
15
- :render-cell="renderCell"
16
- :theme="theme"
17
- :value="modelValue"
18
- :year="year"
19
- @cell-click="handleCellClick"
20
- @cell-double-click="handleCellDoubleClick"
21
- @cell-right-click="handleCellRightClick"
22
- @month-change="handleMonthChange"
23
- >
24
- <template v-if="$slots.head" #head>
25
- <slot name="head"></slot>
26
- </template>
27
- <template v-if="$slots.cellAppend" #cellAppend="slotProps">
28
- <slot name="cellAppend" v-bind="slotProps"></slot>
29
- </template>
30
- <template v-if="$slots.cell" #cell="slotProps">
31
- <slot name="cell" v-bind="slotProps"></slot>
32
- </template>
33
- <template v-if="$slots.month" #month>
34
- <slot name="month"></slot>
35
- </template>
36
- <template v-if="$slots.year" #year>
37
- <slot name="year"></slot>
38
- </template>
39
- <template v-if="$slots.control" #control>
40
- <slot name="control"></slot>
41
- </template>
42
- </t-calendar>
43
- </template>
44
-
45
- <script>
46
- import { Calendar as TCalendar } from 'tdesign-vue-next'
47
-
48
- export default {
49
- name: 'TdesignCalendar',
50
- components: {
51
- 't-calendar': TCalendar
52
- },
53
- props: {
54
- cellAppend: {
55
- type: Function,
56
- default: null
57
- },
58
- cellClick: {
59
- type: Function,
60
- default: null
61
- },
62
- cellData: {
63
- type: Function,
64
- default: null
65
- },
66
- controller: {
67
- type: Object,
68
- default: () => ({ visible: true })
69
- },
70
- firstDayOfWeek: {
71
- type: Number,
72
- default: 1,
73
- validator: (val) => [1, 2, 3, 4, 5, 6, 7].includes(val)
74
- },
75
- format: {
76
- type: String,
77
- default: undefined
78
- },
79
- headMode: {
80
- type: String,
81
- default: 'month-only',
82
- validator: (val) => ['month-only', 'year-month'].includes(val)
83
- },
84
- isFullScreen: {
85
- type: Boolean,
86
- default: true
87
- },
88
- mode: {
89
- type: String,
90
- default: 'month',
91
- validator: (val) => ['month', 'year'].includes(val)
92
- },
93
- month: {
94
- type: Number,
95
- default: undefined
96
- },
97
- monthChange: {
98
- type: Function,
99
- default: null
100
- },
101
- multiple: {
102
- type: Boolean,
103
- default: false
104
- },
105
- renderCell: {
106
- type: Function,
107
- default: null
108
- },
109
- theme: {
110
- type: String,
111
- default: 'full',
112
- validator: (val) => ['full', 'card'].includes(val)
113
- },
114
- modelValue: {
115
- type: [String, Number, Array, Date],
116
- default: null
117
- },
118
- year: {
119
- type: Number,
120
- default: undefined
121
- }
122
- },
123
- emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change', 'update:modelValue'],
124
- methods: {
125
- handleCellClick(options) {
126
- this.$emit('cell-click', options)
127
- if (options && options.date) {
128
- this.$emit('update:modelValue', options.date)
129
- }
130
- },
131
- handleCellDoubleClick(options) {
132
- this.$emit('cell-double-click', options)
133
- },
134
- handleCellRightClick(options) {
135
- this.$emit('cell-right-click', options)
136
- },
137
- handleMonthChange(options) {
138
- this.$emit('month-change', options)
139
- }
140
- }
141
- }
142
- </script>
143
-
144
- <style scoped>
145
- /* 可以在这里添加自定义样式 */
1
+ <template>
2
+ <t-calendar
3
+ :cell-click="cellClick"
4
+ :controller="controller"
5
+ :cell-append="cellAppend"
6
+ :cell-data="cellData"
7
+ :firstDayOfWeek="firstDayOfWeek"
8
+ :format="format"
9
+ :head-mode="headMode"
10
+ :is-full-screen="isFullScreen"
11
+ :multiple="multiple"
12
+ :month="month"
13
+ :mode="mode"
14
+ :month-change="monthChange"
15
+ :render-cell="renderCell"
16
+ :theme="theme"
17
+ :value="modelValue"
18
+ :year="year"
19
+ @cell-click="handleCellClick"
20
+ @cell-double-click="handleCellDoubleClick"
21
+ @cell-right-click="handleCellRightClick"
22
+ @month-change="handleMonthChange"
23
+ >
24
+ <template v-if="$slots.head" #head>
25
+ <slot name="head"></slot>
26
+ </template>
27
+ <template v-if="$slots.cellAppend" #cellAppend="slotProps">
28
+ <slot name="cellAppend" v-bind="slotProps"></slot>
29
+ </template>
30
+ <template v-if="$slots.cell" #cell="slotProps">
31
+ <slot name="cell" v-bind="slotProps"></slot>
32
+ </template>
33
+ <template v-if="$slots.month" #month>
34
+ <slot name="month"></slot>
35
+ </template>
36
+ <template v-if="$slots.year" #year>
37
+ <slot name="year"></slot>
38
+ </template>
39
+ <template v-if="$slots.control" #control>
40
+ <slot name="control"></slot>
41
+ </template>
42
+ </t-calendar>
43
+ </template>
44
+
45
+ <script>
46
+ import { Calendar as TCalendar } from 'tdesign-vue-next'
47
+
48
+ export default {
49
+ name: 'TdesignCalendar',
50
+ components: {
51
+ 't-calendar': TCalendar
52
+ },
53
+ props: {
54
+ cellAppend: {
55
+ type: Function,
56
+ default: null
57
+ },
58
+ cellClick: {
59
+ type: Function,
60
+ default: null
61
+ },
62
+ cellData: {
63
+ type: Function,
64
+ default: null
65
+ },
66
+ controller: {
67
+ type: Object,
68
+ default: () => ({ visible: true })
69
+ },
70
+ firstDayOfWeek: {
71
+ type: Number,
72
+ default: 1,
73
+ validator: (val) => [1, 2, 3, 4, 5, 6, 7].includes(val)
74
+ },
75
+ format: {
76
+ type: String,
77
+ default: undefined
78
+ },
79
+ headMode: {
80
+ type: String,
81
+ default: 'month-only',
82
+ validator: (val) => ['month-only', 'year-month'].includes(val)
83
+ },
84
+ isFullScreen: {
85
+ type: Boolean,
86
+ default: true
87
+ },
88
+ mode: {
89
+ type: String,
90
+ default: 'month',
91
+ validator: (val) => ['month', 'year'].includes(val)
92
+ },
93
+ month: {
94
+ type: Number,
95
+ default: undefined
96
+ },
97
+ monthChange: {
98
+ type: Function,
99
+ default: null
100
+ },
101
+ multiple: {
102
+ type: Boolean,
103
+ default: false
104
+ },
105
+ renderCell: {
106
+ type: Function,
107
+ default: null
108
+ },
109
+ theme: {
110
+ type: String,
111
+ default: 'full',
112
+ validator: (val) => ['full', 'card'].includes(val)
113
+ },
114
+ modelValue: {
115
+ type: [String, Number, Array, Date],
116
+ default: null
117
+ },
118
+ year: {
119
+ type: Number,
120
+ default: undefined
121
+ }
122
+ },
123
+ emits: ['cell-click', 'cell-double-click', 'cell-right-click', 'month-change', 'update:modelValue'],
124
+ methods: {
125
+ handleCellClick(options) {
126
+ this.$emit('cell-click', options)
127
+ if (options && options.date) {
128
+ this.$emit('update:modelValue', options.date)
129
+ }
130
+ },
131
+ handleCellDoubleClick(options) {
132
+ this.$emit('cell-double-click', options)
133
+ },
134
+ handleCellRightClick(options) {
135
+ this.$emit('cell-right-click', options)
136
+ },
137
+ handleMonthChange(options) {
138
+ this.$emit('month-change', options)
139
+ }
140
+ }
141
+ }
142
+ </script>
143
+
144
+ <style scoped>
145
+ /* 可以在这里添加自定义样式 */
146
146
  </style>
@@ -1,196 +1,196 @@
1
- <template>
2
- <td-card
3
- :actions="actions"
4
- :avatar="avatar"
5
- :bordered="bordered"
6
- :cover="cover"
7
- :description="description"
8
- :footer="footer"
9
- :header="header"
10
- :headerBordered="headerBordered"
11
- :hoverShadow="hoverShadow"
12
- :loading="loading"
13
- :loadingProps="loadingProps"
14
- :shadow="shadow"
15
- :size="size"
16
- :status="status"
17
- :subtitle="subtitle"
18
- :theme="theme"
19
- :title="title"
20
- @click="handleClick"
21
- >
22
- <!-- 操作区域插槽 -->
23
- <template v-if="$slots.actions" #actions>
24
- <slot name="actions"></slot>
25
- </template>
26
-
27
- <!-- 头像插槽 -->
28
- <template v-if="$slots.avatar" #avatar>
29
- <slot name="avatar"></slot>
30
- </template>
31
-
32
- <!-- 内容插槽 -->
33
- <template v-if="$slots.content" #content>
34
- <slot name="content"></slot>
35
- </template>
36
-
37
- <!-- 封面图插槽 -->
38
- <template v-if="$slots.cover" #cover>
39
- <slot name="cover"></slot>
40
- </template>
41
-
42
- <!-- 默认内容插槽 -->
43
- <template v-if="$slots.default" #default>
44
- <slot name="default"></slot>
45
- </template>
46
-
47
- <!-- 描述文案插槽 -->
48
- <template v-if="$slots.description" #description>
49
- <slot name="description"></slot>
50
- </template>
51
-
52
- <!-- 底部内容插槽 -->
53
- <template v-if="$slots.footer" #footer>
54
- <slot name="footer"></slot>
55
- </template>
56
-
57
- <!-- 顶部内容插槽 -->
58
- <template v-if="$slots.header" #header>
59
- <slot name="header"></slot>
60
- </template>
61
-
62
- <!-- 加载状态插槽 -->
63
- <template v-if="$slots.loading" #loading>
64
- <slot name="loading"></slot>
65
- </template>
66
-
67
- <!-- 副标题插槽 -->
68
- <template v-if="$slots.subtitle" #subtitle>
69
- <slot name="subtitle"></slot>
70
- </template>
71
-
72
- <!-- 标题插槽 -->
73
- <template v-if="$slots.title" #title>
74
- <slot name="title"></slot>
75
- </template>
76
-
77
- <!-- 默认插槽 -->
78
- <slot></slot>
79
- </td-card>
80
- </template>
81
-
82
- <script>
83
- export default {
84
- name: "EbizTdesignCard"
85
- }
86
- </script>
87
-
88
- <script setup>
89
- import { defineProps, defineEmits } from 'vue';
90
- import { Card as TdCard } from 'tdesign-vue-next';
91
-
92
- defineProps({
93
- // 卡片操作区
94
- actions: {
95
- type: [String, Object, Function],
96
- default: ''
97
- },
98
- // 卡片中的用户头像,仅在海报风格的卡片中有效
99
- avatar: {
100
- type: [String, Object, Function],
101
- default: ''
102
- },
103
- // 是否有边框
104
- bordered: {
105
- type: Boolean,
106
- default: true
107
- },
108
- // 卡片内容
109
- content: {
110
- type: [String, Object, Function],
111
- default: ''
112
- },
113
- // 卡片封面图
114
- cover: {
115
- type: [String, Object, Function],
116
- default: ''
117
- },
118
- // 卡片描述文案
119
- description: {
120
- type: [String, Object, Function],
121
- default: ''
122
- },
123
- // 卡片底部内容,可完全自定义
124
- footer: {
125
- type: [String, Object, Function],
126
- default: ''
127
- },
128
- // 卡片顶部内容,优先级高于其他所有元素
129
- header: {
130
- type: [String, Object, Function],
131
- default: ''
132
- },
133
- // 头部是否带分割线,仅在有header时有效
134
- headerBordered: {
135
- type: Boolean,
136
- default: false
137
- },
138
- // hover时是否有阴影
139
- hoverShadow: {
140
- type: Boolean,
141
- default: false
142
- },
143
- // 加载状态
144
- loading: {
145
- type: [Boolean, Object, Function],
146
- default: false
147
- },
148
- // 透传加载组件(Loading)全部属性
149
- loadingProps: {
150
- type: Object,
151
- default: () => ({})
152
- },
153
- // 是否显示卡片阴影
154
- shadow: {
155
- type: Boolean,
156
- default: false
157
- },
158
- // 尺寸
159
- size: {
160
- type: String,
161
- default: 'medium',
162
- validator: (val) => ['medium', 'small'].includes(val)
163
- },
164
- // 卡片状态内容,仅在操作区域不在顶部时有效(即 theme=poster2)
165
- status: {
166
- type: String,
167
- default: ''
168
- },
169
- // 卡片副标题
170
- subtitle: {
171
- type: [String, Object, Function],
172
- default: ''
173
- },
174
- // 卡片风格
175
- theme: {
176
- type: String,
177
- default: 'normal',
178
- validator: (val) => ['normal', 'poster1', 'poster2'].includes(val)
179
- },
180
- // 卡片标题
181
- title: {
182
- type: [String, Object, Function],
183
- default: ''
184
- }
185
- });
186
-
187
- const emit = defineEmits(['click']);
188
-
189
- const handleClick = (e) => {
190
- emit('click', e);
191
- };
192
- </script>
193
-
194
- <style lang="less" scoped>
195
- /* 自定义样式 */
1
+ <template>
2
+ <td-card
3
+ :actions="actions"
4
+ :avatar="avatar"
5
+ :bordered="bordered"
6
+ :cover="cover"
7
+ :description="description"
8
+ :footer="footer"
9
+ :header="header"
10
+ :headerBordered="headerBordered"
11
+ :hoverShadow="hoverShadow"
12
+ :loading="loading"
13
+ :loadingProps="loadingProps"
14
+ :shadow="shadow"
15
+ :size="size"
16
+ :status="status"
17
+ :subtitle="subtitle"
18
+ :theme="theme"
19
+ :title="title"
20
+ @click="handleClick"
21
+ >
22
+ <!-- 操作区域插槽 -->
23
+ <template v-if="$slots.actions" #actions>
24
+ <slot name="actions"></slot>
25
+ </template>
26
+
27
+ <!-- 头像插槽 -->
28
+ <template v-if="$slots.avatar" #avatar>
29
+ <slot name="avatar"></slot>
30
+ </template>
31
+
32
+ <!-- 内容插槽 -->
33
+ <template v-if="$slots.content" #content>
34
+ <slot name="content"></slot>
35
+ </template>
36
+
37
+ <!-- 封面图插槽 -->
38
+ <template v-if="$slots.cover" #cover>
39
+ <slot name="cover"></slot>
40
+ </template>
41
+
42
+ <!-- 默认内容插槽 -->
43
+ <template v-if="$slots.default" #default>
44
+ <slot name="default"></slot>
45
+ </template>
46
+
47
+ <!-- 描述文案插槽 -->
48
+ <template v-if="$slots.description" #description>
49
+ <slot name="description"></slot>
50
+ </template>
51
+
52
+ <!-- 底部内容插槽 -->
53
+ <template v-if="$slots.footer" #footer>
54
+ <slot name="footer"></slot>
55
+ </template>
56
+
57
+ <!-- 顶部内容插槽 -->
58
+ <template v-if="$slots.header" #header>
59
+ <slot name="header"></slot>
60
+ </template>
61
+
62
+ <!-- 加载状态插槽 -->
63
+ <template v-if="$slots.loading" #loading>
64
+ <slot name="loading"></slot>
65
+ </template>
66
+
67
+ <!-- 副标题插槽 -->
68
+ <template v-if="$slots.subtitle" #subtitle>
69
+ <slot name="subtitle"></slot>
70
+ </template>
71
+
72
+ <!-- 标题插槽 -->
73
+ <template v-if="$slots.title" #title>
74
+ <slot name="title"></slot>
75
+ </template>
76
+
77
+ <!-- 默认插槽 -->
78
+ <slot></slot>
79
+ </td-card>
80
+ </template>
81
+
82
+ <script>
83
+ export default {
84
+ name: "EbizTdesignCard"
85
+ }
86
+ </script>
87
+
88
+ <script setup>
89
+ import { defineProps, defineEmits } from 'vue';
90
+ import { Card as TdCard } from 'tdesign-vue-next';
91
+
92
+ defineProps({
93
+ // 卡片操作区
94
+ actions: {
95
+ type: [String, Object, Function],
96
+ default: ''
97
+ },
98
+ // 卡片中的用户头像,仅在海报风格的卡片中有效
99
+ avatar: {
100
+ type: [String, Object, Function],
101
+ default: ''
102
+ },
103
+ // 是否有边框
104
+ bordered: {
105
+ type: Boolean,
106
+ default: true
107
+ },
108
+ // 卡片内容
109
+ content: {
110
+ type: [String, Object, Function],
111
+ default: ''
112
+ },
113
+ // 卡片封面图
114
+ cover: {
115
+ type: [String, Object, Function],
116
+ default: ''
117
+ },
118
+ // 卡片描述文案
119
+ description: {
120
+ type: [String, Object, Function],
121
+ default: ''
122
+ },
123
+ // 卡片底部内容,可完全自定义
124
+ footer: {
125
+ type: [String, Object, Function],
126
+ default: ''
127
+ },
128
+ // 卡片顶部内容,优先级高于其他所有元素
129
+ header: {
130
+ type: [String, Object, Function],
131
+ default: ''
132
+ },
133
+ // 头部是否带分割线,仅在有header时有效
134
+ headerBordered: {
135
+ type: Boolean,
136
+ default: false
137
+ },
138
+ // hover时是否有阴影
139
+ hoverShadow: {
140
+ type: Boolean,
141
+ default: false
142
+ },
143
+ // 加载状态
144
+ loading: {
145
+ type: [Boolean, Object, Function],
146
+ default: false
147
+ },
148
+ // 透传加载组件(Loading)全部属性
149
+ loadingProps: {
150
+ type: Object,
151
+ default: () => ({})
152
+ },
153
+ // 是否显示卡片阴影
154
+ shadow: {
155
+ type: Boolean,
156
+ default: false
157
+ },
158
+ // 尺寸
159
+ size: {
160
+ type: String,
161
+ default: 'medium',
162
+ validator: (val) => ['medium', 'small'].includes(val)
163
+ },
164
+ // 卡片状态内容,仅在操作区域不在顶部时有效(即 theme=poster2)
165
+ status: {
166
+ type: String,
167
+ default: ''
168
+ },
169
+ // 卡片副标题
170
+ subtitle: {
171
+ type: [String, Object, Function],
172
+ default: ''
173
+ },
174
+ // 卡片风格
175
+ theme: {
176
+ type: String,
177
+ default: 'normal',
178
+ validator: (val) => ['normal', 'poster1', 'poster2'].includes(val)
179
+ },
180
+ // 卡片标题
181
+ title: {
182
+ type: [String, Object, Function],
183
+ default: ''
184
+ }
185
+ });
186
+
187
+ const emit = defineEmits(['click']);
188
+
189
+ const handleClick = (e) => {
190
+ emit('click', e);
191
+ };
192
+ </script>
193
+
194
+ <style lang="less" scoped>
195
+ /* 自定义样式 */
196
196
  </style>