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.
Files changed (291) hide show
  1. package/.browserslistrc +3 -0
  2. package/.versionrc.json +36 -0
  3. package/CHANGELOG.md +232 -0
  4. package/LICENSE +201 -0
  5. package/README.md +46 -0
  6. package/babel.config.js +12 -0
  7. package/build/alias.js +10 -0
  8. package/build/build.js +52 -0
  9. package/build/config.js +70 -0
  10. package/deploy.bat +14 -0
  11. package/docs/.vuepress/components/button/base.vue +88 -0
  12. package/docs/.vuepress/components/common/code-format.vue +331 -0
  13. package/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue +68 -0
  14. package/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue +73 -0
  15. package/docs/.vuepress/components/commonConfig/renderType/component.vue +160 -0
  16. package/docs/.vuepress/components/commonConfig/renderType/formatter.vue +49 -0
  17. package/docs/.vuepress/components/commonConfig/renderType/render.vue +91 -0
  18. package/docs/.vuepress/components/commonConfig/renderType/slot.vue +63 -0
  19. package/docs/.vuepress/components/crud/baseUse/baseUse.vue +98 -0
  20. package/docs/.vuepress/components/crud/baseUse/columnAction.vue +72 -0
  21. package/docs/.vuepress/components/crud/baseUse/columnWidth.vue +107 -0
  22. package/docs/.vuepress/components/crud/baseUse/handleRow.vue +65 -0
  23. package/docs/.vuepress/components/crud/baseUse/height.vue +82 -0
  24. package/docs/.vuepress/components/crud/baseUse/index.vue +54 -0
  25. package/docs/.vuepress/components/crud/baseUse/loading.vue +70 -0
  26. package/docs/.vuepress/components/crud/baseUse/pagination.vue +108 -0
  27. package/docs/.vuepress/components/crud/baseUse/selection.vue +114 -0
  28. package/docs/.vuepress/components/crud/baseUse/summaryMethod.vue +118 -0
  29. package/docs/.vuepress/components/crud/baseUse/title.vue +54 -0
  30. package/docs/.vuepress/components/crud/baseUse/toolbar.vue +69 -0
  31. package/docs/.vuepress/components/crud/buttons/common.vue +115 -0
  32. package/docs/.vuepress/components/crud/buttons/fast.vue +82 -0
  33. package/docs/.vuepress/components/crud/contextMenu/base.vue +72 -0
  34. package/docs/.vuepress/components/crud/copy.vue +52 -0
  35. package/docs/.vuepress/components/crud/crudEvents/api.vue +157 -0
  36. package/docs/.vuepress/components/crud/crudEvents/deleteTip.vue +93 -0
  37. package/docs/.vuepress/components/crud/crudEvents/events.vue +188 -0
  38. package/docs/.vuepress/components/crud/dataSort/base.vue +142 -0
  39. package/docs/.vuepress/components/crud/genDynamicColumns/base.vue +53 -0
  40. package/docs/.vuepress/components/crud/genDynamicColumns/dynamicAndFixed.vue +111 -0
  41. package/docs/.vuepress/components/crud/genDynamicColumns/treeDynamic.vue +68 -0
  42. package/docs/.vuepress/components/crud/handleBar/handleRow.vue +65 -0
  43. package/docs/.vuepress/components/crud/handleBar/toolbar.vue +69 -0
  44. package/docs/.vuepress/components/crud/renderType/1.vue +57 -0
  45. package/docs/.vuepress/components/crud/renderType/2.vue +63 -0
  46. package/docs/.vuepress/components/crud/renderType/3.vue +105 -0
  47. package/docs/.vuepress/components/crud/renderType/5.vue +91 -0
  48. package/docs/.vuepress/components/crud/search/1.vue +90 -0
  49. package/docs/.vuepress/components/crud/search/2.vue +78 -0
  50. package/docs/.vuepress/components/crud/search/3.vue +107 -0
  51. package/docs/.vuepress/components/crud/search/base.vue +123 -0
  52. package/docs/.vuepress/components/crud/search/localSearch.vue +124 -0
  53. package/docs/.vuepress/components/crud/search/special.vue +148 -0
  54. package/docs/.vuepress/components/crud/selection/events.vue +47 -0
  55. package/docs/.vuepress/components/crud/selection/pagination.vue +94 -0
  56. package/docs/.vuepress/components/crud/selection/singleSelection.vue +64 -0
  57. package/docs/.vuepress/components/crud/span/base.vue +69 -0
  58. package/docs/.vuepress/components/crud/span/special.vue +75 -0
  59. package/docs/.vuepress/components/crud/summary/base.vue +99 -0
  60. package/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue +174 -0
  61. package/docs/.vuepress/components/crud/tableEdit/cellEdit.vue +194 -0
  62. package/docs/.vuepress/components/crud/tableEdit/controlEdit.vue +219 -0
  63. package/docs/.vuepress/components/crud/tableEdit/dialog.vue +172 -0
  64. package/docs/.vuepress/components/crud/tableEdit/free.vue +88 -0
  65. package/docs/.vuepress/components/crud/tableEdit/freeColumn.vue +82 -0
  66. package/docs/.vuepress/components/crud/tableEdit/methods.vue +154 -0
  67. package/docs/.vuepress/components/crud/tableEdit/rowAction.vue +107 -0
  68. package/docs/.vuepress/components/crud/tableEdit/rowBatch.vue +116 -0
  69. package/docs/.vuepress/components/crud/tableEdit/rowClick.vue +98 -0
  70. package/docs/.vuepress/components/crud/validate/base.vue +122 -0
  71. package/docs/.vuepress/components/crud/validate/custom.vue +82 -0
  72. package/docs/.vuepress/components/crud/validate/regulars.vue +88 -0
  73. package/docs/.vuepress/components/crud/validate/relation.vue +91 -0
  74. package/docs/.vuepress/components/crud/validate/tree.vue +82 -0
  75. package/docs/.vuepress/components/dialog/baseUse/base.vue +92 -0
  76. package/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue +78 -0
  77. package/docs/.vuepress/components/dialog/baseUse/control.vue +79 -0
  78. package/docs/.vuepress/components/dialog/baseUse/drawer.vue +59 -0
  79. package/docs/.vuepress/components/dialog/baseUse/footer.vue +87 -0
  80. package/docs/.vuepress/components/dialog/baseUse/insertSlot.vue +79 -0
  81. package/docs/.vuepress/components/dict/DictLinkage.vue +91 -0
  82. package/docs/.vuepress/components/dict/baseUse.vue +72 -0
  83. package/docs/.vuepress/components/dict/component.vue +82 -0
  84. package/docs/.vuepress/components/dict/localDict.vue +68 -0
  85. package/docs/.vuepress/components/form/baseUse/base.vue +48 -0
  86. package/docs/.vuepress/components/form/baseUse/dataFormat.vue +92 -0
  87. package/docs/.vuepress/components/form/baseUse/deep.vue +57 -0
  88. package/docs/.vuepress/components/form/baseUse/gridLayout.vue +47 -0
  89. package/docs/.vuepress/components/form/baseUse/group.vue +66 -0
  90. package/docs/.vuepress/components/form/baseUse/hidden.vue +40 -0
  91. package/docs/.vuepress/components/form/baseUse/inlineLayout.vue +48 -0
  92. package/docs/.vuepress/components/form/baseUse/label.vue +51 -0
  93. package/docs/.vuepress/components/form/baseUse/tooltip.vue +40 -0
  94. package/docs/.vuepress/components/form/baseUse/validate.vue +52 -0
  95. package/docs/.vuepress/components/form/detail/base.vue +78 -0
  96. package/docs/.vuepress/components/form/detail/border.vue +90 -0
  97. package/docs/.vuepress/components/form/detail/singleDetail.vue +72 -0
  98. package/docs/.vuepress/components/formatData/baseUse.vue +131 -0
  99. package/docs/.vuepress/components/mock/index.js +347 -0
  100. package/docs/.vuepress/components/mockData/custom.vue +69 -0
  101. package/docs/.vuepress/components/mockData/example.vue +290 -0
  102. package/docs/.vuepress/components/positionSlot/base.vue +24 -0
  103. package/docs/.vuepress/components/positionSlot/form.vue +71 -0
  104. package/docs/.vuepress/components/positionSlot/table.vue +85 -0
  105. package/docs/.vuepress/components/tabs/base.vue +57 -0
  106. package/docs/.vuepress/components/temp.js +195 -0
  107. package/docs/.vuepress/config.js +146 -0
  108. package/docs/.vuepress/enhanceApp.js +142 -0
  109. package/docs/.vuepress/public/favicon.ico +0 -0
  110. package/docs/.vuepress/public/super.png +0 -0
  111. package/docs/.vuepress/styles/index.styl +25 -0
  112. package/docs/.vuepress/styles/palette.styl +6 -0
  113. package/docs/README.md +14 -0
  114. package/docs/guide/button/base.md +31 -0
  115. package/docs/guide/commonConfig/jsx.md +166 -0
  116. package/docs/guide/commonConfig/presetCodeTemplate.md +68 -0
  117. package/docs/guide/commonConfig/renderType.md +181 -0
  118. package/docs/guide/crud/baseUse.md +120 -0
  119. package/docs/guide/crud/buttons.md +18 -0
  120. package/docs/guide/crud/config.md +217 -0
  121. package/docs/guide/crud/contextMenu.md +18 -0
  122. package/docs/guide/crud/dataSort.md +66 -0
  123. package/docs/guide/crud/genDynamicColumns.md +145 -0
  124. package/docs/guide/crud/handleBar.md +26 -0
  125. package/docs/guide/crud/renderType.md +4 -0
  126. package/docs/guide/crud/search.md +150 -0
  127. package/docs/guide/crud/selection.md +73 -0
  128. package/docs/guide/crud/span.md +98 -0
  129. package/docs/guide/crud/summary.md +167 -0
  130. package/docs/guide/crud/tableEdit.md +377 -0
  131. package/docs/guide/crud/validate.md +158 -0
  132. package/docs/guide/dialog/baseUse.md +81 -0
  133. package/docs/guide/dict/baseUse.md +174 -0
  134. package/docs/guide/dict/component.md +88 -0
  135. package/docs/guide/dict/config.md +44 -0
  136. package/docs/guide/form/baseUse.md +142 -0
  137. package/docs/guide/form/detail.md +38 -0
  138. package/docs/guide/formatData/baseUse.md +98 -0
  139. package/docs/guide/formatData/config.md +142 -0
  140. package/docs/guide/mockData/base.md +26 -0
  141. package/docs/guide/positionSlot/base.md +41 -0
  142. package/docs/guide/question/base.md +44 -0
  143. package/docs/guide/start/base.md +30 -0
  144. package/docs/guide/tabs/base.md +63 -0
  145. package/examples/App.vue +52 -0
  146. package/examples/Layout/components/AppMain.vue +40 -0
  147. package/examples/Layout/components/Item.vue +29 -0
  148. package/examples/Layout/components/Link.vue +44 -0
  149. package/examples/Layout/components/SidebarItem.vue +93 -0
  150. package/examples/Layout/index.vue +69 -0
  151. package/examples/assets/logo.png +0 -0
  152. package/examples/favicon.ico +0 -0
  153. package/examples/index.html +18 -0
  154. package/examples/main.js +54 -0
  155. package/examples/router/index.js +140 -0
  156. package/examples/store/index.js +0 -0
  157. package/examples/styles/index.scss +63 -0
  158. package/examples/styles/sidebar.scss +226 -0
  159. package/examples/styles/transition.scss +48 -0
  160. package/examples/styles/variables.scss +25 -0
  161. package/examples/views/crud/base.vue +68 -0
  162. package/examples/views/crud/handleRow.vue +84 -0
  163. package/examples/views/crud/search.vue +116 -0
  164. package/examples/views/dashboard/index.vue +244 -0
  165. package/examples/views/dashboard/index1.vue +234 -0
  166. package/examples/views/dashboard/test.vue +9 -0
  167. package/examples/views/formTest/index.vue +168 -0
  168. package/examples/views/nested/menu1/index.vue +7 -0
  169. package/examples/views/nested/menu1/menu1-1/index.vue +7 -0
  170. package/examples/views/nested/menu1/menu1-2/index.vue +7 -0
  171. package/examples/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
  172. package/examples/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
  173. package/examples/views/nested/menu1/menu1-3/index.vue +5 -0
  174. package/examples/views/nested/menu2/index.vue +5 -0
  175. package/gulpfile.js +84 -0
  176. package/lib/index.css +1 -0
  177. package/lib/super-crud.min.js +15 -0
  178. package/package.json +66 -0
  179. package/packages/button/index.vue +189 -0
  180. package/packages/core/components/comp.vue +223 -0
  181. package/packages/core/components/position.vue +135 -0
  182. package/packages/core/components/render.vue +460 -0
  183. package/packages/core/configManager.js +302 -0
  184. package/packages/core/create.js +8 -0
  185. package/packages/core/defaultRender.js +64 -0
  186. package/packages/core/dict/global.js +10 -0
  187. package/packages/core/dict/index.js +432 -0
  188. package/packages/core/dict/mixin.js +94 -0
  189. package/packages/core/event.js +60 -0
  190. package/packages/core/index.js +6 -0
  191. package/packages/core/init.js +122 -0
  192. package/packages/core/mock/genConfig.js +228 -0
  193. package/packages/core/mock/genData.js +422 -0
  194. package/packages/core/mock/index.js +4 -0
  195. package/packages/core/rules.js +111 -0
  196. package/packages/crud/column.vue +205 -0
  197. package/packages/crud/columnAction.vue +207 -0
  198. package/packages/crud/columnCell.vue +146 -0
  199. package/packages/crud/defaultColumn.vue +130 -0
  200. package/packages/crud/drawerColumn.vue +225 -0
  201. package/packages/crud/form.vue +69 -0
  202. package/packages/crud/index.vue +564 -0
  203. package/packages/crud/menuBar.vue +298 -0
  204. package/packages/crud/mixins/cacheHandler.js +36 -0
  205. package/packages/crud/mixins/calcColumnWidth.js +79 -0
  206. package/packages/crud/mixins/calcHeight.js +105 -0
  207. package/packages/crud/mixins/columnHandler.js +128 -0
  208. package/packages/crud/mixins/contextMenu.js +98 -0
  209. package/packages/crud/mixins/dataProcessor.js +202 -0
  210. package/packages/crud/mixins/dialog.js +109 -0
  211. package/packages/crud/mixins/excelHandler.js +150 -0
  212. package/packages/crud/mixins/exposeMethods.js +107 -0
  213. package/packages/crud/mixins/generateDynamicColumns.js +250 -0
  214. package/packages/crud/mixins/props.js +38 -0
  215. package/packages/crud/mixins/searchHandler.js +151 -0
  216. package/packages/crud/mixins/select.js +359 -0
  217. package/packages/crud/mixins/spanMethod.js +288 -0
  218. package/packages/crud/mixins/summary.js +177 -0
  219. package/packages/crud/mixins/tableEdit.js +547 -0
  220. package/packages/crud/mixins/validate.js +219 -0
  221. package/packages/crud/pagination.vue +110 -0
  222. package/packages/crud/search.vue +119 -0
  223. package/packages/crud/searchHeader.vue +231 -0
  224. package/packages/crud/selectBanner.vue +138 -0
  225. package/packages/crud/utils/EditState.js +319 -0
  226. package/packages/crud/utils/excelExport.js +112 -0
  227. package/packages/crud/utils/excelImport.js +112 -0
  228. package/packages/crud/utils/index.js +98 -0
  229. package/packages/dialog/dialog.js +233 -0
  230. package/packages/dialog/dialog.vue +15 -0
  231. package/packages/dialog/index.js +22 -0
  232. package/packages/dict/cascadeFormat.vue +179 -0
  233. package/packages/dict/dateFormat.vue +40 -0
  234. package/packages/dict/form/cascade.vue +61 -0
  235. package/packages/dict/form/checkbox.vue +90 -0
  236. package/packages/dict/form/extendMethod.js +22 -0
  237. package/packages/dict/form/input-base.js +31 -0
  238. package/packages/dict/form/input.js +20 -0
  239. package/packages/dict/form/radio.vue +69 -0
  240. package/packages/dict/form/select.vue +118 -0
  241. package/packages/dict/form/switch.vue +75 -0
  242. package/packages/dict/valueFormat.vue +188 -0
  243. package/packages/directive/dialog/drag.js +86 -0
  244. package/packages/directive/dialog/dragSize.js +42 -0
  245. package/packages/directive/index.js +9 -0
  246. package/packages/directive/insertSlot.js +10 -0
  247. package/packages/form/contextMenu.js +192 -0
  248. package/packages/form/draftDrawer.vue +391 -0
  249. package/packages/form/formAction.vue +97 -0
  250. package/packages/form/formItem.vue +259 -0
  251. package/packages/form/index.vue +451 -0
  252. package/packages/form/props.js +15 -0
  253. package/packages/grid/cell.vue +65 -0
  254. package/packages/grid/index.vue +130 -0
  255. package/packages/group/index.vue +96 -0
  256. package/packages/tabs/index.vue +290 -0
  257. package/packages/tooltip/index.js +9 -0
  258. package/packages/tooltip/tooltip.vue +32 -0
  259. package/packages/tooltip/tooltipComponent.js +38 -0
  260. package/packages/verifyInput/index.vue +131 -0
  261. package/src/config/common.js +88 -0
  262. package/src/config/crud.js +567 -0
  263. package/src/config/dialog.js +87 -0
  264. package/src/config/form.js +215 -0
  265. package/src/config/index.js +9 -0
  266. package/src/constants/index.js +72 -0
  267. package/src/index.js +67 -0
  268. package/src/template/btn/crud.js +6 -0
  269. package/src/template/btn/dialog.js +1 -0
  270. package/src/template/btn/form.js +3 -0
  271. package/src/template/btn/index.js +9 -0
  272. package/src/template/dicts.js +1 -0
  273. package/src/template/formatData.js +507 -0
  274. package/src/template/index.js +19 -0
  275. package/src/template/render.js +124 -0
  276. package/src/template/rules.js +53 -0
  277. package/src/utils/bem.js +49 -0
  278. package/src/utils/cache.js +77 -0
  279. package/src/utils/getType.js +34 -0
  280. package/src/utils/index.js +212 -0
  281. package/src/utils/mergeTemp.js +124 -0
  282. package/styles/button.scss +3 -0
  283. package/styles/crud.scss +425 -0
  284. package/styles/dialog.scss +95 -0
  285. package/styles/form.scss +532 -0
  286. package/styles/group.scss +78 -0
  287. package/styles/index.scss +94 -0
  288. package/styles/tabs.scss +139 -0
  289. package/styles/verifyInput.scss +56 -0
  290. package/vue-jsx-sync.js +90 -0
  291. package/vue.config.js +54 -0
