@ebiz/designer-components 0.0.57 → 0.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -29
- package/dist/designer-components.css +1 -1
- package/dist/index.mjs +4822 -4822
- package/package.json +1 -1
- package/src/App.vue +26 -26
- package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
- package/src/apiService/mockDataService.js +115 -115
- package/src/apiService/simpleDataService.js +297 -297
- package/src/assets/base.css +86 -86
- package/src/assets/logo.svg +1 -1
- package/src/components/Button.vue +149 -149
- package/src/components/DataContainer.vue +40 -40
- package/src/components/EbizApproval.vue +332 -338
- package/src/components/EbizAutoForm.vue +596 -596
- package/src/components/EbizAvatar.vue +115 -115
- package/src/components/EbizCheckbox.vue +93 -93
- package/src/components/EbizCheckboxGroup.vue +69 -69
- package/src/components/EbizDepartmentSelector.vue +144 -144
- package/src/components/EbizDescriptions.vue +340 -340
- package/src/components/EbizDescriptionsItem.vue +47 -47
- package/src/components/EbizDetailBlock.vue +81 -81
- package/src/components/EbizDialog.vue +260 -260
- package/src/components/EbizDiv.vue +32 -32
- package/src/components/EbizDivider.vue +96 -96
- package/src/components/EbizEmployeeInfo.vue +138 -138
- package/src/components/EbizEmployeeSelector.vue +1093 -1086
- package/src/components/EbizFileUpload.vue +238 -238
- package/src/components/EbizMap.vue +541 -541
- package/src/components/EbizOkrTree.vue +99 -99
- package/src/components/EbizPageHeader.vue +95 -95
- package/src/components/EbizPagination.vue +162 -162
- package/src/components/EbizPopconfirm.vue +47 -47
- package/src/components/EbizRadio.vue +86 -86
- package/src/components/EbizRadioGroup.vue +83 -83
- package/src/components/EbizRemoteSelect.vue +232 -232
- package/src/components/EbizRouteBreadcrumb.vue +46 -46
- package/src/components/EbizSelect.vue +85 -85
- package/src/components/EbizSpace.vue +100 -100
- package/src/components/EbizStatistic.vue +149 -149
- package/src/components/EbizStatsCard.vue +113 -113
- package/src/components/EbizSwiper.vue +113 -113
- package/src/components/EbizSwiperItem.vue +13 -13
- package/src/components/EbizSwitch.vue +85 -85
- package/src/components/EbizTabHeader.vue +132 -132
- package/src/components/EbizTabPanel.vue +22 -22
- package/src/components/EbizTable.vue +469 -469
- package/src/components/EbizTableColumn.vue +116 -116
- package/src/components/EbizTableSort.vue +179 -179
- package/src/components/EbizTabs.vue +142 -142
- package/src/components/EbizTdesignButtonDialog.vue +332 -332
- package/src/components/EbizTdesignLoading.vue +107 -107
- package/src/components/EbizTimePicker.vue +143 -143
- package/src/components/EbizTitle.vue +91 -91
- package/src/components/EbizTree.vue +152 -152
- package/src/components/EbizTreeMergeTable.vue +1414 -1414
- package/src/components/EbizTreeSelector.vue +418 -418
- package/src/components/EbizVxeTable.vue +290 -290
- package/src/components/Form.vue +28 -28
- package/src/components/Home.vue +7 -7
- package/src/components/MyComponent.vue +39 -39
- package/src/components/Table.vue +45 -45
- package/src/components/TdesignAlert.vue +115 -115
- package/src/components/TdesignButton.vue +135 -135
- package/src/components/TdesignCalendar/index.vue +145 -145
- package/src/components/TdesignCard.vue +195 -195
- package/src/components/TdesignCol.vue +101 -101
- package/src/components/TdesignCollapse.vue +142 -142
- package/src/components/TdesignCollapsePanel.vue +79 -79
- package/src/components/TdesignDatePicker.vue +124 -124
- package/src/components/TdesignDescriptions.vue +74 -74
- package/src/components/TdesignDescriptionsItem.vue +50 -50
- package/src/components/TdesignDialog.vue +225 -225
- package/src/components/TdesignForm.vue +138 -138
- package/src/components/TdesignFormItem.vue +105 -105
- package/src/components/TdesignGrid.vue +55 -55
- package/src/components/TdesignIcon.vue +67 -67
- package/src/components/TdesignImage.vue +162 -162
- package/src/components/TdesignImageViewer.vue +200 -200
- package/src/components/TdesignInput.vue +242 -242
- package/src/components/TdesignSelect.vue +444 -444
- package/src/components/TdesignTag.vue +117 -117
- package/src/components/TdesignTextarea.vue +142 -142
- package/src/components/TdesignTimeline.vue +58 -58
- package/src/components/TdesignTimelineItem.vue +71 -71
- package/src/components/TdesignUpload.vue +388 -388
- package/src/components/TdesignWatermark.vue +107 -107
- package/src/components/ebiz-form/components/cascader.vue +61 -61
- package/src/components/ebiz-form/components/checkbox.vue +37 -37
- package/src/components/ebiz-form/components/city.vue +137 -137
- package/src/components/ebiz-form/components/date-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range.vue +56 -56
- package/src/components/ebiz-form/components/date.vue +52 -52
- package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/editor.vue +78 -78
- package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/file.vue +149 -149
- package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/images.vue +129 -129
- package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/img.vue +129 -129
- package/src/components/ebiz-form/components/number.vue +50 -50
- package/src/components/ebiz-form/components/radio.vue +28 -28
- package/src/components/ebiz-form/components/select.vue +119 -119
- package/src/components/ebiz-form/components/switch.vue +23 -23
- package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/text.vue +52 -52
- package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
- package/src/components/ebiz-form/components/textarea.vue +29 -29
- package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/video.vue +97 -97
- package/src/components/ebiz-form/index.vue +157 -157
- package/src/components/examples/PopconfirmExample.vue +149 -149
- package/src/components/icons/IconCommunity.vue +7 -7
- package/src/components/icons/IconDocumentation.vue +7 -7
- package/src/components/icons/IconEcosystem.vue +7 -7
- package/src/components/icons/IconSupport.vue +7 -7
- package/src/components/icons/IconTooling.vue +19 -19
- package/src/components/senior/EbizSData/index.vue +260 -260
- package/src/components/senior/EbizSDialog/index.vue +713 -712
- package/src/components/senior/EbizSForm/README.md +157 -157
- package/src/components/senior/EbizSForm/index.vue +668 -668
- package/src/components/senior/EbizSForm/item.vue +522 -522
- package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
- package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
- package/src/index.js +218 -218
- package/src/main.js +55 -55
- package/src/router/index.js +374 -374
- package/src/utils/formatCode.js +24 -24
- package/src/utils/generateImportStatement.js +52 -52
- package/src/utils/hasJsx.js +25 -25
- package/src/utils/index.js +166 -166
- package/src/utils/mergeOptions.js +29 -29
- package/src/utils/parseRequiredBlocks.js +18 -18
- package/src/utils/upload.ts +126 -126
- package/src/utils/vue-sfc-validator.js +155 -155
- package/src/views/Button.vue +23 -23
- package/src/views/CheckboxDemo.vue +104 -104
- package/src/views/DataContainer.vue +19 -19
- package/src/views/DialogDemo.vue +125 -125
- package/src/views/EbizApprovalDemo.vue +76 -76
- package/src/views/EbizAutoFormDemo.vue +129 -129
- package/src/views/EbizAvatar.vue +223 -223
- package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
- package/src/views/EbizDetailBlockDemo.vue +30 -30
- package/src/views/EbizEmployeeInfo.vue +249 -249
- package/src/views/EbizEmployeeSelector.vue +83 -83
- package/src/views/EbizMap.vue +201 -201
- package/src/views/EbizRadioDemo.vue +151 -151
- package/src/views/EbizSDataDemo.vue +136 -136
- package/src/views/EbizSDialogDemo.vue +301 -301
- package/src/views/EbizSForm/index.vue +359 -359
- package/src/views/EbizSFormDemo.vue +420 -420
- package/src/views/EbizSpace.vue +185 -185
- package/src/views/EbizSwiper.vue +157 -157
- package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
- package/src/views/Form.vue +19 -19
- package/src/views/GridDemo.vue +238 -238
- package/src/views/Home.vue +146 -146
- package/src/views/Mindmap.vue +17 -17
- package/src/views/MyComponent.vue +19 -19
- package/src/views/OkrTree.vue +19 -19
- package/src/views/PageHeaderDemo.vue +104 -104
- package/src/views/PaginationDemo.vue +96 -96
- package/src/views/PermissionBoxDemo.vue +85 -85
- package/src/views/PopconfirmDemo.vue +80 -80
- package/src/views/RemoteSelect.vue +350 -350
- package/src/views/StatisticDemo.vue +190 -190
- package/src/views/SwitchDemo.vue +79 -79
- package/src/views/Table.vue +19 -19
- package/src/views/TableDemo.vue +334 -334
- package/src/views/TableSortDemo.vue +143 -143
- package/src/views/TableView.vue +68 -68
- package/src/views/TabsDemo.vue +282 -282
- package/src/views/TagDemo.vue +101 -101
- package/src/views/TdesignAlert.vue +98 -98
- package/src/views/TdesignButton.vue +190 -190
- package/src/views/TdesignCalendar.vue +94 -94
- package/src/views/TdesignCard.vue +296 -296
- package/src/views/TdesignCollapse.vue +293 -293
- package/src/views/TdesignDatePicker.vue +187 -187
- package/src/views/TdesignDescriptions.vue +101 -101
- package/src/views/TdesignForm.vue +248 -248
- package/src/views/TdesignIcon.vue +203 -203
- package/src/views/TdesignImage.vue +215 -215
- package/src/views/TdesignImageViewer.vue +198 -198
- package/src/views/TdesignInput.vue +252 -252
- package/src/views/TdesignSelect.vue +473 -473
- package/src/views/TdesignSwiper.vue +157 -157
- package/src/views/TextareaDemo.vue +93 -93
- package/src/views/TimePickerDemo.vue +146 -146
- package/src/views/TimelineDemo.vue +160 -160
- package/src/views/Title.vue +19 -19
- package/src/views/TreeDemo.vue +254 -254
- package/src/views/TreeMergeTableDemo.vue +239 -239
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/src/views/UploadDemo.vue +121 -121
- package/src/views/VxeTableDemo.vue +279 -279
- package/src/views/WatermarkDemo.vue +85 -85
package/src/views/TabsDemo.vue
CHANGED
@@ -1,283 +1,283 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="tabs-demo">
|
3
|
-
<h1>TDesign Tabs 组件示例</h1>
|
4
|
-
|
5
|
-
<h2>原生TDesign选项卡</h2>
|
6
|
-
<div class="demo-section">
|
7
|
-
<t-tabs :default-value="1">
|
8
|
-
<t-tab-panel :value="1" label="选项卡1">
|
9
|
-
<p style="margin: 20px">选项卡1内容区</p>
|
10
|
-
</t-tab-panel>
|
11
|
-
<t-tab-panel :value="2" label="选项卡2">
|
12
|
-
<p style="margin: 20px">选项卡2内容区</p>
|
13
|
-
</t-tab-panel>
|
14
|
-
<t-tab-panel :value="3" label="选项卡3">
|
15
|
-
<p style="margin: 20px">选项卡3内容区</p>
|
16
|
-
</t-tab-panel>
|
17
|
-
</t-tabs>
|
18
|
-
</div>
|
19
|
-
|
20
|
-
<h2>基础选项卡</h2>
|
21
|
-
<div class="demo-section">
|
22
|
-
<EbizTabs v-model="activeTab">
|
23
|
-
<EbizTabPanel value="first" label="选项卡1">
|
24
|
-
选项卡1内容区
|
25
|
-
</EbizTabPanel>
|
26
|
-
<EbizTabPanel value="second" label="选项卡2">
|
27
|
-
选项卡2内容区
|
28
|
-
</EbizTabPanel>
|
29
|
-
<EbizTabPanel value="third" label="选项卡3">
|
30
|
-
选项卡3内容区
|
31
|
-
</EbizTabPanel>
|
32
|
-
</EbizTabs>
|
33
|
-
</div>
|
34
|
-
|
35
|
-
<h2>不同位置的选项卡</h2>
|
36
|
-
<div class="demo-section">
|
37
|
-
<div class="placement-demo">
|
38
|
-
<h3>顶部选项卡</h3>
|
39
|
-
<EbizTabs placement="top">
|
40
|
-
<EbizTabPanel value="first" label="选项卡1">
|
41
|
-
顶部选项卡内容
|
42
|
-
</EbizTabPanel>
|
43
|
-
<EbizTabPanel value="second" label="选项卡2">
|
44
|
-
顶部选项卡内容
|
45
|
-
</EbizTabPanel>
|
46
|
-
</EbizTabs>
|
47
|
-
</div>
|
48
|
-
|
49
|
-
<div class="placement-demo">
|
50
|
-
<h3>左侧选项卡</h3>
|
51
|
-
<EbizTabs placement="left">
|
52
|
-
<EbizTabPanel value="first" label="选项卡1">
|
53
|
-
左侧选项卡内容
|
54
|
-
</EbizTabPanel>
|
55
|
-
<EbizTabPanel value="second" label="选项卡2">
|
56
|
-
左侧选项卡内容
|
57
|
-
</EbizTabPanel>
|
58
|
-
</EbizTabs>
|
59
|
-
</div>
|
60
|
-
|
61
|
-
<div class="placement-demo">
|
62
|
-
<h3>右侧选项卡</h3>
|
63
|
-
<EbizTabs placement="right">
|
64
|
-
<EbizTabPanel value="first" label="选项卡1">
|
65
|
-
右侧选项卡内容
|
66
|
-
</EbizTabPanel>
|
67
|
-
<EbizTabPanel value="second" label="选项卡2">
|
68
|
-
右侧选项卡内容
|
69
|
-
</EbizTabPanel>
|
70
|
-
</EbizTabs>
|
71
|
-
</div>
|
72
|
-
|
73
|
-
<div class="placement-demo">
|
74
|
-
<h3>底部选项卡</h3>
|
75
|
-
<EbizTabs placement="bottom">
|
76
|
-
<EbizTabPanel value="first" label="选项卡1">
|
77
|
-
底部选项卡内容
|
78
|
-
</EbizTabPanel>
|
79
|
-
<EbizTabPanel value="second" label="选项卡2">
|
80
|
-
底部选项卡内容
|
81
|
-
</EbizTabPanel>
|
82
|
-
</EbizTabs>
|
83
|
-
</div>
|
84
|
-
</div>
|
85
|
-
|
86
|
-
<h2>卡片风格选项卡</h2>
|
87
|
-
<div class="demo-section">
|
88
|
-
<EbizTabs theme="card">
|
89
|
-
<EbizTabPanel value="first" label="选项卡1">
|
90
|
-
卡片风格选项卡内容
|
91
|
-
</EbizTabPanel>
|
92
|
-
<EbizTabPanel value="second" label="选项卡2">
|
93
|
-
卡片风格选项卡内容
|
94
|
-
</EbizTabPanel>
|
95
|
-
<EbizTabPanel value="third" label="选项卡3">
|
96
|
-
卡片风格选项卡内容
|
97
|
-
</EbizTabPanel>
|
98
|
-
</EbizTabs>
|
99
|
-
</div>
|
100
|
-
|
101
|
-
<h2>尺寸大小</h2>
|
102
|
-
<div class="demo-section">
|
103
|
-
<div class="size-demo">
|
104
|
-
<h3>中尺寸(默认)</h3>
|
105
|
-
<EbizTabs size="medium">
|
106
|
-
<EbizTabPanel value="first" label="选项卡1">
|
107
|
-
中尺寸选项卡内容
|
108
|
-
</EbizTabPanel>
|
109
|
-
<EbizTabPanel value="second" label="选项卡2">
|
110
|
-
中尺寸选项卡内容
|
111
|
-
</EbizTabPanel>
|
112
|
-
</EbizTabs>
|
113
|
-
</div>
|
114
|
-
|
115
|
-
<div class="size-demo">
|
116
|
-
<h3>大尺寸</h3>
|
117
|
-
<EbizTabs size="large">
|
118
|
-
<EbizTabPanel value="first" label="选项卡1">
|
119
|
-
大尺寸选项卡内容
|
120
|
-
</EbizTabPanel>
|
121
|
-
<EbizTabPanel value="second" label="选项卡2">
|
122
|
-
大尺寸选项卡内容
|
123
|
-
</EbizTabPanel>
|
124
|
-
</EbizTabs>
|
125
|
-
</div>
|
126
|
-
</div>
|
127
|
-
|
128
|
-
<h2>可增加的选项卡</h2>
|
129
|
-
<div class="demo-section">
|
130
|
-
<EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
|
131
|
-
<EbizTabPanel
|
132
|
-
v-for="(item, index) in addableTabs"
|
133
|
-
:key="item.value"
|
134
|
-
:value="item.value"
|
135
|
-
:label="item.label"
|
136
|
-
:removable="index !== 0"
|
137
|
-
@remove="onRemoveTab(item)"
|
138
|
-
>
|
139
|
-
{{ item.content }}
|
140
|
-
</EbizTabPanel>
|
141
|
-
</EbizTabs>
|
142
|
-
</div>
|
143
|
-
|
144
|
-
<h2>可拖拽排序的选项卡</h2>
|
145
|
-
<div class="demo-section">
|
146
|
-
<EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
|
147
|
-
<EbizTabPanel
|
148
|
-
v-for="item in dragSortTabs"
|
149
|
-
:key="item.value"
|
150
|
-
:value="item.value"
|
151
|
-
:label="item.label"
|
152
|
-
>
|
153
|
-
{{ item.content }}
|
154
|
-
</EbizTabPanel>
|
155
|
-
</EbizTabs>
|
156
|
-
</div>
|
157
|
-
|
158
|
-
<h2>禁用状态</h2>
|
159
|
-
<div class="demo-section">
|
160
|
-
<EbizTabs>
|
161
|
-
<EbizTabPanel value="first" label="选项卡1">
|
162
|
-
选项卡1内容
|
163
|
-
</EbizTabPanel>
|
164
|
-
<EbizTabPanel value="second" label="选项卡2" disabled>
|
165
|
-
选项卡2内容(禁用状态)
|
166
|
-
</EbizTabPanel>
|
167
|
-
<EbizTabPanel value="third" label="选项卡3">
|
168
|
-
选项卡3内容
|
169
|
-
</EbizTabPanel>
|
170
|
-
</EbizTabs>
|
171
|
-
</div>
|
172
|
-
</div>
|
173
|
-
</template>
|
174
|
-
|
175
|
-
<script setup>
|
176
|
-
import { ref, onMounted } from 'vue';
|
177
|
-
import { EbizTabs, EbizTabPanel } from '../index.js';
|
178
|
-
import { TabPanel } from 'tdesign-vue-next';
|
179
|
-
|
180
|
-
// 基础选项卡
|
181
|
-
const activeTab = ref('first');
|
182
|
-
|
183
|
-
// 可增加选项卡
|
184
|
-
const addableTabIndex = ref(3);
|
185
|
-
const addableActiveTab = ref('tab0');
|
186
|
-
const addableTabs = ref([
|
187
|
-
{
|
188
|
-
value: 'tab0',
|
189
|
-
label: '首页',
|
190
|
-
content: '首页内容'
|
191
|
-
},
|
192
|
-
{
|
193
|
-
value: 'tab1',
|
194
|
-
label: '选项卡1',
|
195
|
-
content: '选项卡1内容'
|
196
|
-
},
|
197
|
-
{
|
198
|
-
value: 'tab2',
|
199
|
-
label: '选项卡2',
|
200
|
-
content: '选项卡2内容'
|
201
|
-
}
|
202
|
-
]);
|
203
|
-
|
204
|
-
// 可拖拽排序选项卡
|
205
|
-
const dragSortTab = ref('drag0');
|
206
|
-
const dragSortTabs = ref([
|
207
|
-
{
|
208
|
-
value: 'drag0',
|
209
|
-
label: '选项1',
|
210
|
-
content: '选项1内容'
|
211
|
-
},
|
212
|
-
{
|
213
|
-
value: 'drag1',
|
214
|
-
label: '选项2',
|
215
|
-
content: '选项2内容'
|
216
|
-
},
|
217
|
-
{
|
218
|
-
value: 'drag2',
|
219
|
-
label: '选项3',
|
220
|
-
content: '选项3内容'
|
221
|
-
}
|
222
|
-
]);
|
223
|
-
|
224
|
-
// 添加选项卡
|
225
|
-
const onAddTab = () => {
|
226
|
-
const value = `tab${addableTabIndex.value}`;
|
227
|
-
addableTabs.value.push({
|
228
|
-
value,
|
229
|
-
label: `选项卡${addableTabIndex.value}`,
|
230
|
-
content: `选项卡${addableTabIndex.value}内容`
|
231
|
-
});
|
232
|
-
addableActiveTab.value = value;
|
233
|
-
addableTabIndex.value += 1;
|
234
|
-
};
|
235
|
-
|
236
|
-
// 删除选项卡
|
237
|
-
const onRemoveTab = (item) => {
|
238
|
-
const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
|
239
|
-
if (index !== -1) {
|
240
|
-
addableTabs.value.splice(index, 1);
|
241
|
-
}
|
242
|
-
};
|
243
|
-
|
244
|
-
// 处理拖拽排序
|
245
|
-
const onDragSort = (context) => {
|
246
|
-
// 根据拖拽结果重新排序
|
247
|
-
dragSortTabs.value = context.currentData;
|
248
|
-
};
|
249
|
-
|
250
|
-
// 检查tdesign-vue-next依赖是否已正确安装
|
251
|
-
onMounted(() => {
|
252
|
-
console.log('TabsDemo mounted');
|
253
|
-
});
|
254
|
-
</script>
|
255
|
-
|
256
|
-
<style lang="less" scoped>
|
257
|
-
.tabs-demo {
|
258
|
-
padding: 20px;
|
259
|
-
|
260
|
-
.demo-section {
|
261
|
-
margin-bottom: 30px;
|
262
|
-
}
|
263
|
-
|
264
|
-
.placement-demo, .size-demo {
|
265
|
-
margin-bottom: 20px;
|
266
|
-
}
|
267
|
-
|
268
|
-
h1 {
|
269
|
-
font-size: 24px;
|
270
|
-
margin-bottom: 20px;
|
271
|
-
}
|
272
|
-
|
273
|
-
h2 {
|
274
|
-
font-size: 20px;
|
275
|
-
margin: 30px 0 15px;
|
276
|
-
}
|
277
|
-
|
278
|
-
h3 {
|
279
|
-
font-size: 16px;
|
280
|
-
margin-bottom: 10px;
|
281
|
-
}
|
282
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="tabs-demo">
|
3
|
+
<h1>TDesign Tabs 组件示例</h1>
|
4
|
+
|
5
|
+
<h2>原生TDesign选项卡</h2>
|
6
|
+
<div class="demo-section">
|
7
|
+
<t-tabs :default-value="1">
|
8
|
+
<t-tab-panel :value="1" label="选项卡1">
|
9
|
+
<p style="margin: 20px">选项卡1内容区</p>
|
10
|
+
</t-tab-panel>
|
11
|
+
<t-tab-panel :value="2" label="选项卡2">
|
12
|
+
<p style="margin: 20px">选项卡2内容区</p>
|
13
|
+
</t-tab-panel>
|
14
|
+
<t-tab-panel :value="3" label="选项卡3">
|
15
|
+
<p style="margin: 20px">选项卡3内容区</p>
|
16
|
+
</t-tab-panel>
|
17
|
+
</t-tabs>
|
18
|
+
</div>
|
19
|
+
|
20
|
+
<h2>基础选项卡</h2>
|
21
|
+
<div class="demo-section">
|
22
|
+
<EbizTabs v-model="activeTab">
|
23
|
+
<EbizTabPanel value="first" label="选项卡1">
|
24
|
+
选项卡1内容区
|
25
|
+
</EbizTabPanel>
|
26
|
+
<EbizTabPanel value="second" label="选项卡2">
|
27
|
+
选项卡2内容区
|
28
|
+
</EbizTabPanel>
|
29
|
+
<EbizTabPanel value="third" label="选项卡3">
|
30
|
+
选项卡3内容区
|
31
|
+
</EbizTabPanel>
|
32
|
+
</EbizTabs>
|
33
|
+
</div>
|
34
|
+
|
35
|
+
<h2>不同位置的选项卡</h2>
|
36
|
+
<div class="demo-section">
|
37
|
+
<div class="placement-demo">
|
38
|
+
<h3>顶部选项卡</h3>
|
39
|
+
<EbizTabs placement="top">
|
40
|
+
<EbizTabPanel value="first" label="选项卡1">
|
41
|
+
顶部选项卡内容
|
42
|
+
</EbizTabPanel>
|
43
|
+
<EbizTabPanel value="second" label="选项卡2">
|
44
|
+
顶部选项卡内容
|
45
|
+
</EbizTabPanel>
|
46
|
+
</EbizTabs>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<div class="placement-demo">
|
50
|
+
<h3>左侧选项卡</h3>
|
51
|
+
<EbizTabs placement="left">
|
52
|
+
<EbizTabPanel value="first" label="选项卡1">
|
53
|
+
左侧选项卡内容
|
54
|
+
</EbizTabPanel>
|
55
|
+
<EbizTabPanel value="second" label="选项卡2">
|
56
|
+
左侧选项卡内容
|
57
|
+
</EbizTabPanel>
|
58
|
+
</EbizTabs>
|
59
|
+
</div>
|
60
|
+
|
61
|
+
<div class="placement-demo">
|
62
|
+
<h3>右侧选项卡</h3>
|
63
|
+
<EbizTabs placement="right">
|
64
|
+
<EbizTabPanel value="first" label="选项卡1">
|
65
|
+
右侧选项卡内容
|
66
|
+
</EbizTabPanel>
|
67
|
+
<EbizTabPanel value="second" label="选项卡2">
|
68
|
+
右侧选项卡内容
|
69
|
+
</EbizTabPanel>
|
70
|
+
</EbizTabs>
|
71
|
+
</div>
|
72
|
+
|
73
|
+
<div class="placement-demo">
|
74
|
+
<h3>底部选项卡</h3>
|
75
|
+
<EbizTabs placement="bottom">
|
76
|
+
<EbizTabPanel value="first" label="选项卡1">
|
77
|
+
底部选项卡内容
|
78
|
+
</EbizTabPanel>
|
79
|
+
<EbizTabPanel value="second" label="选项卡2">
|
80
|
+
底部选项卡内容
|
81
|
+
</EbizTabPanel>
|
82
|
+
</EbizTabs>
|
83
|
+
</div>
|
84
|
+
</div>
|
85
|
+
|
86
|
+
<h2>卡片风格选项卡</h2>
|
87
|
+
<div class="demo-section">
|
88
|
+
<EbizTabs theme="card">
|
89
|
+
<EbizTabPanel value="first" label="选项卡1">
|
90
|
+
卡片风格选项卡内容
|
91
|
+
</EbizTabPanel>
|
92
|
+
<EbizTabPanel value="second" label="选项卡2">
|
93
|
+
卡片风格选项卡内容
|
94
|
+
</EbizTabPanel>
|
95
|
+
<EbizTabPanel value="third" label="选项卡3">
|
96
|
+
卡片风格选项卡内容
|
97
|
+
</EbizTabPanel>
|
98
|
+
</EbizTabs>
|
99
|
+
</div>
|
100
|
+
|
101
|
+
<h2>尺寸大小</h2>
|
102
|
+
<div class="demo-section">
|
103
|
+
<div class="size-demo">
|
104
|
+
<h3>中尺寸(默认)</h3>
|
105
|
+
<EbizTabs size="medium">
|
106
|
+
<EbizTabPanel value="first" label="选项卡1">
|
107
|
+
中尺寸选项卡内容
|
108
|
+
</EbizTabPanel>
|
109
|
+
<EbizTabPanel value="second" label="选项卡2">
|
110
|
+
中尺寸选项卡内容
|
111
|
+
</EbizTabPanel>
|
112
|
+
</EbizTabs>
|
113
|
+
</div>
|
114
|
+
|
115
|
+
<div class="size-demo">
|
116
|
+
<h3>大尺寸</h3>
|
117
|
+
<EbizTabs size="large">
|
118
|
+
<EbizTabPanel value="first" label="选项卡1">
|
119
|
+
大尺寸选项卡内容
|
120
|
+
</EbizTabPanel>
|
121
|
+
<EbizTabPanel value="second" label="选项卡2">
|
122
|
+
大尺寸选项卡内容
|
123
|
+
</EbizTabPanel>
|
124
|
+
</EbizTabs>
|
125
|
+
</div>
|
126
|
+
</div>
|
127
|
+
|
128
|
+
<h2>可增加的选项卡</h2>
|
129
|
+
<div class="demo-section">
|
130
|
+
<EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
|
131
|
+
<EbizTabPanel
|
132
|
+
v-for="(item, index) in addableTabs"
|
133
|
+
:key="item.value"
|
134
|
+
:value="item.value"
|
135
|
+
:label="item.label"
|
136
|
+
:removable="index !== 0"
|
137
|
+
@remove="onRemoveTab(item)"
|
138
|
+
>
|
139
|
+
{{ item.content }}
|
140
|
+
</EbizTabPanel>
|
141
|
+
</EbizTabs>
|
142
|
+
</div>
|
143
|
+
|
144
|
+
<h2>可拖拽排序的选项卡</h2>
|
145
|
+
<div class="demo-section">
|
146
|
+
<EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
|
147
|
+
<EbizTabPanel
|
148
|
+
v-for="item in dragSortTabs"
|
149
|
+
:key="item.value"
|
150
|
+
:value="item.value"
|
151
|
+
:label="item.label"
|
152
|
+
>
|
153
|
+
{{ item.content }}
|
154
|
+
</EbizTabPanel>
|
155
|
+
</EbizTabs>
|
156
|
+
</div>
|
157
|
+
|
158
|
+
<h2>禁用状态</h2>
|
159
|
+
<div class="demo-section">
|
160
|
+
<EbizTabs>
|
161
|
+
<EbizTabPanel value="first" label="选项卡1">
|
162
|
+
选项卡1内容
|
163
|
+
</EbizTabPanel>
|
164
|
+
<EbizTabPanel value="second" label="选项卡2" disabled>
|
165
|
+
选项卡2内容(禁用状态)
|
166
|
+
</EbizTabPanel>
|
167
|
+
<EbizTabPanel value="third" label="选项卡3">
|
168
|
+
选项卡3内容
|
169
|
+
</EbizTabPanel>
|
170
|
+
</EbizTabs>
|
171
|
+
</div>
|
172
|
+
</div>
|
173
|
+
</template>
|
174
|
+
|
175
|
+
<script setup>
|
176
|
+
import { ref, onMounted } from 'vue';
|
177
|
+
import { EbizTabs, EbizTabPanel } from '../index.js';
|
178
|
+
import { TabPanel } from 'tdesign-vue-next';
|
179
|
+
|
180
|
+
// 基础选项卡
|
181
|
+
const activeTab = ref('first');
|
182
|
+
|
183
|
+
// 可增加选项卡
|
184
|
+
const addableTabIndex = ref(3);
|
185
|
+
const addableActiveTab = ref('tab0');
|
186
|
+
const addableTabs = ref([
|
187
|
+
{
|
188
|
+
value: 'tab0',
|
189
|
+
label: '首页',
|
190
|
+
content: '首页内容'
|
191
|
+
},
|
192
|
+
{
|
193
|
+
value: 'tab1',
|
194
|
+
label: '选项卡1',
|
195
|
+
content: '选项卡1内容'
|
196
|
+
},
|
197
|
+
{
|
198
|
+
value: 'tab2',
|
199
|
+
label: '选项卡2',
|
200
|
+
content: '选项卡2内容'
|
201
|
+
}
|
202
|
+
]);
|
203
|
+
|
204
|
+
// 可拖拽排序选项卡
|
205
|
+
const dragSortTab = ref('drag0');
|
206
|
+
const dragSortTabs = ref([
|
207
|
+
{
|
208
|
+
value: 'drag0',
|
209
|
+
label: '选项1',
|
210
|
+
content: '选项1内容'
|
211
|
+
},
|
212
|
+
{
|
213
|
+
value: 'drag1',
|
214
|
+
label: '选项2',
|
215
|
+
content: '选项2内容'
|
216
|
+
},
|
217
|
+
{
|
218
|
+
value: 'drag2',
|
219
|
+
label: '选项3',
|
220
|
+
content: '选项3内容'
|
221
|
+
}
|
222
|
+
]);
|
223
|
+
|
224
|
+
// 添加选项卡
|
225
|
+
const onAddTab = () => {
|
226
|
+
const value = `tab${addableTabIndex.value}`;
|
227
|
+
addableTabs.value.push({
|
228
|
+
value,
|
229
|
+
label: `选项卡${addableTabIndex.value}`,
|
230
|
+
content: `选项卡${addableTabIndex.value}内容`
|
231
|
+
});
|
232
|
+
addableActiveTab.value = value;
|
233
|
+
addableTabIndex.value += 1;
|
234
|
+
};
|
235
|
+
|
236
|
+
// 删除选项卡
|
237
|
+
const onRemoveTab = (item) => {
|
238
|
+
const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
|
239
|
+
if (index !== -1) {
|
240
|
+
addableTabs.value.splice(index, 1);
|
241
|
+
}
|
242
|
+
};
|
243
|
+
|
244
|
+
// 处理拖拽排序
|
245
|
+
const onDragSort = (context) => {
|
246
|
+
// 根据拖拽结果重新排序
|
247
|
+
dragSortTabs.value = context.currentData;
|
248
|
+
};
|
249
|
+
|
250
|
+
// 检查tdesign-vue-next依赖是否已正确安装
|
251
|
+
onMounted(() => {
|
252
|
+
console.log('TabsDemo mounted');
|
253
|
+
});
|
254
|
+
</script>
|
255
|
+
|
256
|
+
<style lang="less" scoped>
|
257
|
+
.tabs-demo {
|
258
|
+
padding: 20px;
|
259
|
+
|
260
|
+
.demo-section {
|
261
|
+
margin-bottom: 30px;
|
262
|
+
}
|
263
|
+
|
264
|
+
.placement-demo, .size-demo {
|
265
|
+
margin-bottom: 20px;
|
266
|
+
}
|
267
|
+
|
268
|
+
h1 {
|
269
|
+
font-size: 24px;
|
270
|
+
margin-bottom: 20px;
|
271
|
+
}
|
272
|
+
|
273
|
+
h2 {
|
274
|
+
font-size: 20px;
|
275
|
+
margin: 30px 0 15px;
|
276
|
+
}
|
277
|
+
|
278
|
+
h3 {
|
279
|
+
font-size: 16px;
|
280
|
+
margin-bottom: 10px;
|
281
|
+
}
|
282
|
+
}
|
283
283
|
</style>
|