vue-super-crud 1.7.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.
- package/.browserslistrc +3 -0
- package/.versionrc.json +36 -0
- package/CHANGELOG.md +232 -0
- package/LICENSE +201 -0
- package/README.md +46 -0
- package/babel.config.js +12 -0
- package/build/alias.js +10 -0
- package/build/build.js +52 -0
- package/build/config.js +70 -0
- package/deploy.bat +14 -0
- package/docs/.vuepress/components/button/base.vue +88 -0
- package/docs/.vuepress/components/common/code-format.vue +331 -0
- package/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue +68 -0
- package/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue +73 -0
- package/docs/.vuepress/components/commonConfig/renderType/component.vue +160 -0
- package/docs/.vuepress/components/commonConfig/renderType/formatter.vue +49 -0
- package/docs/.vuepress/components/commonConfig/renderType/render.vue +91 -0
- package/docs/.vuepress/components/commonConfig/renderType/slot.vue +63 -0
- package/docs/.vuepress/components/crud/baseUse/baseUse.vue +98 -0
- package/docs/.vuepress/components/crud/baseUse/columnAction.vue +72 -0
- package/docs/.vuepress/components/crud/baseUse/columnWidth.vue +107 -0
- package/docs/.vuepress/components/crud/baseUse/handleRow.vue +65 -0
- package/docs/.vuepress/components/crud/baseUse/height.vue +82 -0
- package/docs/.vuepress/components/crud/baseUse/index.vue +54 -0
- package/docs/.vuepress/components/crud/baseUse/loading.vue +70 -0
- package/docs/.vuepress/components/crud/baseUse/pagination.vue +108 -0
- package/docs/.vuepress/components/crud/baseUse/selection.vue +114 -0
- package/docs/.vuepress/components/crud/baseUse/summaryMethod.vue +118 -0
- package/docs/.vuepress/components/crud/baseUse/title.vue +54 -0
- package/docs/.vuepress/components/crud/baseUse/toolbar.vue +69 -0
- package/docs/.vuepress/components/crud/buttons/common.vue +115 -0
- package/docs/.vuepress/components/crud/buttons/fast.vue +82 -0
- package/docs/.vuepress/components/crud/contextMenu/base.vue +72 -0
- package/docs/.vuepress/components/crud/copy.vue +52 -0
- package/docs/.vuepress/components/crud/crudEvents/api.vue +157 -0
- package/docs/.vuepress/components/crud/crudEvents/deleteTip.vue +93 -0
- package/docs/.vuepress/components/crud/crudEvents/events.vue +188 -0
- package/docs/.vuepress/components/crud/dataSort/base.vue +142 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/base.vue +53 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/dynamicAndFixed.vue +111 -0
- package/docs/.vuepress/components/crud/genDynamicColumns/treeDynamic.vue +68 -0
- package/docs/.vuepress/components/crud/handleBar/handleRow.vue +65 -0
- package/docs/.vuepress/components/crud/handleBar/toolbar.vue +69 -0
- package/docs/.vuepress/components/crud/renderType/1.vue +57 -0
- package/docs/.vuepress/components/crud/renderType/2.vue +63 -0
- package/docs/.vuepress/components/crud/renderType/3.vue +105 -0
- package/docs/.vuepress/components/crud/renderType/5.vue +91 -0
- package/docs/.vuepress/components/crud/search/1.vue +90 -0
- package/docs/.vuepress/components/crud/search/2.vue +78 -0
- package/docs/.vuepress/components/crud/search/3.vue +107 -0
- package/docs/.vuepress/components/crud/search/base.vue +123 -0
- package/docs/.vuepress/components/crud/search/localSearch.vue +124 -0
- package/docs/.vuepress/components/crud/search/special.vue +148 -0
- package/docs/.vuepress/components/crud/selection/events.vue +47 -0
- package/docs/.vuepress/components/crud/selection/pagination.vue +94 -0
- package/docs/.vuepress/components/crud/selection/singleSelection.vue +64 -0
- package/docs/.vuepress/components/crud/span/base.vue +69 -0
- package/docs/.vuepress/components/crud/span/special.vue +75 -0
- package/docs/.vuepress/components/crud/summary/base.vue +99 -0
- package/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue +174 -0
- package/docs/.vuepress/components/crud/tableEdit/cellEdit.vue +194 -0
- package/docs/.vuepress/components/crud/tableEdit/controlEdit.vue +219 -0
- package/docs/.vuepress/components/crud/tableEdit/dialog.vue +172 -0
- package/docs/.vuepress/components/crud/tableEdit/free.vue +88 -0
- package/docs/.vuepress/components/crud/tableEdit/freeColumn.vue +82 -0
- package/docs/.vuepress/components/crud/tableEdit/methods.vue +154 -0
- package/docs/.vuepress/components/crud/tableEdit/rowAction.vue +107 -0
- package/docs/.vuepress/components/crud/tableEdit/rowBatch.vue +116 -0
- package/docs/.vuepress/components/crud/tableEdit/rowClick.vue +98 -0
- package/docs/.vuepress/components/crud/validate/base.vue +122 -0
- package/docs/.vuepress/components/crud/validate/custom.vue +82 -0
- package/docs/.vuepress/components/crud/validate/regulars.vue +88 -0
- package/docs/.vuepress/components/crud/validate/relation.vue +91 -0
- package/docs/.vuepress/components/crud/validate/tree.vue +82 -0
- package/docs/.vuepress/components/dialog/baseUse/base.vue +92 -0
- package/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue +78 -0
- package/docs/.vuepress/components/dialog/baseUse/control.vue +79 -0
- package/docs/.vuepress/components/dialog/baseUse/drawer.vue +59 -0
- package/docs/.vuepress/components/dialog/baseUse/footer.vue +87 -0
- package/docs/.vuepress/components/dialog/baseUse/insertSlot.vue +79 -0
- package/docs/.vuepress/components/dict/DictLinkage.vue +91 -0
- package/docs/.vuepress/components/dict/baseUse.vue +72 -0
- package/docs/.vuepress/components/dict/component.vue +82 -0
- package/docs/.vuepress/components/dict/localDict.vue +68 -0
- package/docs/.vuepress/components/form/baseUse/base.vue +48 -0
- package/docs/.vuepress/components/form/baseUse/dataFormat.vue +92 -0
- package/docs/.vuepress/components/form/baseUse/deep.vue +57 -0
- package/docs/.vuepress/components/form/baseUse/gridLayout.vue +47 -0
- package/docs/.vuepress/components/form/baseUse/group.vue +66 -0
- package/docs/.vuepress/components/form/baseUse/hidden.vue +40 -0
- package/docs/.vuepress/components/form/baseUse/inlineLayout.vue +48 -0
- package/docs/.vuepress/components/form/baseUse/label.vue +51 -0
- package/docs/.vuepress/components/form/baseUse/tooltip.vue +40 -0
- package/docs/.vuepress/components/form/baseUse/validate.vue +52 -0
- package/docs/.vuepress/components/form/detail/base.vue +78 -0
- package/docs/.vuepress/components/form/detail/border.vue +90 -0
- package/docs/.vuepress/components/form/detail/singleDetail.vue +72 -0
- package/docs/.vuepress/components/formatData/baseUse.vue +131 -0
- package/docs/.vuepress/components/mock/index.js +347 -0
- package/docs/.vuepress/components/mockData/custom.vue +69 -0
- package/docs/.vuepress/components/mockData/example.vue +290 -0
- package/docs/.vuepress/components/positionSlot/base.vue +24 -0
- package/docs/.vuepress/components/positionSlot/form.vue +71 -0
- package/docs/.vuepress/components/positionSlot/table.vue +85 -0
- package/docs/.vuepress/components/tabs/base.vue +57 -0
- package/docs/.vuepress/components/temp.js +195 -0
- package/docs/.vuepress/config.js +146 -0
- package/docs/.vuepress/enhanceApp.js +142 -0
- package/docs/.vuepress/public/favicon.ico +0 -0
- package/docs/.vuepress/public/super.png +0 -0
- package/docs/.vuepress/styles/index.styl +25 -0
- package/docs/.vuepress/styles/palette.styl +6 -0
- package/docs/README.md +14 -0
- package/docs/guide/button/base.md +31 -0
- package/docs/guide/commonConfig/jsx.md +166 -0
- package/docs/guide/commonConfig/presetCodeTemplate.md +68 -0
- package/docs/guide/commonConfig/renderType.md +181 -0
- package/docs/guide/crud/baseUse.md +120 -0
- package/docs/guide/crud/buttons.md +18 -0
- package/docs/guide/crud/config.md +217 -0
- package/docs/guide/crud/contextMenu.md +18 -0
- package/docs/guide/crud/dataSort.md +66 -0
- package/docs/guide/crud/genDynamicColumns.md +145 -0
- package/docs/guide/crud/handleBar.md +26 -0
- package/docs/guide/crud/renderType.md +4 -0
- package/docs/guide/crud/search.md +150 -0
- package/docs/guide/crud/selection.md +73 -0
- package/docs/guide/crud/span.md +98 -0
- package/docs/guide/crud/summary.md +167 -0
- package/docs/guide/crud/tableEdit.md +377 -0
- package/docs/guide/crud/validate.md +158 -0
- package/docs/guide/dialog/baseUse.md +81 -0
- package/docs/guide/dict/baseUse.md +174 -0
- package/docs/guide/dict/component.md +88 -0
- package/docs/guide/dict/config.md +44 -0
- package/docs/guide/form/baseUse.md +142 -0
- package/docs/guide/form/detail.md +38 -0
- package/docs/guide/formatData/baseUse.md +98 -0
- package/docs/guide/formatData/config.md +142 -0
- package/docs/guide/mockData/base.md +26 -0
- package/docs/guide/positionSlot/base.md +41 -0
- package/docs/guide/question/base.md +44 -0
- package/docs/guide/start/base.md +30 -0
- package/docs/guide/tabs/base.md +63 -0
- package/examples/App.vue +52 -0
- package/examples/Layout/components/AppMain.vue +40 -0
- package/examples/Layout/components/Item.vue +29 -0
- package/examples/Layout/components/Link.vue +44 -0
- package/examples/Layout/components/SidebarItem.vue +93 -0
- package/examples/Layout/index.vue +69 -0
- package/examples/assets/logo.png +0 -0
- package/examples/favicon.ico +0 -0
- package/examples/index.html +18 -0
- package/examples/main.js +54 -0
- package/examples/router/index.js +140 -0
- package/examples/store/index.js +0 -0
- package/examples/styles/index.scss +63 -0
- package/examples/styles/sidebar.scss +226 -0
- package/examples/styles/transition.scss +48 -0
- package/examples/styles/variables.scss +25 -0
- package/examples/views/crud/base.vue +68 -0
- package/examples/views/crud/handleRow.vue +84 -0
- package/examples/views/crud/search.vue +116 -0
- package/examples/views/dashboard/index.vue +244 -0
- package/examples/views/dashboard/index1.vue +234 -0
- package/examples/views/dashboard/test.vue +9 -0
- package/examples/views/formTest/index.vue +168 -0
- package/examples/views/nested/menu1/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-1/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-2/index.vue +7 -0
- package/examples/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
- package/examples/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
- package/examples/views/nested/menu1/menu1-3/index.vue +5 -0
- package/examples/views/nested/menu2/index.vue +5 -0
- package/gulpfile.js +84 -0
- package/lib/index.css +1 -0
- package/lib/super-crud.min.js +15 -0
- package/package.json +66 -0
- package/packages/button/index.vue +189 -0
- package/packages/core/components/comp.vue +223 -0
- package/packages/core/components/position.vue +135 -0
- package/packages/core/components/render.vue +460 -0
- package/packages/core/configManager.js +302 -0
- package/packages/core/create.js +8 -0
- package/packages/core/defaultRender.js +64 -0
- package/packages/core/dict/global.js +10 -0
- package/packages/core/dict/index.js +432 -0
- package/packages/core/dict/mixin.js +94 -0
- package/packages/core/event.js +60 -0
- package/packages/core/index.js +6 -0
- package/packages/core/init.js +122 -0
- package/packages/core/mock/genConfig.js +228 -0
- package/packages/core/mock/genData.js +422 -0
- package/packages/core/mock/index.js +4 -0
- package/packages/core/rules.js +111 -0
- package/packages/crud/column.vue +205 -0
- package/packages/crud/columnAction.vue +207 -0
- package/packages/crud/columnCell.vue +146 -0
- package/packages/crud/defaultColumn.vue +130 -0
- package/packages/crud/drawerColumn.vue +225 -0
- package/packages/crud/form.vue +69 -0
- package/packages/crud/index.vue +564 -0
- package/packages/crud/menuBar.vue +298 -0
- package/packages/crud/mixins/cacheHandler.js +36 -0
- package/packages/crud/mixins/calcColumnWidth.js +79 -0
- package/packages/crud/mixins/calcHeight.js +105 -0
- package/packages/crud/mixins/columnHandler.js +128 -0
- package/packages/crud/mixins/contextMenu.js +98 -0
- package/packages/crud/mixins/dataProcessor.js +202 -0
- package/packages/crud/mixins/dialog.js +109 -0
- package/packages/crud/mixins/excelHandler.js +150 -0
- package/packages/crud/mixins/exposeMethods.js +107 -0
- package/packages/crud/mixins/generateDynamicColumns.js +250 -0
- package/packages/crud/mixins/props.js +38 -0
- package/packages/crud/mixins/searchHandler.js +151 -0
- package/packages/crud/mixins/select.js +359 -0
- package/packages/crud/mixins/spanMethod.js +288 -0
- package/packages/crud/mixins/summary.js +177 -0
- package/packages/crud/mixins/tableEdit.js +547 -0
- package/packages/crud/mixins/validate.js +219 -0
- package/packages/crud/pagination.vue +110 -0
- package/packages/crud/search.vue +119 -0
- package/packages/crud/searchHeader.vue +231 -0
- package/packages/crud/selectBanner.vue +138 -0
- package/packages/crud/utils/EditState.js +319 -0
- package/packages/crud/utils/excelExport.js +112 -0
- package/packages/crud/utils/excelImport.js +112 -0
- package/packages/crud/utils/index.js +98 -0
- package/packages/dialog/dialog.js +233 -0
- package/packages/dialog/dialog.vue +15 -0
- package/packages/dialog/index.js +22 -0
- package/packages/dict/cascadeFormat.vue +179 -0
- package/packages/dict/dateFormat.vue +40 -0
- package/packages/dict/form/cascade.vue +61 -0
- package/packages/dict/form/checkbox.vue +90 -0
- package/packages/dict/form/extendMethod.js +22 -0
- package/packages/dict/form/input-base.js +31 -0
- package/packages/dict/form/input.js +20 -0
- package/packages/dict/form/radio.vue +69 -0
- package/packages/dict/form/select.vue +118 -0
- package/packages/dict/form/switch.vue +75 -0
- package/packages/dict/valueFormat.vue +188 -0
- package/packages/directive/dialog/drag.js +86 -0
- package/packages/directive/dialog/dragSize.js +42 -0
- package/packages/directive/index.js +9 -0
- package/packages/directive/insertSlot.js +10 -0
- package/packages/form/contextMenu.js +192 -0
- package/packages/form/draftDrawer.vue +391 -0
- package/packages/form/formAction.vue +97 -0
- package/packages/form/formItem.vue +259 -0
- package/packages/form/index.vue +451 -0
- package/packages/form/props.js +15 -0
- package/packages/grid/cell.vue +65 -0
- package/packages/grid/index.vue +130 -0
- package/packages/group/index.vue +96 -0
- package/packages/tabs/index.vue +290 -0
- package/packages/tooltip/index.js +9 -0
- package/packages/tooltip/tooltip.vue +32 -0
- package/packages/tooltip/tooltipComponent.js +38 -0
- package/packages/verifyInput/index.vue +131 -0
- package/src/config/common.js +88 -0
- package/src/config/crud.js +567 -0
- package/src/config/dialog.js +87 -0
- package/src/config/form.js +215 -0
- package/src/config/index.js +9 -0
- package/src/constants/index.js +72 -0
- package/src/index.js +67 -0
- package/src/template/btn/crud.js +6 -0
- package/src/template/btn/dialog.js +1 -0
- package/src/template/btn/form.js +3 -0
- package/src/template/btn/index.js +9 -0
- package/src/template/dicts.js +1 -0
- package/src/template/formatData.js +507 -0
- package/src/template/index.js +19 -0
- package/src/template/render.js +124 -0
- package/src/template/rules.js +53 -0
- package/src/utils/bem.js +49 -0
- package/src/utils/cache.js +77 -0
- package/src/utils/getType.js +34 -0
- package/src/utils/index.js +212 -0
- package/src/utils/mergeTemp.js +124 -0
- package/styles/button.scss +3 -0
- package/styles/crud.scss +425 -0
- package/styles/dialog.scss +95 -0
- package/styles/form.scss +532 -0
- package/styles/group.scss +78 -0
- package/styles/index.scss +94 -0
- package/styles/tabs.scss +139 -0
- package/styles/verifyInput.scss +56 -0
- package/vue-jsx-sync.js +90 -0
- package/vue.config.js +54 -0
@@ -0,0 +1,142 @@
|
|
1
|
+
# 格式化配置文档
|
2
|
+
|
3
|
+
## 通用配置项
|
4
|
+
|
5
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
6
|
+
| ----------- | -------------- | ------ | ------------------------------------------------------------------------------- |
|
7
|
+
| type | String | - | 格式化类型,可选值见下方预设格式化类型 |
|
8
|
+
| formatValue | Boolean/String | false | 是否保存格式化后的值。为 true 时存储在 `${prop}` 中,为字符串时存储在指定字段中 |
|
9
|
+
| input | Function | - | 格式化函数 |
|
10
|
+
| output | Function | - | 反格式化函数 |
|
11
|
+
|
12
|
+
## 预设格式化类型
|
13
|
+
|
14
|
+
### strToArr(字符串转数组)
|
15
|
+
将字符串转换为数组。
|
16
|
+
|
17
|
+
**数据转换:**
|
18
|
+
```javascript
|
19
|
+
"前端,Vue,React" -> ["前端", "Vue", "React"]
|
20
|
+
```
|
21
|
+
|
22
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
23
|
+
| --------- | ------ | ------ | ------ |
|
24
|
+
| separator | String | "," | 分隔符 |
|
25
|
+
|
26
|
+
### multiPropToArr(多字段转数组)
|
27
|
+
将多个字段的值合并为数组。
|
28
|
+
|
29
|
+
**数据转换:**
|
30
|
+
```javascript
|
31
|
+
{
|
32
|
+
province: "浙江",
|
33
|
+
city: "杭州",
|
34
|
+
district: "西湖"
|
35
|
+
} -> ["浙江", "杭州", "西湖"]
|
36
|
+
```
|
37
|
+
|
38
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
39
|
+
| --------- | ------- | ------ | -------------------------- |
|
40
|
+
| multiProp | Array | - | 需要合并的字段名数组 |
|
41
|
+
| isObject | Boolean | false | 是否包裹在字段prop的对象中 |
|
42
|
+
|
43
|
+
### numberFormat(数字格式化)
|
44
|
+
对数字进行格式化处理。
|
45
|
+
|
46
|
+
**数据转换:**
|
47
|
+
```javascript
|
48
|
+
1234.56 -> "¥1,234.56" // thousandth: true, prefix: "¥", precision: 2
|
49
|
+
1234.5678 -> "¥1234.57" // precision: 2, round: true, prefix: "¥"
|
50
|
+
1234 -> "1,234.00" // toFixed: true, precision: 2
|
51
|
+
```
|
52
|
+
|
53
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
54
|
+
| ---------- | ------- | --------- | ---------------- |
|
55
|
+
| precision | Number | undefined | 精度(小数位数) |
|
56
|
+
| round | Boolean | true | 是否四舍五入 |
|
57
|
+
| toFixed | Boolean | false | 是否固定小数位数 |
|
58
|
+
| thousandth | Boolean | false | 是否显示千分位 |
|
59
|
+
| prefix | String | "" | 前缀 |
|
60
|
+
| suffix | String | "" | 后缀 |
|
61
|
+
| keepZero | Boolean | false | 是否保留末尾0 |
|
62
|
+
|
63
|
+
### dateFormat(日期格式化)
|
64
|
+
对日期进行格式化处理。
|
65
|
+
|
66
|
+
**数据转换:**
|
67
|
+
```javascript
|
68
|
+
"2024-03-20" -> "2024年03月20日" // valueFormat: "YYYY年MM月DD日"
|
69
|
+
1710921600000 -> "2024年03月20日"
|
70
|
+
new Date() -> "2024年03月20日"
|
71
|
+
```
|
72
|
+
|
73
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
74
|
+
| ------------ | ------ | ------------ | -------- |
|
75
|
+
| valueFormat | String | "YYYY-MM-DD" | 值格式 |
|
76
|
+
| outputFormat | String | null | 输出格式 |
|
77
|
+
| outputType | String | "string" | 输出类型 |
|
78
|
+
|
79
|
+
### weekFormat(周格式化)
|
80
|
+
对周数据进行格式化处理。
|
81
|
+
|
82
|
+
**数据转换:**
|
83
|
+
```javascript
|
84
|
+
"2024-03-20" -> ["2024-03-18", "2024-03-24"] // outputType: array
|
85
|
+
"2024-03-20" -> "2024-03-18 ~ 2024-03-24" // outputType: string
|
86
|
+
```
|
87
|
+
|
88
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
89
|
+
| ----------- | ------- | ------------ | ------------------------- |
|
90
|
+
| valueFormat | String | "YYYY-MM-DD" | 日期格式 |
|
91
|
+
| weekStart | Number | 0 | 周起始日(0-6) |
|
92
|
+
| includeTime | Boolean | false | 是否包含时间 |
|
93
|
+
| separator | String | " ~ " | 日期分隔符 |
|
94
|
+
| outputType | String | "array" | 输出类型:array 或 string |
|
95
|
+
|
96
|
+
### inputFormat(输入格式化)
|
97
|
+
对输入内容进行格式化处理。
|
98
|
+
|
99
|
+
**数据转换:**
|
100
|
+
```javascript
|
101
|
+
"abc123中文" -> "123" // type: number
|
102
|
+
"abc123中文" -> "abc" // type: letter
|
103
|
+
"abc123中文" -> "中文" // type: chinese
|
104
|
+
"abc@123.com!" -> "abc@123.com" // type: email
|
105
|
+
```
|
106
|
+
|
107
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
108
|
+
| --------- | ------ | --------- | ------------------------------------------------------------------------- |
|
109
|
+
| inputType | String | "number" | 格式化类型:number/phone/decimal/letter/chinese/letterNumber/email/custom |
|
110
|
+
| pattern | String | - | 自定义正则 |
|
111
|
+
| maxLength | Number | undefined | 最大长度 |
|
112
|
+
| decimal | Number | undefined | 小数位数(type为decimal时使用) |
|
113
|
+
|
114
|
+
### percentFormat(百分比格式化)
|
115
|
+
对百分比数据进行格式化处理。
|
116
|
+
|
117
|
+
**数据转换:**
|
118
|
+
```javascript
|
119
|
+
0.1234 -> "12.34%"
|
120
|
+
0.1 -> "10.00%" // precision: 2
|
121
|
+
```
|
122
|
+
|
123
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
124
|
+
| ---------- | ------- | ------ | -------------- |
|
125
|
+
| precision | Number | 2 | 小数位数 |
|
126
|
+
| multiplier | Number | 100 | 乘数因子 |
|
127
|
+
| addSymbol | Boolean | true | 是否添加百分号 |
|
128
|
+
|
129
|
+
### fileSizeFormat(文件大小格式化)
|
130
|
+
对文件大小进行格式化处理。
|
131
|
+
|
132
|
+
**数据转换:**
|
133
|
+
```javascript
|
134
|
+
1024 -> "1 KB"
|
135
|
+
1234567 -> "1.18 MB"
|
136
|
+
1234567890 -> "1.15 GB"
|
137
|
+
```
|
138
|
+
|
139
|
+
| 配置项 | 类型 | 默认值 | 说明 |
|
140
|
+
| --------- | ------ | ----------------------------- | -------- |
|
141
|
+
| units | Array | ["B", "KB", "MB", "GB", "TB"] | 单位数组 |
|
142
|
+
| precision | Number | 2 | 小数位数 |
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# 基本使用
|
2
|
+
|
3
|
+
## 概述
|
4
|
+
通过右键功能菜单,点击生成测试数据,快速生成符合组件特性的模拟数据,用于测试和开发。无论使用哪种渲染方式,都会根据不同的表单组件类型(输入框、选择器、日期选择等)、校验规则自动生成相应格式的数据
|
5
|
+
|
6
|
+
## 使用示例
|
7
|
+
|
8
|
+
<ClientOnly>
|
9
|
+
<common-code-format>
|
10
|
+
<mockData-example slot="source"></mockData-example>
|
11
|
+
|
12
|
+
<<< @/docs/.vuepress/components/mockData/example.vue
|
13
|
+
</common-code-format>
|
14
|
+
</ClientOnly>
|
15
|
+
|
16
|
+
## 自定义mock数据
|
17
|
+
|
18
|
+
通过`mock`属性,可以自定义mock数据,`mock`属性可以是一个函数,也可以是一个值。
|
19
|
+
|
20
|
+
<ClientOnly>
|
21
|
+
<common-code-format>
|
22
|
+
<mockData-custom slot="source"></mockData-custom>
|
23
|
+
|
24
|
+
<<< @/docs/.vuepress/components/mockData/custom.vue
|
25
|
+
</common-code-format>
|
26
|
+
</ClientOnly>
|
@@ -0,0 +1,41 @@
|
|
1
|
+
# 基本使用
|
2
|
+
|
3
|
+
## 概述
|
4
|
+
|
5
|
+
方位插槽是一个灵活的布局组件,用于在内容周围添加上、下、左、右四个位置的插槽内容。
|
6
|
+
|
7
|
+
## 单独用法
|
8
|
+
|
9
|
+
|
10
|
+
<ClientOnly>
|
11
|
+
<common-code-format>
|
12
|
+
<positionSlot-base slot="source"></positionSlot-base>
|
13
|
+
|
14
|
+
<<< @/docs/.vuepress/components/positionSlot/base.vue
|
15
|
+
</common-code-format>
|
16
|
+
</ClientOnly>
|
17
|
+
|
18
|
+
## 搭配组件内置插槽使用
|
19
|
+
|
20
|
+
组件内部各种插槽均已封装方位组件。
|
21
|
+
|
22
|
+
<ClientOnly>
|
23
|
+
<common-code-format>
|
24
|
+
<positionSlot-table slot="source"></positionSlot-table>
|
25
|
+
|
26
|
+
<<< @/docs/.vuepress/components/positionSlot/table.vue
|
27
|
+
</common-code-format>
|
28
|
+
</ClientOnly>
|
29
|
+
|
30
|
+
## 在渲染单元格中使用
|
31
|
+
|
32
|
+
在渲染单元格中使用时,需要使用 `position` 属性,并传入 `true` 启用方位插槽。</br>
|
33
|
+
方位插槽可以获取单元格 `scope` 数据。
|
34
|
+
|
35
|
+
<ClientOnly>
|
36
|
+
<common-code-format>
|
37
|
+
<positionSlot-form slot="source"></positionSlot-form>
|
38
|
+
|
39
|
+
<<< @/docs/.vuepress/components/positionSlot/form.vue
|
40
|
+
</common-code-format>
|
41
|
+
</ClientOnly>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
# 问题合集
|
2
|
+
|
3
|
+
## 1. render函数渲染中ref实例绑定问题
|
4
|
+
|
5
|
+
### 问题
|
6
|
+
|
7
|
+
在使用render函数渲染时,如果参数接收了h函数,this.$refs.input组件实例绑定会丢失。
|
8
|
+
|
9
|
+
```js
|
10
|
+
// 此时this.$refs.input为undefined
|
11
|
+
|
12
|
+
render: (h, scope) => {
|
13
|
+
return <el-input ref="input" v-model={scope.row.gender} ></el-input>;
|
14
|
+
},
|
15
|
+
```
|
16
|
+
|
17
|
+
### 解决方案
|
18
|
+
|
19
|
+
1. 忽略h函数,使用render函数渲染
|
20
|
+
|
21
|
+
```js
|
22
|
+
render: (...args) => {
|
23
|
+
const { row } = args[1];
|
24
|
+
return <el-input ref="input" v-model={row.gender}></el-input>;
|
25
|
+
},
|
26
|
+
```
|
27
|
+
|
28
|
+
2. 使用ref函数获取组件实例
|
29
|
+
|
30
|
+
```js
|
31
|
+
render: (h, scope) => {
|
32
|
+
return (
|
33
|
+
<el-input
|
34
|
+
ref={(el) => {
|
35
|
+
console.log(el, "el");
|
36
|
+
}}
|
37
|
+
v-model={scope.row.gender}
|
38
|
+
></el-input>
|
39
|
+
);
|
40
|
+
},
|
41
|
+
```
|
42
|
+
|
43
|
+
|
44
|
+
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# 快速开始
|
2
|
+
|
3
|
+
## 获取组件库
|
4
|
+
|
5
|
+
```text
|
6
|
+
super-crud/
|
7
|
+
├─ lib/
|
8
|
+
│ ├─ super-crud.min.js
|
9
|
+
│ └─ index.css
|
10
|
+
├─ package.json
|
11
|
+
└─ README.md
|
12
|
+
```
|
13
|
+
|
14
|
+
1. 使用 `npm run build` 打包最新组件文件 </br>
|
15
|
+
2. 从 lib 目录获取打包好的文件:</br>
|
16
|
+
super-crud.min.js</br>
|
17
|
+
index.css</br>
|
18
|
+
3. 将文件放入你项目的 public/superCrud 或其他静态资源目录。
|
19
|
+
|
20
|
+
## 引入组件库
|
21
|
+
|
22
|
+
```js
|
23
|
+
// main.js
|
24
|
+
import superCrud from "/public/superCrud/super-crud.min.js";
|
25
|
+
import "/public/superCrud/index.css";
|
26
|
+
|
27
|
+
Vue.use(superCrud, {
|
28
|
+
// 全局配置
|
29
|
+
});
|
30
|
+
```
|
@@ -0,0 +1,63 @@
|
|
1
|
+
# 基本使用
|
2
|
+
|
3
|
+
## 概述
|
4
|
+
|
5
|
+
基于 el-tabs 的增强型标签组件,提供了更丰富的功能,包括标签页未激活时不渲染、缓存、刷新、过渡动画等特性。
|
6
|
+
|
7
|
+
## 示例
|
8
|
+
|
9
|
+
<ClientOnly>
|
10
|
+
<common-code-format>
|
11
|
+
<tabs-base slot="source"></tabs-base>
|
12
|
+
|
13
|
+
<<< @/docs/.vuepress/components/tabs/base.vue
|
14
|
+
</common-code-format>
|
15
|
+
</ClientOnly>
|
16
|
+
|
17
|
+
## API
|
18
|
+
|
19
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
20
|
+
| ------------- | -------------- | ------ | ---------------------------- |
|
21
|
+
| value/v-model | String/Number | - | 当前激活的标签页名称 |
|
22
|
+
| tab-list | Array | [] | 标签页配置列表 |
|
23
|
+
| cache | Boolean | true | 是否缓存标签页内容 |
|
24
|
+
| all | Boolean/Object | false | 是否显示"全部"标签页 |
|
25
|
+
| border | Boolean | false | 是否显示边框样式 |
|
26
|
+
| cacheActive | Boolean | true | 是否在路由中缓存激活的标签页 |
|
27
|
+
| refresh | Boolean | false | 是否显示刷新按钮 |
|
28
|
+
|
29
|
+
## tabList 配置项
|
30
|
+
|
31
|
+
```js
|
32
|
+
[
|
33
|
+
{
|
34
|
+
label: '标签名称', // 显示的标签文本
|
35
|
+
name: 'tabName', // 标签的唯一标识
|
36
|
+
icon: 'el-icon-date', // 可选,标签页图标
|
37
|
+
cache: true, // 可选,是否缓存该标签页内容
|
38
|
+
render: () => { }, // 可选,render函数自定义标签页内容
|
39
|
+
}
|
40
|
+
]
|
41
|
+
```
|
42
|
+
|
43
|
+
## 事件
|
44
|
+
|
45
|
+
| 事件名 | 说明 | 回调参数 |
|
46
|
+
| --------- | ------------------ | -------------- |
|
47
|
+
| tab-click | 标签页被点击时触发 | 被点击的标签页 |
|
48
|
+
| refresh | 刷新标签页时触发 | (tab,index) |
|
49
|
+
|
50
|
+
## 特性说明
|
51
|
+
|
52
|
+
1. 标签页未激活时不渲染 + 标签页缓存
|
53
|
+
|
54
|
+
v-if与v-show的结合使用,未激活时不会渲染,激活时会渲染
|
55
|
+
|
56
|
+
默认开启缓存功能,切换标签页不会销毁内容
|
57
|
+
|
58
|
+
2. 路由缓存
|
59
|
+
|
60
|
+
启用cacheActive后,激活的标签页会被记录在路由query中
|
61
|
+
|
62
|
+
刷新页面后会自动恢复到之前激活的标签页
|
63
|
+
|
package/examples/App.vue
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
<template>
|
2
|
+
<div id="app">
|
3
|
+
<router-view />
|
4
|
+
</div>
|
5
|
+
<!-- <el-container style="height: 100vh;">
|
6
|
+
<el-aside width="200px" style="background-color: rgb(238, 241, 246);">
|
7
|
+
<el-menu>
|
8
|
+
<el-submenu index="1">
|
9
|
+
<el-menu-item-group title="分组1">
|
10
|
+
<template slot="title">分组一</template>
|
11
|
+
<el-menu-item index="1-1">选项1</el-menu-item>
|
12
|
+
<el-menu-item index="1-2">选项2</el-menu-item>
|
13
|
+
</el-menu-item-group>
|
14
|
+
<el-menu-item-group title="分组2">
|
15
|
+
<el-menu-item index="1-3">选项3</el-menu-item>
|
16
|
+
</el-menu-item-group>
|
17
|
+
<el-submenu index="1-4">
|
18
|
+
<template slot="title">选项4</template>
|
19
|
+
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
|
20
|
+
</el-submenu>
|
21
|
+
</el-submenu>
|
22
|
+
<el-submenu index="2">
|
23
|
+
<el-menu-item-group title="分组1">
|
24
|
+
<template slot="title">分组一</template>
|
25
|
+
<el-menu-item index="2-1">选项1</el-menu-item>
|
26
|
+
<el-menu-item index="2-2">选项2</el-menu-item>
|
27
|
+
</el-menu-item-group>
|
28
|
+
<el-menu-item-group title="分组2">
|
29
|
+
<el-menu-item index="2-3">选项3</el-menu-item>
|
30
|
+
</el-menu-item-group>
|
31
|
+
<el-submenu index="2-4">
|
32
|
+
<template slot="title">选项4</template>
|
33
|
+
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
|
34
|
+
</el-submenu>
|
35
|
+
</el-submenu>
|
36
|
+
</el-menu>
|
37
|
+
</el-aside>
|
38
|
+
|
39
|
+
<el-container>
|
40
|
+
<el-main>
|
41
|
+
<router-view></router-view>
|
42
|
+
</el-main>
|
43
|
+
</el-container>
|
44
|
+
</el-container> -->
|
45
|
+
</template>
|
46
|
+
|
47
|
+
<style lang="scss">
|
48
|
+
body {
|
49
|
+
margin: 0;
|
50
|
+
padding: 0;
|
51
|
+
}
|
52
|
+
</style>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
<template>
|
2
|
+
<section class="app-main">
|
3
|
+
<transition name="fade-transform" mode="out-in">
|
4
|
+
<router-view :key="key" />
|
5
|
+
</transition>
|
6
|
+
</section>
|
7
|
+
</template>
|
8
|
+
|
9
|
+
<script>
|
10
|
+
export default {
|
11
|
+
name: 'AppMain',
|
12
|
+
computed: {
|
13
|
+
key() {
|
14
|
+
return this.$route.path
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
</script>
|
19
|
+
|
20
|
+
<style scoped>
|
21
|
+
.app-main {
|
22
|
+
/*50 = navbar */
|
23
|
+
min-height: calc(100vh - 50px);
|
24
|
+
width: 100%;
|
25
|
+
position: relative;
|
26
|
+
overflow: hidden;
|
27
|
+
}
|
28
|
+
.fixed-header+.app-main {
|
29
|
+
padding-top: 50px;
|
30
|
+
}
|
31
|
+
</style>
|
32
|
+
|
33
|
+
<style lang="scss">
|
34
|
+
// fix css style bug in open el-dialog
|
35
|
+
.el-popup-parent--hidden {
|
36
|
+
.fixed-header {
|
37
|
+
padding-right: 15px;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
</style>
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<script>
|
2
|
+
export default {
|
3
|
+
name: 'MenuItem',
|
4
|
+
functional: true,
|
5
|
+
props: {
|
6
|
+
title: {
|
7
|
+
type: String,
|
8
|
+
default: ''
|
9
|
+
}
|
10
|
+
},
|
11
|
+
render(h, context) {
|
12
|
+
const { title } = context.props
|
13
|
+
const vnodes = []
|
14
|
+
|
15
|
+
if (title) {
|
16
|
+
vnodes.push(<span slot='title'>{(title)}</span>)
|
17
|
+
}
|
18
|
+
return vnodes
|
19
|
+
}
|
20
|
+
}
|
21
|
+
</script>
|
22
|
+
|
23
|
+
<style scoped>
|
24
|
+
.sub-el-icon {
|
25
|
+
color: currentColor;
|
26
|
+
width: 1em;
|
27
|
+
height: 1em;
|
28
|
+
}
|
29
|
+
</style>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
<template>
|
2
|
+
<component :is="type" v-bind="linkProps(to)">
|
3
|
+
<slot />
|
4
|
+
</component>
|
5
|
+
</template>
|
6
|
+
|
7
|
+
<script>
|
8
|
+
function isExternal(path) {
|
9
|
+
return /^(https?:|mailto:|tel:)/.test(path);
|
10
|
+
}
|
11
|
+
export default {
|
12
|
+
props: {
|
13
|
+
to: {
|
14
|
+
type: String,
|
15
|
+
required: true,
|
16
|
+
},
|
17
|
+
},
|
18
|
+
computed: {
|
19
|
+
isExternal() {
|
20
|
+
return isExternal(this.to);
|
21
|
+
},
|
22
|
+
type() {
|
23
|
+
if (this.isExternal) {
|
24
|
+
return "a";
|
25
|
+
}
|
26
|
+
return "router-link";
|
27
|
+
},
|
28
|
+
},
|
29
|
+
methods: {
|
30
|
+
linkProps(to) {
|
31
|
+
if (this.isExternal) {
|
32
|
+
return {
|
33
|
+
href: to,
|
34
|
+
target: "_blank",
|
35
|
+
rel: "noopener",
|
36
|
+
};
|
37
|
+
}
|
38
|
+
return {
|
39
|
+
to: to,
|
40
|
+
};
|
41
|
+
},
|
42
|
+
},
|
43
|
+
};
|
44
|
+
</script>
|
@@ -0,0 +1,93 @@
|
|
1
|
+
<template>
|
2
|
+
<div v-if="!item.hidden">
|
3
|
+
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
4
|
+
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
5
|
+
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
6
|
+
<item :title="onlyOneChild.meta.title" />
|
7
|
+
</el-menu-item>
|
8
|
+
</app-link>
|
9
|
+
</template>
|
10
|
+
|
11
|
+
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
12
|
+
<template slot="title">
|
13
|
+
<item v-if="item.meta" :title="item.meta.title" />
|
14
|
+
</template>
|
15
|
+
<sidebar-item
|
16
|
+
v-for="child in item.children"
|
17
|
+
:key="child.path"
|
18
|
+
:is-nest="true"
|
19
|
+
:item="child"
|
20
|
+
:base-path="resolvePath(child.path)"
|
21
|
+
class="nest-menu"
|
22
|
+
/>
|
23
|
+
</el-submenu>
|
24
|
+
</div>
|
25
|
+
</template>
|
26
|
+
|
27
|
+
<script>
|
28
|
+
import path from 'path'
|
29
|
+
import Item from './Item'
|
30
|
+
import AppLink from './Link'
|
31
|
+
function isExternal(path) {
|
32
|
+
return /^(https?:|mailto:|tel:)/.test(path);
|
33
|
+
}
|
34
|
+
export default {
|
35
|
+
name: 'SidebarItem',
|
36
|
+
components: { Item, AppLink },
|
37
|
+
props: {
|
38
|
+
// route object
|
39
|
+
item: {
|
40
|
+
type: Object,
|
41
|
+
required: true
|
42
|
+
},
|
43
|
+
isNest: {
|
44
|
+
type: Boolean,
|
45
|
+
default: false
|
46
|
+
},
|
47
|
+
basePath: {
|
48
|
+
type: String,
|
49
|
+
default: ''
|
50
|
+
}
|
51
|
+
},
|
52
|
+
data() {
|
53
|
+
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
54
|
+
this.onlyOneChild = null
|
55
|
+
return {}
|
56
|
+
},
|
57
|
+
methods: {
|
58
|
+
hasOneShowingChild(children = [], parent) {
|
59
|
+
const showingChildren = children.filter(item => {
|
60
|
+
if (item.hidden) {
|
61
|
+
return false
|
62
|
+
} else {
|
63
|
+
// Temp set(will be used if only has one showing child)
|
64
|
+
this.onlyOneChild = item
|
65
|
+
return true
|
66
|
+
}
|
67
|
+
})
|
68
|
+
|
69
|
+
// When there is only one child router, the child router is displayed by default
|
70
|
+
if (showingChildren.length === 1) {
|
71
|
+
return true
|
72
|
+
}
|
73
|
+
|
74
|
+
// Show parent if there are no child router to display
|
75
|
+
if (showingChildren.length === 0) {
|
76
|
+
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
|
77
|
+
return true
|
78
|
+
}
|
79
|
+
|
80
|
+
return false
|
81
|
+
},
|
82
|
+
resolvePath(routePath) {
|
83
|
+
if (isExternal(routePath)) {
|
84
|
+
return routePath
|
85
|
+
}
|
86
|
+
if (isExternal(this.basePath)) {
|
87
|
+
return this.basePath
|
88
|
+
}
|
89
|
+
return path.resolve(this.basePath, routePath)
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
</script>
|
@@ -0,0 +1,69 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-wrapper">
|
3
|
+
<div class="sidebar-container">
|
4
|
+
<el-scrollbar wrap-class="scrollbar-wrapper">
|
5
|
+
<el-menu
|
6
|
+
:default-active="activeMenu"
|
7
|
+
:background-color="variables.menuBg"
|
8
|
+
:text-color="variables.menuText"
|
9
|
+
:unique-opened="false"
|
10
|
+
:active-text-color="variables.menuActiveText"
|
11
|
+
:collapse-transition="false"
|
12
|
+
mode="vertical"
|
13
|
+
>
|
14
|
+
<sidebar-item
|
15
|
+
v-for="route in routes"
|
16
|
+
:key="route.path"
|
17
|
+
:item="route"
|
18
|
+
:base-path="route.path"
|
19
|
+
/>
|
20
|
+
</el-menu>
|
21
|
+
</el-scrollbar>
|
22
|
+
</div>
|
23
|
+
<div class="main-container">
|
24
|
+
<app-main />
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
</template>
|
28
|
+
|
29
|
+
<script>
|
30
|
+
import sidebarItem from "./components/SidebarItem.vue";
|
31
|
+
import variables from "#/styles/variables.scss";
|
32
|
+
import AppMain from "./components/AppMain.vue";
|
33
|
+
|
34
|
+
export default {
|
35
|
+
name: "Layout",
|
36
|
+
components: {
|
37
|
+
sidebarItem,
|
38
|
+
// Navbar,
|
39
|
+
AppMain,
|
40
|
+
},
|
41
|
+
computed: {
|
42
|
+
variables() {
|
43
|
+
return variables;
|
44
|
+
},
|
45
|
+
routes() {
|
46
|
+
return this.$router.options.routes;
|
47
|
+
},
|
48
|
+
activeMenu() {
|
49
|
+
const route = this.$route;
|
50
|
+
const { meta, path } = route;
|
51
|
+
// if set path, the sidebar will highlight the path you set
|
52
|
+
if (meta.activeMenu) {
|
53
|
+
return meta.activeMenu;
|
54
|
+
}
|
55
|
+
return path;
|
56
|
+
},
|
57
|
+
},
|
58
|
+
};
|
59
|
+
</script>
|
60
|
+
|
61
|
+
<style lang="scss" scoped>
|
62
|
+
@import "#/styles/variables.scss";
|
63
|
+
|
64
|
+
.app-wrapper {
|
65
|
+
position: relative;
|
66
|
+
height: 100%;
|
67
|
+
width: 100%;
|
68
|
+
}
|
69
|
+
</style>
|
Binary file
|
Binary file
|