package/deploy.bat ADDED
@@ -0,0 +1,14 @@
1
+ @echo off
2
+ call npm run docs:build
3
+
4
+ pushd docs\.vuepress\dist
5
+
6
+ git init
7
+ git add -A
8
+ git commit -m "deploy"
9
+
10
+ git push -f git@github.com:Blade-H1kar1/vue-super-crud.git master:gh-pages
11
+
12
+ popd
13
+
14
+ rmdir /s /q docs\.vuepress\dist
@@ -0,0 +1,88 @@
1
+ <template>
2
+ <div>
3
+ <!-- 基础按钮 -->
4
+ <sc-button @click="handleClick">基础</sc-button>
5
+
6
+ <!-- 下拉菜单按钮 -->
7
+ <sc-button
8
+ type="primary"
9
+ label="下拉按钮"
10
+ :children="[
11
+ {
12
+ label: '编辑',
13
+ onClick: handleClick,
14
+ },
15
+ {
16
+ label: '删除',
17
+ onClick: handleClick,
18
+ confirm: true,
19
+ type: 'danger',
20
+ },
21
+ ]"
22
+ />
23
+
24
+ <!-- 带输入框的提交 -->
25
+ <sc-button
26
+ type="warning"
27
+ label="文本提交"
28
+ :textSubmit="{
29
+ title: '驳回原因',
30
+ label: '驳回原因',
31
+ rows: 4, // 默认值
32
+ required: true, // 默认值
33
+ }"
34
+ @click="handleReject"
35
+ />
36
+
37
+ <!-- 带确认框的按钮 -->
38
+ <sc-button
39
+ type="danger"
40
+ label="确认操作"
41
+ confirm="确认操作"
42
+ @click="handleClick"
43
+ />
44
+
45
+ <!-- 使用对象配置确认框 -->
46
+ <sc-button
47
+ type="warning"
48
+ label="对象配置确认框"
49
+ :confirm="{
50
+ title: '对象配置确认框',
51
+ label: '确定要执行此操作吗?',
52
+ confirmButtonText: '通过',
53
+ cancelButtonText: '拒绝',
54
+ type: 'warning',
55
+ }"
56
+ @click="handleClick"
57
+ />
58
+
59
+ <!-- 带自定义确认框的按钮 -->
60
+ <sc-button
61
+ type="warning"
62
+ label="自定义确认框"
63
+ :customConfirm="{
64
+ title: '自定义确认框',
65
+ label: '确定要执行此操作吗?',
66
+ content: renderContent,
67
+ }"
68
+ @click="handleClick"
69
+ />
70
+ </div>
71
+ </template>
72
+
73
+ <script>
74
+ export default {
75
+ methods: {
76
+ handleClick() {
77
+ console.log("click");
78
+ },
79
+ handleReject(cb, reason) {
80
+ console.log("驳回原因:", cb, reason);
81
+ cb(); // 完成后调用回调
82
+ },
83
+ renderContent(h) {
84
+ return <div>111</div>;
85
+ },
86
+ },
87
+ };
88
+ </script>
@@ -0,0 +1,331 @@
1
+ <template>
2
+ <div
3
+ class="code-format"
4
+ :class="{ hover: hovering }"
5
+ @mouseenter="hovering = true"
6
+ @mouseleave="hovering = false"
7
+ >
8
+ <div class="source" :class="{ source_height: sourceHeight }">
9
+ <slot name="source"></slot>
10
+ </div>
11
+ <div class="meta" ref="meta">
12
+ <div class="description" v-if="$slots.desc">
13
+ <slot name="desc"></slot>
14
+ </div>
15
+ <div class="highlight">
16
+ <slot></slot>
17
+ </div>
18
+ </div>
19
+ <div
20
+ class="code-format-control"
21
+ ref="control"
22
+ :class="{ 'is-fixed': fixedControl }"
23
+ @click="isExpanded = !isExpanded"
24
+ >
25
+ <transition name="arrow-slide">
26
+ <i :class="[iconClass, { hovering: hovering }]"></i>
27
+ </transition>
28
+ <transition name="text-slide">
29
+ <span v-show="hovering">{{ controlText }}</span>
30
+ </transition>
31
+ <div class="control-button-container">
32
+ <el-button
33
+ v-show="isExpanded"
34
+ ref="copyButton"
35
+ size="small"
36
+ type="text"
37
+ class="control-button copy-button"
38
+ @click.stop="copyCode"
39
+ >复制代码</el-button
40
+ >
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </template>
45
+
46
+ <script>
47
+ export default {
48
+ name: "CodeFormat",
49
+ props: {
50
+ sourceHeight: {
51
+ type: Boolean,
52
+ default: false,
53
+ },
54
+ },
55
+ data() {
56
+ return {
57
+ qrCodeDialog: false,
58
+ hovering: false,
59
+ isExpanded: false,
60
+ fixedControl: false,
61
+ scrollParent: null,
62
+ currentWidth: 0,
63
+ };
64
+ },
65
+ computed: {
66
+ lang() {
67
+ return this.$route.path.split("/")[1];
68
+ },
69
+ iconClass() {
70
+ return this.isExpanded ? "el-icon-caret-top" : "el-icon-caret-bottom";
71
+ },
72
+ controlText() {
73
+ return this.isExpanded ? "隐藏代码" : "显示代码";
74
+ },
75
+ codeArea() {
76
+ return this.$el.getElementsByClassName("meta")[0];
77
+ },
78
+ },
79
+ watch: {
80
+ isExpanded(val) {
81
+ this.setCodeAreaHeight();
82
+ if (!val) {
83
+ this.fixedControl = false;
84
+ // this.$refs.control.style.left = '0'
85
+ this.removeScrollHandler();
86
+ return;
87
+ }
88
+ setTimeout(() => {
89
+ this.scrollParent = window;
90
+ this.scrollParent &&
91
+ this.scrollParent.addEventListener("scroll", this.scrollHandler);
92
+ this.scrollHandler();
93
+ this.setFixedWidth();
94
+ }, 200);
95
+ },
96
+ },
97
+ mounted() {
98
+ const observer = new ResizeObserver(() => {
99
+ this.currentWidth = Math.round(this.$el.getBoundingClientRect().width);
100
+ });
101
+ observer.observe(this.$el);
102
+ },
103
+ beforeDestroy() {
104
+ this.removeScrollHandler();
105
+ },
106
+ methods: {
107
+ setFixedWidth() {
108
+ this.$el.querySelector(
109
+ ".code-format-control"
110
+ ).style.width = `${this.currentWidth}px`;
111
+ },
112
+ getCodeAreaHeight() {
113
+ if (this.$el.getElementsByClassName("description").length > 0) {
114
+ return (
115
+ this.$el.getElementsByClassName("description")[0].clientHeight +
116
+ this.$el.getElementsByClassName("highlight")[0].clientHeight +
117
+ 20
118
+ );
119
+ }
120
+ return this.$el.getElementsByClassName("highlight")[0].clientHeight;
121
+ },
122
+ setCodeAreaHeight() {
123
+ this.codeArea.style.height = this.isExpanded
124
+ ? `${this.getCodeAreaHeight() + 1}px`
125
+ : "0";
126
+ },
127
+ copyCode() {
128
+ const pre = this.$el.querySelectorAll("pre")[0];
129
+ pre.setAttribute("contenteditable", "true");
130
+ pre.focus();
131
+ document.execCommand("selectAll", false, null);
132
+ const copied = document.execCommand("copy");
133
+ if (copied) {
134
+ pre.removeAttribute("contenteditable");
135
+ this.$message.success("复制成功!");
136
+ } else {
137
+ this.$message.error("复制失败!");
138
+ }
139
+ },
140
+ scrollHandler() {
141
+ const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
142
+ this.fixedControl =
143
+ bottom > document.documentElement.clientHeight &&
144
+ top + 44 <= document.documentElement.clientHeight;
145
+ // this.$refs.control.style.left = this.fixedControl ? `${left}px` : '0'
146
+ },
147
+ removeScrollHandler() {
148
+ this.scrollParent &&
149
+ this.scrollParent.removeEventListener("scroll", this.scrollHandler);
150
+ },
151
+ },
152
+ };
153
+ </script>
154
+ <style lang="scss">
155
+ .code-format {
156
+ border: solid 1px #ebebeb;
157
+ border-radius: 3px;
158
+ transition: 0.2s;
159
+ &.hover {
160
+ box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
161
+ 0 2px 4px 0 rgba(232, 237, 250, 0.5);
162
+ }
163
+ code {
164
+ font-family: Menlo, Monaco, Consolas, Courier, monospace;
165
+ }
166
+ .demo-button {
167
+ float: right;
168
+ }
169
+ .source {
170
+ padding: 15px;
171
+ }
172
+ .source_height {
173
+ height: 600px;
174
+ }
175
+ .meta {
176
+ background-color: #fafafa;
177
+ border-top: solid 1px #eaeefb;
178
+ overflow: hidden;
179
+ height: 0;
180
+ transition: height 0.5s;
181
+ }
182
+ .description {
183
+ padding: 20px;
184
+ box-sizing: border-box;
185
+ border: solid 1px #ebebeb;
186
+ border-radius: 3px;
187
+ font-size: 14px;
188
+ line-height: 22px;
189
+ color: #666;
190
+ word-break: break-word;
191
+ margin: 10px !important;
192
+ background-color: #fff;
193
+ p {
194
+ margin: 0;
195
+ line-height: 26px;
196
+ }
197
+ code {
198
+ color: #5e6d82;
199
+ background-color: #e6effb;
200
+ margin: 0 4px;
201
+ display: inline-block;
202
+ padding: 1px 5px;
203
+ font-size: 12px;
204
+ border-radius: 3px;
205
+ height: 18px;
206
+ line-height: 18px;
207
+ }
208
+ }
209
+ .highlight {
210
+ pre {
211
+ margin: 0;
212
+ }
213
+ code.hljs {
214
+ margin: 0;
215
+ border: none;
216
+ max-height: none;
217
+ border-radius: 0;
218
+ &::before {
219
+ content: none;
220
+ }
221
+ }
222
+ }
223
+ .code-format-control {
224
+ z-index: 1;
225
+ border-top: solid 1px #eaeefb;
226
+ height: 44px;
227
+ box-sizing: border-box;
228
+ background-color: #fff;
229
+ border-bottom-left-radius: 4px;
230
+ border-bottom-right-radius: 4px;
231
+ text-align: center;
232
+ margin-top: -1px;
233
+ color: #d3dce6;
234
+ cursor: pointer;
235
+ position: relative;
236
+ &.is-fixed {
237
+ position: fixed;
238
+ bottom: 0;
239
+ width: 1068px;
240
+ z-index: 1;
241
+ }
242
+ i {
243
+ font-size: 16px;
244
+ line-height: 44px;
245
+ transition: 0.3s;
246
+ &.hovering {
247
+ transform: translateX(-40px);
248
+ }
249
+ }
250
+ > span {
251
+ position: absolute;
252
+ transform: translateX(-30px);
253
+ font-size: 14px;
254
+ line-height: 44px;
255
+ transition: 0.3s;
256
+ display: inline-block;
257
+ }
258
+ &:hover {
259
+ color: #409eff;
260
+ background-color: #f9fafc;
261
+ }
262
+ & .text-slide-enter,
263
+ & .text-slide-leave-active {
264
+ opacity: 0;
265
+ transform: translateX(10px);
266
+ }
267
+ .qr_code {
268
+ line-height: 26px;
269
+ position: absolute;
270
+ top: 0;
271
+ left: 0;
272
+ font-size: 14px;
273
+ padding-left: 15px;
274
+ padding-right: 25px;
275
+ }
276
+ .control-button {
277
+ line-height: 26px;
278
+ position: absolute;
279
+ top: 0;
280
+ right: 0;
281
+ font-size: 14px;
282
+ padding-left: 5px;
283
+ padding-right: 25px;
284
+ }
285
+ }
286
+ @media (max-width: 1500px) {
287
+ .code-format-control {
288
+ &.is-fixed {
289
+ width: 916px;
290
+ }
291
+ }
292
+ }
293
+ @media (max-width: 1300px) {
294
+ .code-format-control {
295
+ &.is-fixed {
296
+ width: 840px;
297
+ }
298
+ }
299
+ }
300
+ @media (max-width: 1200px) {
301
+ .code-format-control {
302
+ &.is-fixed {
303
+ width: 770px;
304
+ }
305
+ }
306
+ }
307
+ table {
308
+ margin: 0;
309
+ display: table;
310
+ }
311
+ th,
312
+ td,
313
+ tr {
314
+ border: 0;
315
+ }
316
+ }
317
+ .el-popper {
318
+ table {
319
+ margin: 0;
320
+ display: table;
321
+ }
322
+ th,
323
+ td,
324
+ tr {
325
+ border: 0;
326
+ }
327
+ tr:nth-child(2n) {
328
+ background: none;
329
+ }
330
+ }
331
+ </style>
@@ -0,0 +1,68 @@
1
+ <template>
2
+ <div>
3
+ <sc-crud :search.sync="searchForm" :options="options" :data="data">
4
+ </sc-crud>
5
+ </div>
6
+ </template>
7
+
8
+ <script>
9
+ /***
10
+ * date 匹配到的全局配置对象
11
+ *
12
+ *date: {
13
+ comp: {
14
+ name: "el-date-picker",
15
+ type: "date",
16
+ valueFormat: "yyyy-MM-dd",
17
+ },
18
+ }
19
+ * * */
20
+ export default {
21
+ data() {
22
+ return {
23
+ searchForm: {},
24
+ options: {
25
+ renderColumns: [
26
+ { prop: "name", label: "昵称" },
27
+ {
28
+ prop: "username",
29
+ label: "姓名",
30
+ },
31
+ {
32
+ prop: "createTime",
33
+ label: "模板复用示例",
34
+ presetType: "date", // 使用模板
35
+ },
36
+ {
37
+ prop: "createTime",
38
+ label: "不使用模板,效果与模板等价",
39
+ comp: {
40
+ name: "el-date-picker",
41
+ type: "date",
42
+ valueFormat: "yyyy-MM-dd",
43
+ },
44
+ },
45
+ ],
46
+ },
47
+ data: [
48
+ {
49
+ createTime: "2018-06-02",
50
+ createUser: 94,
51
+ id: 56,
52
+ idNumber: "8",
53
+ name: "识间华中张认",
54
+ password: "sed laboris",
55
+ phone: "18157668675",
56
+ gender: "男",
57
+ age: 20,
58
+ status: 35,
59
+ updateTime: "2018-09-08 16:33:19",
60
+ updateUser: 58,
61
+ username: "石洋",
62
+ },
63
+ ],
64
+ };
65
+ },
66
+ methods: {},
67
+ };
68
+ </script>
@@ -0,0 +1,73 @@
1
+ <template>
2
+ <div>
3
+ <sc-crud :search.sync="searchForm" :options="options" :data="data">
4
+ </sc-crud>
5
+ </div>
6
+ </template>
7
+
8
+ <script>
9
+ /***
10
+ * "testCodeTemplate" 匹配到的配置对象
11
+ * @param {Object} item - 当前配置对象
12
+ *
13
+ *testCodeTemplate: (item) => ({
14
+ search: {
15
+ comp: {
16
+ name: item.searchCompName,
17
+ type: item.SearchCompType,
18
+ },
19
+ },
20
+ form: {
21
+ comp: {
22
+ name: item.formCompName,
23
+ },
24
+ },
25
+ formatter: (row) => row[item.prop] + "自定义格式化",
26
+ }),
27
+ * * */
28
+ export default {
29
+ data() {
30
+ return {
31
+ searchForm: {},
32
+ options: {
33
+ rowEdit: true,
34
+ searchHeader: true,
35
+ renderColumns: [
36
+ {
37
+ prop: "name",
38
+ label: "昵称",
39
+ presetType: "testCodeTemplate",
40
+ searchCompName: "el-select",
41
+ formCompName: "el-select",
42
+ },
43
+ {
44
+ prop: "username",
45
+ label: "姓名",
46
+ presetType: "testCodeTemplate",
47
+ searchCompName: "el-input",
48
+ formCompName: "el-input",
49
+ },
50
+ ],
51
+ },
52
+ data: [
53
+ {
54
+ createTime: "2018-06-02 12:28:47",
55
+ createUser: 94,
56
+ id: 56,
57
+ idNumber: "8",
58
+ name: "识间华中张认",
59
+ password: "sed laboris",
60
+ phone: "18157668675",
61
+ gender: "男",
62
+ age: 20,
63
+ status: 35,
64
+ updateTime: "2018-09-08 16:33:19",
65
+ updateUser: 58,
66
+ username: "石洋",
67
+ },
68
+ ],
69
+ };
70
+ },
71
+ methods: {},
72
+ };
73
+ </script>