@ebiz/designer-components 0.0.58 → 0.0.60
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 +5925 -5923
- 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 +262 -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
@@ -1,294 +1,294 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="demo-container">
|
3
|
-
<h1>TDesign 折叠面板组件示例</h1>
|
4
|
-
|
5
|
-
<div class="section">
|
6
|
-
<h2>基础折叠面板</h2>
|
7
|
-
<TdesignCollapse v-model="activeValues1">
|
8
|
-
<TdesignCollapsePanel value="1" header="这是一个折叠标题">
|
9
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
10
|
-
</TdesignCollapsePanel>
|
11
|
-
<TdesignCollapsePanel value="2" header="设置默认展开项">
|
12
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
13
|
-
</TdesignCollapsePanel>
|
14
|
-
<TdesignCollapsePanel value="3" header="自定义折叠面板内容">
|
15
|
-
<div class="custom-content">
|
16
|
-
<p>这是自定义内容区域,可以包含任何元素。</p>
|
17
|
-
<div class="custom-buttons">
|
18
|
-
<t-button theme="primary" size="small">按钮 1</t-button>
|
19
|
-
<t-button theme="default" size="small">按钮 2</t-button>
|
20
|
-
</div>
|
21
|
-
</div>
|
22
|
-
</TdesignCollapsePanel>
|
23
|
-
</TdesignCollapse>
|
24
|
-
<div class="value-display">当前展开项: {{ JSON.stringify(activeValues1) }}</div>
|
25
|
-
</div>
|
26
|
-
|
27
|
-
<div class="section">
|
28
|
-
<h2>手风琴模式</h2>
|
29
|
-
<TdesignCollapse v-model="activeValues2" expand-mutex>
|
30
|
-
<TdesignCollapsePanel value="1" header="这是一个折叠标题">
|
31
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
32
|
-
</TdesignCollapsePanel>
|
33
|
-
<TdesignCollapsePanel value="2" header="这是一个折叠标题">
|
34
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
35
|
-
</TdesignCollapsePanel>
|
36
|
-
<TdesignCollapsePanel value="3" header="这是一个折叠标题">
|
37
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
38
|
-
</TdesignCollapsePanel>
|
39
|
-
</TdesignCollapse>
|
40
|
-
<div class="value-display">当前展开项: {{ JSON.stringify(activeValues2) }}</div>
|
41
|
-
</div>
|
42
|
-
|
43
|
-
<div class="section">
|
44
|
-
<h2>自定义图标位置</h2>
|
45
|
-
<TdesignCollapse v-model="activeValues3" expand-icon-placement="right">
|
46
|
-
<TdesignCollapsePanel value="1" header="左侧标题,右侧图标">
|
47
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
48
|
-
</TdesignCollapsePanel>
|
49
|
-
<TdesignCollapsePanel value="2" header="左侧标题,右侧图标">
|
50
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
51
|
-
</TdesignCollapsePanel>
|
52
|
-
</TdesignCollapse>
|
53
|
-
</div>
|
54
|
-
|
55
|
-
<div class="section">
|
56
|
-
<h2>无边框模式</h2>
|
57
|
-
<TdesignCollapse v-model="activeValues4" borderless>
|
58
|
-
<TdesignCollapsePanel value="1" header="无边框模式标题">
|
59
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
60
|
-
</TdesignCollapsePanel>
|
61
|
-
<TdesignCollapsePanel value="2" header="无边框模式标题">
|
62
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
63
|
-
</TdesignCollapsePanel>
|
64
|
-
</TdesignCollapse>
|
65
|
-
</div>
|
66
|
-
|
67
|
-
<div class="section">
|
68
|
-
<h2>默认展开全部</h2>
|
69
|
-
<TdesignCollapse v-model="activeValues8" default-expand-all>
|
70
|
-
<TdesignCollapsePanel value="1" header="默认展开面板1">
|
71
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
72
|
-
</TdesignCollapsePanel>
|
73
|
-
<TdesignCollapsePanel value="2" header="默认展开面板2">
|
74
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
75
|
-
</TdesignCollapsePanel>
|
76
|
-
<TdesignCollapsePanel value="3" header="默认展开面板3">
|
77
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
78
|
-
</TdesignCollapsePanel>
|
79
|
-
</TdesignCollapse>
|
80
|
-
</div>
|
81
|
-
|
82
|
-
<div class="section">
|
83
|
-
<h2>嵌套折叠面板</h2>
|
84
|
-
<TdesignCollapse v-model="activeValues5">
|
85
|
-
<TdesignCollapsePanel value="1" header="父级折叠面板">
|
86
|
-
<TdesignCollapse v-model="nestedValues">
|
87
|
-
<TdesignCollapsePanel value="1-1" header="嵌套面板1">
|
88
|
-
这是嵌套面板1的内容
|
89
|
-
</TdesignCollapsePanel>
|
90
|
-
<TdesignCollapsePanel value="1-2" header="嵌套面板2">
|
91
|
-
这是嵌套面板2的内容
|
92
|
-
</TdesignCollapsePanel>
|
93
|
-
</TdesignCollapse>
|
94
|
-
</TdesignCollapsePanel>
|
95
|
-
</TdesignCollapse>
|
96
|
-
</div>
|
97
|
-
|
98
|
-
<div class="section">
|
99
|
-
<h2>禁用状态</h2>
|
100
|
-
<TdesignCollapse v-model="activeValues6">
|
101
|
-
<TdesignCollapsePanel value="1" header="可展开面板">
|
102
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
103
|
-
</TdesignCollapsePanel>
|
104
|
-
<TdesignCollapsePanel value="2" header="禁用的面板" disabled>
|
105
|
-
这部分内容不会被展开,因为面板已禁用。
|
106
|
-
</TdesignCollapsePanel>
|
107
|
-
</TdesignCollapse>
|
108
|
-
</div>
|
109
|
-
|
110
|
-
<div class="section">
|
111
|
-
<h2>销毁折叠内容</h2>
|
112
|
-
<TdesignCollapse v-model="activeValues9">
|
113
|
-
<TdesignCollapsePanel value="1" header="不销毁内容的面板">
|
114
|
-
<div class="custom-content">
|
115
|
-
<p>关闭后不会销毁内容,状态会保留</p>
|
116
|
-
<t-input v-model="inputValue1" placeholder="输入内容会被保留" />
|
117
|
-
</div>
|
118
|
-
</TdesignCollapsePanel>
|
119
|
-
<TdesignCollapsePanel value="2" header="销毁内容的面板" destroy-on-collapse>
|
120
|
-
<div class="custom-content">
|
121
|
-
<p>关闭后会销毁内容,状态不会保留</p>
|
122
|
-
<t-input v-model="inputValue2" placeholder="输入内容会被销毁" />
|
123
|
-
</div>
|
124
|
-
</TdesignCollapsePanel>
|
125
|
-
</TdesignCollapse>
|
126
|
-
</div>
|
127
|
-
|
128
|
-
<div class="section">
|
129
|
-
<h2>自定义右侧内容</h2>
|
130
|
-
<TdesignCollapse v-model="activeValues7">
|
131
|
-
<TdesignCollapsePanel value="1" header="带有右侧内容的面板">
|
132
|
-
<template #rightContent>
|
133
|
-
<div class="right-content">
|
134
|
-
<t-tag theme="primary">标签</t-tag>
|
135
|
-
<t-button theme="default" size="small" variant="text">操作</t-button>
|
136
|
-
</div>
|
137
|
-
</template>
|
138
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
139
|
-
</TdesignCollapsePanel>
|
140
|
-
</TdesignCollapse>
|
141
|
-
</div>
|
142
|
-
|
143
|
-
<div class="section">
|
144
|
-
<h2>受控用法示例</h2>
|
145
|
-
<div class="control-buttons">
|
146
|
-
<t-button @click="handleExpandAll">展开全部</t-button>
|
147
|
-
<t-button @click="handleCollapseAll">收起全部</t-button>
|
148
|
-
<t-button @click="handleToggleFirst">切换第一个</t-button>
|
149
|
-
</div>
|
150
|
-
<TdesignCollapse v-model="controlledValues" @change="handleControlledChange">
|
151
|
-
<TdesignCollapsePanel value="1" header="受控面板1">
|
152
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
153
|
-
</TdesignCollapsePanel>
|
154
|
-
<TdesignCollapsePanel value="2" header="受控面板2">
|
155
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
156
|
-
</TdesignCollapsePanel>
|
157
|
-
<TdesignCollapsePanel value="3" header="受控面板3">
|
158
|
-
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
159
|
-
</TdesignCollapsePanel>
|
160
|
-
</TdesignCollapse>
|
161
|
-
<div class="value-display">当前展开项: {{ JSON.stringify(controlledValues) }}</div>
|
162
|
-
</div>
|
163
|
-
</div>
|
164
|
-
</template>
|
165
|
-
|
166
|
-
<script>
|
167
|
-
import { defineComponent, ref } from 'vue';
|
168
|
-
import { Button as TButton, Tag as TTag, Input as TInput } from 'tdesign-vue-next';
|
169
|
-
import { TdesignCollapse, TdesignCollapsePanel } from '../index.js';
|
170
|
-
|
171
|
-
export default defineComponent({
|
172
|
-
name: 'TdesignCollapseDemo',
|
173
|
-
components: {
|
174
|
-
TdesignCollapse,
|
175
|
-
TdesignCollapsePanel,
|
176
|
-
TButton,
|
177
|
-
TTag,
|
178
|
-
TInput
|
179
|
-
},
|
180
|
-
setup() {
|
181
|
-
const activeValues1 = ref(['1']);
|
182
|
-
const activeValues2 = ref([]);
|
183
|
-
const activeValues3 = ref(['1']);
|
184
|
-
const activeValues4 = ref(['1']);
|
185
|
-
const activeValues5 = ref(['1']);
|
186
|
-
const activeValues6 = ref(['1']);
|
187
|
-
const activeValues7 = ref(['1']);
|
188
|
-
const activeValues8 = ref([]);
|
189
|
-
const activeValues9 = ref(['1']);
|
190
|
-
const nestedValues = ref(['1-1']);
|
191
|
-
|
192
|
-
// 用于销毁折叠面板的输入框内容示例
|
193
|
-
const inputValue1 = ref('');
|
194
|
-
const inputValue2 = ref('');
|
195
|
-
|
196
|
-
// 受控示例
|
197
|
-
const controlledValues = ref(['1']);
|
198
|
-
|
199
|
-
const handleExpandAll = () => {
|
200
|
-
controlledValues.value = ['1', '2', '3'];
|
201
|
-
};
|
202
|
-
|
203
|
-
const handleCollapseAll = () => {
|
204
|
-
controlledValues.value = [];
|
205
|
-
};
|
206
|
-
|
207
|
-
const handleToggleFirst = () => {
|
208
|
-
if (controlledValues.value.includes('1')) {
|
209
|
-
controlledValues.value = controlledValues.value.filter(item => item !== '1');
|
210
|
-
} else {
|
211
|
-
controlledValues.value = [...controlledValues.value, '1'];
|
212
|
-
}
|
213
|
-
};
|
214
|
-
|
215
|
-
const handleControlledChange = (val) => {
|
216
|
-
console.log('面板变化事件触发', val);
|
217
|
-
};
|
218
|
-
|
219
|
-
return {
|
220
|
-
activeValues1,
|
221
|
-
activeValues2,
|
222
|
-
activeValues3,
|
223
|
-
activeValues4,
|
224
|
-
activeValues5,
|
225
|
-
activeValues6,
|
226
|
-
activeValues7,
|
227
|
-
activeValues8,
|
228
|
-
activeValues9,
|
229
|
-
nestedValues,
|
230
|
-
inputValue1,
|
231
|
-
inputValue2,
|
232
|
-
controlledValues,
|
233
|
-
handleExpandAll,
|
234
|
-
handleCollapseAll,
|
235
|
-
handleToggleFirst,
|
236
|
-
handleControlledChange
|
237
|
-
};
|
238
|
-
}
|
239
|
-
});
|
240
|
-
</script>
|
241
|
-
|
242
|
-
<style scoped>
|
243
|
-
.demo-container {
|
244
|
-
padding: 20px;
|
245
|
-
max-width: 800px;
|
246
|
-
margin: 0 auto;
|
247
|
-
}
|
248
|
-
|
249
|
-
h1 {
|
250
|
-
font-size: 24px;
|
251
|
-
color: #0052d9;
|
252
|
-
margin-bottom: 20px;
|
253
|
-
}
|
254
|
-
|
255
|
-
.section {
|
256
|
-
margin-bottom: 40px;
|
257
|
-
}
|
258
|
-
|
259
|
-
h2 {
|
260
|
-
font-size: 18px;
|
261
|
-
margin-bottom: 16px;
|
262
|
-
padding-bottom: 8px;
|
263
|
-
border-bottom: 1px solid #eee;
|
264
|
-
}
|
265
|
-
|
266
|
-
.value-display {
|
267
|
-
margin-top: 12px;
|
268
|
-
font-size: 14px;
|
269
|
-
color: #666;
|
270
|
-
font-family: monospace;
|
271
|
-
}
|
272
|
-
|
273
|
-
.custom-content {
|
274
|
-
padding: 8px 0;
|
275
|
-
}
|
276
|
-
|
277
|
-
.custom-buttons {
|
278
|
-
margin-top: 12px;
|
279
|
-
display: flex;
|
280
|
-
gap: 8px;
|
281
|
-
}
|
282
|
-
|
283
|
-
.right-content {
|
284
|
-
display: flex;
|
285
|
-
align-items: center;
|
286
|
-
gap: 8px;
|
287
|
-
}
|
288
|
-
|
289
|
-
.control-buttons {
|
290
|
-
margin-bottom: 16px;
|
291
|
-
display: flex;
|
292
|
-
gap: 8px;
|
293
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="demo-container">
|
3
|
+
<h1>TDesign 折叠面板组件示例</h1>
|
4
|
+
|
5
|
+
<div class="section">
|
6
|
+
<h2>基础折叠面板</h2>
|
7
|
+
<TdesignCollapse v-model="activeValues1">
|
8
|
+
<TdesignCollapsePanel value="1" header="这是一个折叠标题">
|
9
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
10
|
+
</TdesignCollapsePanel>
|
11
|
+
<TdesignCollapsePanel value="2" header="设置默认展开项">
|
12
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
13
|
+
</TdesignCollapsePanel>
|
14
|
+
<TdesignCollapsePanel value="3" header="自定义折叠面板内容">
|
15
|
+
<div class="custom-content">
|
16
|
+
<p>这是自定义内容区域,可以包含任何元素。</p>
|
17
|
+
<div class="custom-buttons">
|
18
|
+
<t-button theme="primary" size="small">按钮 1</t-button>
|
19
|
+
<t-button theme="default" size="small">按钮 2</t-button>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
</TdesignCollapsePanel>
|
23
|
+
</TdesignCollapse>
|
24
|
+
<div class="value-display">当前展开项: {{ JSON.stringify(activeValues1) }}</div>
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div class="section">
|
28
|
+
<h2>手风琴模式</h2>
|
29
|
+
<TdesignCollapse v-model="activeValues2" expand-mutex>
|
30
|
+
<TdesignCollapsePanel value="1" header="这是一个折叠标题">
|
31
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
32
|
+
</TdesignCollapsePanel>
|
33
|
+
<TdesignCollapsePanel value="2" header="这是一个折叠标题">
|
34
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
35
|
+
</TdesignCollapsePanel>
|
36
|
+
<TdesignCollapsePanel value="3" header="这是一个折叠标题">
|
37
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
38
|
+
</TdesignCollapsePanel>
|
39
|
+
</TdesignCollapse>
|
40
|
+
<div class="value-display">当前展开项: {{ JSON.stringify(activeValues2) }}</div>
|
41
|
+
</div>
|
42
|
+
|
43
|
+
<div class="section">
|
44
|
+
<h2>自定义图标位置</h2>
|
45
|
+
<TdesignCollapse v-model="activeValues3" expand-icon-placement="right">
|
46
|
+
<TdesignCollapsePanel value="1" header="左侧标题,右侧图标">
|
47
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
48
|
+
</TdesignCollapsePanel>
|
49
|
+
<TdesignCollapsePanel value="2" header="左侧标题,右侧图标">
|
50
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
51
|
+
</TdesignCollapsePanel>
|
52
|
+
</TdesignCollapse>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div class="section">
|
56
|
+
<h2>无边框模式</h2>
|
57
|
+
<TdesignCollapse v-model="activeValues4" borderless>
|
58
|
+
<TdesignCollapsePanel value="1" header="无边框模式标题">
|
59
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
60
|
+
</TdesignCollapsePanel>
|
61
|
+
<TdesignCollapsePanel value="2" header="无边框模式标题">
|
62
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
63
|
+
</TdesignCollapsePanel>
|
64
|
+
</TdesignCollapse>
|
65
|
+
</div>
|
66
|
+
|
67
|
+
<div class="section">
|
68
|
+
<h2>默认展开全部</h2>
|
69
|
+
<TdesignCollapse v-model="activeValues8" default-expand-all>
|
70
|
+
<TdesignCollapsePanel value="1" header="默认展开面板1">
|
71
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
72
|
+
</TdesignCollapsePanel>
|
73
|
+
<TdesignCollapsePanel value="2" header="默认展开面板2">
|
74
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
75
|
+
</TdesignCollapsePanel>
|
76
|
+
<TdesignCollapsePanel value="3" header="默认展开面板3">
|
77
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
78
|
+
</TdesignCollapsePanel>
|
79
|
+
</TdesignCollapse>
|
80
|
+
</div>
|
81
|
+
|
82
|
+
<div class="section">
|
83
|
+
<h2>嵌套折叠面板</h2>
|
84
|
+
<TdesignCollapse v-model="activeValues5">
|
85
|
+
<TdesignCollapsePanel value="1" header="父级折叠面板">
|
86
|
+
<TdesignCollapse v-model="nestedValues">
|
87
|
+
<TdesignCollapsePanel value="1-1" header="嵌套面板1">
|
88
|
+
这是嵌套面板1的内容
|
89
|
+
</TdesignCollapsePanel>
|
90
|
+
<TdesignCollapsePanel value="1-2" header="嵌套面板2">
|
91
|
+
这是嵌套面板2的内容
|
92
|
+
</TdesignCollapsePanel>
|
93
|
+
</TdesignCollapse>
|
94
|
+
</TdesignCollapsePanel>
|
95
|
+
</TdesignCollapse>
|
96
|
+
</div>
|
97
|
+
|
98
|
+
<div class="section">
|
99
|
+
<h2>禁用状态</h2>
|
100
|
+
<TdesignCollapse v-model="activeValues6">
|
101
|
+
<TdesignCollapsePanel value="1" header="可展开面板">
|
102
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
103
|
+
</TdesignCollapsePanel>
|
104
|
+
<TdesignCollapsePanel value="2" header="禁用的面板" disabled>
|
105
|
+
这部分内容不会被展开,因为面板已禁用。
|
106
|
+
</TdesignCollapsePanel>
|
107
|
+
</TdesignCollapse>
|
108
|
+
</div>
|
109
|
+
|
110
|
+
<div class="section">
|
111
|
+
<h2>销毁折叠内容</h2>
|
112
|
+
<TdesignCollapse v-model="activeValues9">
|
113
|
+
<TdesignCollapsePanel value="1" header="不销毁内容的面板">
|
114
|
+
<div class="custom-content">
|
115
|
+
<p>关闭后不会销毁内容,状态会保留</p>
|
116
|
+
<t-input v-model="inputValue1" placeholder="输入内容会被保留" />
|
117
|
+
</div>
|
118
|
+
</TdesignCollapsePanel>
|
119
|
+
<TdesignCollapsePanel value="2" header="销毁内容的面板" destroy-on-collapse>
|
120
|
+
<div class="custom-content">
|
121
|
+
<p>关闭后会销毁内容,状态不会保留</p>
|
122
|
+
<t-input v-model="inputValue2" placeholder="输入内容会被销毁" />
|
123
|
+
</div>
|
124
|
+
</TdesignCollapsePanel>
|
125
|
+
</TdesignCollapse>
|
126
|
+
</div>
|
127
|
+
|
128
|
+
<div class="section">
|
129
|
+
<h2>自定义右侧内容</h2>
|
130
|
+
<TdesignCollapse v-model="activeValues7">
|
131
|
+
<TdesignCollapsePanel value="1" header="带有右侧内容的面板">
|
132
|
+
<template #rightContent>
|
133
|
+
<div class="right-content">
|
134
|
+
<t-tag theme="primary">标签</t-tag>
|
135
|
+
<t-button theme="default" size="small" variant="text">操作</t-button>
|
136
|
+
</div>
|
137
|
+
</template>
|
138
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
139
|
+
</TdesignCollapsePanel>
|
140
|
+
</TdesignCollapse>
|
141
|
+
</div>
|
142
|
+
|
143
|
+
<div class="section">
|
144
|
+
<h2>受控用法示例</h2>
|
145
|
+
<div class="control-buttons">
|
146
|
+
<t-button @click="handleExpandAll">展开全部</t-button>
|
147
|
+
<t-button @click="handleCollapseAll">收起全部</t-button>
|
148
|
+
<t-button @click="handleToggleFirst">切换第一个</t-button>
|
149
|
+
</div>
|
150
|
+
<TdesignCollapse v-model="controlledValues" @change="handleControlledChange">
|
151
|
+
<TdesignCollapsePanel value="1" header="受控面板1">
|
152
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
153
|
+
</TdesignCollapsePanel>
|
154
|
+
<TdesignCollapsePanel value="2" header="受控面板2">
|
155
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
156
|
+
</TdesignCollapsePanel>
|
157
|
+
<TdesignCollapsePanel value="3" header="受控面板3">
|
158
|
+
这部分是每个折叠面板折叠或展开的内容,可根据不同业务或用户的使用诉求,进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
159
|
+
</TdesignCollapsePanel>
|
160
|
+
</TdesignCollapse>
|
161
|
+
<div class="value-display">当前展开项: {{ JSON.stringify(controlledValues) }}</div>
|
162
|
+
</div>
|
163
|
+
</div>
|
164
|
+
</template>
|
165
|
+
|
166
|
+
<script>
|
167
|
+
import { defineComponent, ref } from 'vue';
|
168
|
+
import { Button as TButton, Tag as TTag, Input as TInput } from 'tdesign-vue-next';
|
169
|
+
import { TdesignCollapse, TdesignCollapsePanel } from '../index.js';
|
170
|
+
|
171
|
+
export default defineComponent({
|
172
|
+
name: 'TdesignCollapseDemo',
|
173
|
+
components: {
|
174
|
+
TdesignCollapse,
|
175
|
+
TdesignCollapsePanel,
|
176
|
+
TButton,
|
177
|
+
TTag,
|
178
|
+
TInput
|
179
|
+
},
|
180
|
+
setup() {
|
181
|
+
const activeValues1 = ref(['1']);
|
182
|
+
const activeValues2 = ref([]);
|
183
|
+
const activeValues3 = ref(['1']);
|
184
|
+
const activeValues4 = ref(['1']);
|
185
|
+
const activeValues5 = ref(['1']);
|
186
|
+
const activeValues6 = ref(['1']);
|
187
|
+
const activeValues7 = ref(['1']);
|
188
|
+
const activeValues8 = ref([]);
|
189
|
+
const activeValues9 = ref(['1']);
|
190
|
+
const nestedValues = ref(['1-1']);
|
191
|
+
|
192
|
+
// 用于销毁折叠面板的输入框内容示例
|
193
|
+
const inputValue1 = ref('');
|
194
|
+
const inputValue2 = ref('');
|
195
|
+
|
196
|
+
// 受控示例
|
197
|
+
const controlledValues = ref(['1']);
|
198
|
+
|
199
|
+
const handleExpandAll = () => {
|
200
|
+
controlledValues.value = ['1', '2', '3'];
|
201
|
+
};
|
202
|
+
|
203
|
+
const handleCollapseAll = () => {
|
204
|
+
controlledValues.value = [];
|
205
|
+
};
|
206
|
+
|
207
|
+
const handleToggleFirst = () => {
|
208
|
+
if (controlledValues.value.includes('1')) {
|
209
|
+
controlledValues.value = controlledValues.value.filter(item => item !== '1');
|
210
|
+
} else {
|
211
|
+
controlledValues.value = [...controlledValues.value, '1'];
|
212
|
+
}
|
213
|
+
};
|
214
|
+
|
215
|
+
const handleControlledChange = (val) => {
|
216
|
+
console.log('面板变化事件触发', val);
|
217
|
+
};
|
218
|
+
|
219
|
+
return {
|
220
|
+
activeValues1,
|
221
|
+
activeValues2,
|
222
|
+
activeValues3,
|
223
|
+
activeValues4,
|
224
|
+
activeValues5,
|
225
|
+
activeValues6,
|
226
|
+
activeValues7,
|
227
|
+
activeValues8,
|
228
|
+
activeValues9,
|
229
|
+
nestedValues,
|
230
|
+
inputValue1,
|
231
|
+
inputValue2,
|
232
|
+
controlledValues,
|
233
|
+
handleExpandAll,
|
234
|
+
handleCollapseAll,
|
235
|
+
handleToggleFirst,
|
236
|
+
handleControlledChange
|
237
|
+
};
|
238
|
+
}
|
239
|
+
});
|
240
|
+
</script>
|
241
|
+
|
242
|
+
<style scoped>
|
243
|
+
.demo-container {
|
244
|
+
padding: 20px;
|
245
|
+
max-width: 800px;
|
246
|
+
margin: 0 auto;
|
247
|
+
}
|
248
|
+
|
249
|
+
h1 {
|
250
|
+
font-size: 24px;
|
251
|
+
color: #0052d9;
|
252
|
+
margin-bottom: 20px;
|
253
|
+
}
|
254
|
+
|
255
|
+
.section {
|
256
|
+
margin-bottom: 40px;
|
257
|
+
}
|
258
|
+
|
259
|
+
h2 {
|
260
|
+
font-size: 18px;
|
261
|
+
margin-bottom: 16px;
|
262
|
+
padding-bottom: 8px;
|
263
|
+
border-bottom: 1px solid #eee;
|
264
|
+
}
|
265
|
+
|
266
|
+
.value-display {
|
267
|
+
margin-top: 12px;
|
268
|
+
font-size: 14px;
|
269
|
+
color: #666;
|
270
|
+
font-family: monospace;
|
271
|
+
}
|
272
|
+
|
273
|
+
.custom-content {
|
274
|
+
padding: 8px 0;
|
275
|
+
}
|
276
|
+
|
277
|
+
.custom-buttons {
|
278
|
+
margin-top: 12px;
|
279
|
+
display: flex;
|
280
|
+
gap: 8px;
|
281
|
+
}
|
282
|
+
|
283
|
+
.right-content {
|
284
|
+
display: flex;
|
285
|
+
align-items: center;
|
286
|
+
gap: 8px;
|
287
|
+
}
|
288
|
+
|
289
|
+
.control-buttons {
|
290
|
+
margin-bottom: 16px;
|
291
|
+
display: flex;
|
292
|
+
gap: 8px;
|
293
|
+
}
|
294
294
|
</style>
|