@ebiz/designer-components 0.0.58 → 0.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -29
- package/dist/designer-components.css +1 -1
- package/dist/index.mjs +4822 -4822
- package/package.json +1 -1
- package/src/App.vue +26 -26
- package/src/apiService/SIMPLE_DATA_SERVICE.md +284 -284
- package/src/apiService/mockDataService.js +115 -115
- package/src/apiService/simpleDataService.js +297 -297
- package/src/assets/base.css +86 -86
- package/src/assets/logo.svg +1 -1
- package/src/components/Button.vue +149 -149
- package/src/components/DataContainer.vue +40 -40
- package/src/components/EbizApproval.vue +332 -338
- package/src/components/EbizAutoForm.vue +596 -596
- package/src/components/EbizAvatar.vue +115 -115
- package/src/components/EbizCheckbox.vue +93 -93
- package/src/components/EbizCheckboxGroup.vue +69 -69
- package/src/components/EbizDepartmentSelector.vue +144 -144
- package/src/components/EbizDescriptions.vue +340 -340
- package/src/components/EbizDescriptionsItem.vue +47 -47
- package/src/components/EbizDetailBlock.vue +81 -81
- package/src/components/EbizDialog.vue +260 -260
- package/src/components/EbizDiv.vue +32 -32
- package/src/components/EbizDivider.vue +96 -96
- package/src/components/EbizEmployeeInfo.vue +138 -138
- package/src/components/EbizEmployeeSelector.vue +1093 -1086
- package/src/components/EbizFileUpload.vue +238 -238
- package/src/components/EbizMap.vue +541 -541
- package/src/components/EbizOkrTree.vue +99 -99
- package/src/components/EbizPageHeader.vue +95 -95
- package/src/components/EbizPagination.vue +162 -162
- package/src/components/EbizPopconfirm.vue +47 -47
- package/src/components/EbizRadio.vue +86 -86
- package/src/components/EbizRadioGroup.vue +83 -83
- package/src/components/EbizRemoteSelect.vue +232 -232
- package/src/components/EbizRouteBreadcrumb.vue +46 -46
- package/src/components/EbizSelect.vue +85 -85
- package/src/components/EbizSpace.vue +100 -100
- package/src/components/EbizStatistic.vue +149 -149
- package/src/components/EbizStatsCard.vue +113 -113
- package/src/components/EbizSwiper.vue +113 -113
- package/src/components/EbizSwiperItem.vue +13 -13
- package/src/components/EbizSwitch.vue +85 -85
- package/src/components/EbizTabHeader.vue +132 -132
- package/src/components/EbizTabPanel.vue +22 -22
- package/src/components/EbizTable.vue +469 -469
- package/src/components/EbizTableColumn.vue +116 -116
- package/src/components/EbizTableSort.vue +179 -179
- package/src/components/EbizTabs.vue +142 -142
- package/src/components/EbizTdesignButtonDialog.vue +332 -332
- package/src/components/EbizTdesignLoading.vue +107 -107
- package/src/components/EbizTimePicker.vue +143 -143
- package/src/components/EbizTitle.vue +91 -91
- package/src/components/EbizTree.vue +152 -152
- package/src/components/EbizTreeMergeTable.vue +1414 -1414
- package/src/components/EbizTreeSelector.vue +418 -418
- package/src/components/EbizVxeTable.vue +290 -290
- package/src/components/Form.vue +28 -28
- package/src/components/Home.vue +7 -7
- package/src/components/MyComponent.vue +39 -39
- package/src/components/Table.vue +45 -45
- package/src/components/TdesignAlert.vue +115 -115
- package/src/components/TdesignButton.vue +135 -135
- package/src/components/TdesignCalendar/index.vue +145 -145
- package/src/components/TdesignCard.vue +195 -195
- package/src/components/TdesignCol.vue +101 -101
- package/src/components/TdesignCollapse.vue +142 -142
- package/src/components/TdesignCollapsePanel.vue +79 -79
- package/src/components/TdesignDatePicker.vue +124 -124
- package/src/components/TdesignDescriptions.vue +74 -74
- package/src/components/TdesignDescriptionsItem.vue +50 -50
- package/src/components/TdesignDialog.vue +225 -225
- package/src/components/TdesignForm.vue +138 -138
- package/src/components/TdesignFormItem.vue +105 -105
- package/src/components/TdesignGrid.vue +55 -55
- package/src/components/TdesignIcon.vue +67 -67
- package/src/components/TdesignImage.vue +162 -162
- package/src/components/TdesignImageViewer.vue +200 -200
- package/src/components/TdesignInput.vue +242 -242
- package/src/components/TdesignSelect.vue +444 -444
- package/src/components/TdesignTag.vue +117 -117
- package/src/components/TdesignTextarea.vue +142 -142
- package/src/components/TdesignTimeline.vue +58 -58
- package/src/components/TdesignTimelineItem.vue +71 -71
- package/src/components/TdesignUpload.vue +388 -388
- package/src/components/TdesignWatermark.vue +107 -107
- package/src/components/ebiz-form/components/cascader.vue +61 -61
- package/src/components/ebiz-form/components/checkbox.vue +37 -37
- package/src/components/ebiz-form/components/city.vue +137 -137
- package/src/components/ebiz-form/components/date-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range-panel.vue +52 -52
- package/src/components/ebiz-form/components/date-range.vue +56 -56
- package/src/components/ebiz-form/components/date.vue +52 -52
- package/src/components/ebiz-form/components/editor-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/editor.vue +78 -78
- package/src/components/ebiz-form/components/file-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/file.vue +149 -149
- package/src/components/ebiz-form/components/images-multi-language.vue +52 -52
- package/src/components/ebiz-form/components/images.vue +129 -129
- package/src/components/ebiz-form/components/img-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/img.vue +129 -129
- package/src/components/ebiz-form/components/number.vue +50 -50
- package/src/components/ebiz-form/components/radio.vue +28 -28
- package/src/components/ebiz-form/components/select.vue +119 -119
- package/src/components/ebiz-form/components/switch.vue +23 -23
- package/src/components/ebiz-form/components/text-multi-language.vue +47 -47
- package/src/components/ebiz-form/components/text.vue +52 -52
- package/src/components/ebiz-form/components/textarea-multi-language.vue +48 -48
- package/src/components/ebiz-form/components/textarea.vue +29 -29
- package/src/components/ebiz-form/components/video-multi-language.vue +51 -51
- package/src/components/ebiz-form/components/video.vue +97 -97
- package/src/components/ebiz-form/index.vue +157 -157
- package/src/components/examples/PopconfirmExample.vue +149 -149
- package/src/components/icons/IconCommunity.vue +7 -7
- package/src/components/icons/IconDocumentation.vue +7 -7
- package/src/components/icons/IconEcosystem.vue +7 -7
- package/src/components/icons/IconSupport.vue +7 -7
- package/src/components/icons/IconTooling.vue +19 -19
- package/src/components/senior/EbizSData/index.vue +260 -260
- package/src/components/senior/EbizSDialog/index.vue +713 -713
- package/src/components/senior/EbizSForm/README.md +157 -157
- package/src/components/senior/EbizSForm/index.vue +668 -668
- package/src/components/senior/EbizSForm/item.vue +522 -522
- package/src/components/senior/EbizSForm/mItems/DateTimePicker.vue +51 -51
- package/src/components/senior/EbizSForm/mItems/Picker.vue +63 -63
- package/src/index.js +218 -218
- package/src/main.js +55 -55
- package/src/router/index.js +374 -374
- package/src/utils/formatCode.js +24 -24
- package/src/utils/generateImportStatement.js +52 -52
- package/src/utils/hasJsx.js +25 -25
- package/src/utils/index.js +166 -166
- package/src/utils/mergeOptions.js +29 -29
- package/src/utils/parseRequiredBlocks.js +18 -18
- package/src/utils/upload.ts +126 -126
- package/src/utils/vue-sfc-validator.js +155 -155
- package/src/views/Button.vue +23 -23
- package/src/views/CheckboxDemo.vue +104 -104
- package/src/views/DataContainer.vue +19 -19
- package/src/views/DialogDemo.vue +125 -125
- package/src/views/EbizApprovalDemo.vue +76 -76
- package/src/views/EbizAutoFormDemo.vue +129 -129
- package/src/views/EbizAvatar.vue +223 -223
- package/src/views/EbizDepartmentSelectorDemo.vue +169 -169
- package/src/views/EbizDetailBlockDemo.vue +30 -30
- package/src/views/EbizEmployeeInfo.vue +249 -249
- package/src/views/EbizEmployeeSelector.vue +83 -83
- package/src/views/EbizMap.vue +201 -201
- package/src/views/EbizRadioDemo.vue +151 -151
- package/src/views/EbizSDataDemo.vue +136 -136
- package/src/views/EbizSDialogDemo.vue +301 -301
- package/src/views/EbizSForm/index.vue +359 -359
- package/src/views/EbizSFormDemo.vue +420 -420
- package/src/views/EbizSpace.vue +185 -185
- package/src/views/EbizSwiper.vue +157 -157
- package/src/views/EbizTdesignButtonDialogExample.vue +437 -437
- package/src/views/Form.vue +19 -19
- package/src/views/GridDemo.vue +238 -238
- package/src/views/Home.vue +146 -146
- package/src/views/Mindmap.vue +17 -17
- package/src/views/MyComponent.vue +19 -19
- package/src/views/OkrTree.vue +19 -19
- package/src/views/PageHeaderDemo.vue +104 -104
- package/src/views/PaginationDemo.vue +96 -96
- package/src/views/PermissionBoxDemo.vue +85 -85
- package/src/views/PopconfirmDemo.vue +80 -80
- package/src/views/RemoteSelect.vue +350 -350
- package/src/views/StatisticDemo.vue +190 -190
- package/src/views/SwitchDemo.vue +79 -79
- package/src/views/Table.vue +19 -19
- package/src/views/TableDemo.vue +334 -334
- package/src/views/TableSortDemo.vue +143 -143
- package/src/views/TableView.vue +68 -68
- package/src/views/TabsDemo.vue +282 -282
- package/src/views/TagDemo.vue +101 -101
- package/src/views/TdesignAlert.vue +98 -98
- package/src/views/TdesignButton.vue +190 -190
- package/src/views/TdesignCalendar.vue +94 -94
- package/src/views/TdesignCard.vue +296 -296
- package/src/views/TdesignCollapse.vue +293 -293
- package/src/views/TdesignDatePicker.vue +187 -187
- package/src/views/TdesignDescriptions.vue +101 -101
- package/src/views/TdesignForm.vue +248 -248
- package/src/views/TdesignIcon.vue +203 -203
- package/src/views/TdesignImage.vue +215 -215
- package/src/views/TdesignImageViewer.vue +198 -198
- package/src/views/TdesignInput.vue +252 -252
- package/src/views/TdesignSelect.vue +473 -473
- package/src/views/TdesignSwiper.vue +157 -157
- package/src/views/TextareaDemo.vue +93 -93
- package/src/views/TimePickerDemo.vue +146 -146
- package/src/views/TimelineDemo.vue +160 -160
- package/src/views/Title.vue +19 -19
- package/src/views/TreeDemo.vue +254 -254
- package/src/views/TreeMergeTableDemo.vue +239 -239
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/src/views/UploadDemo.vue +121 -121
- package/src/views/VxeTableDemo.vue +279 -279
- package/src/views/WatermarkDemo.vue +85 -85
@@ -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>
|
package/src/views/DialogDemo.vue
CHANGED
@@ -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>
|