jobsys-explore 4.6.21 → 4.7.0

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 (180) hide show
  1. package/.eslintignore +3 -3
  2. package/CHANGELOG.md +542 -542
  3. package/README.md +41 -41
  4. package/TODOs.md +8 -8
  5. package/business-components/survey/ExSurvey.jsx +193 -193
  6. package/business-components/survey/index.js +5 -5
  7. package/business-components/survey/index.less +36 -36
  8. package/components/button/ExButton.jsx +120 -120
  9. package/components/button/index.js +4 -4
  10. package/components/button/index.less +7 -7
  11. package/components/decorator/ExDecorator.jsx +31 -31
  12. package/components/decorator/index.js +5 -5
  13. package/components/decorator/index.less +76 -76
  14. package/components/form/ExAddress.jsx +195 -195
  15. package/components/form/ExCascader.jsx +171 -171
  16. package/components/form/ExCheckbox.jsx +59 -59
  17. package/components/form/ExDate.jsx +143 -143
  18. package/components/form/ExDatetime.jsx +166 -166
  19. package/components/form/ExField.jsx +138 -138
  20. package/components/form/ExFieldUploader.jsx +50 -50
  21. package/components/form/ExForm.jsx +544 -544
  22. package/components/form/ExMatrixCheckbox.jsx +99 -99
  23. package/components/form/ExMatrixRadio.jsx +86 -86
  24. package/components/form/ExMatrixScale.jsx +97 -97
  25. package/components/form/ExNumber.jsx +51 -51
  26. package/components/form/ExRadio.jsx +58 -58
  27. package/components/form/ExRate.jsx +51 -51
  28. package/components/form/ExSelect.jsx +251 -251
  29. package/components/form/ExSlider.jsx +55 -55
  30. package/components/form/ExSwitch.jsx +51 -51
  31. package/components/form/ExTime.jsx +99 -99
  32. package/components/form/FormItem.jsx +307 -307
  33. package/components/form/PickerWrapper.jsx +120 -120
  34. package/components/form/index.js +46 -46
  35. package/components/form/index.less +178 -178
  36. package/components/form/utils.js +62 -62
  37. package/components/grid/ExGrid.jsx +53 -53
  38. package/components/grid/index.js +4 -4
  39. package/components/grid/index.less +2 -2
  40. package/components/index.js +12 -12
  41. package/components/pagination/ExPagination.jsx +457 -440
  42. package/components/pagination/index.js +5 -5
  43. package/components/pagination/index.less +3 -3
  44. package/components/provider/ExProvider.jsx +173 -173
  45. package/components/qrcode/ExQrcode.jsx +86 -86
  46. package/components/qrcode/index.js +5 -5
  47. package/components/qrcode/index.less +8 -8
  48. package/components/result/ExResult.jsx +122 -122
  49. package/components/result/index.js +5 -5
  50. package/components/result/index.less +59 -59
  51. package/components/search/ExSearch.jsx +370 -326
  52. package/components/search/components/Expand.jsx +77 -77
  53. package/components/search/components/Field.jsx +27 -27
  54. package/components/search/components/Quick.jsx +57 -57
  55. package/components/search/components/index.js +5 -5
  56. package/components/search/index.js +5 -5
  57. package/components/search/index.less +118 -118
  58. package/components/search/utils.js +30 -30
  59. package/components/sector/ExSector.jsx +52 -52
  60. package/components/sector/README.md +26 -26
  61. package/components/sector/index.js +5 -5
  62. package/components/sector/index.less +122 -122
  63. package/components/theme/ExTheme.jsx +10 -10
  64. package/components/theme/index.js +4 -4
  65. package/components/theme/index.less +98 -98
  66. package/components/uploader/ExUploader.jsx +293 -293
  67. package/components/uploader/index.js +5 -5
  68. package/components/utils.js +187 -187
  69. package/directives/auth.js +113 -113
  70. package/directives/index.js +4 -4
  71. package/dist/cipher-98df1050.cjs.map +1 -1
  72. package/dist/cipher-f2ed5ee6.js.map +1 -1
  73. package/dist/directives.cjs.map +1 -1
  74. package/dist/directives.js.map +1 -1
  75. package/dist/hooks.cjs.map +1 -1
  76. package/dist/hooks.js.map +1 -1
  77. package/dist/jobsys-explore.cjs +6 -6
  78. package/dist/jobsys-explore.cjs.map +1 -1
  79. package/dist/jobsys-explore.js +464 -407
  80. package/dist/jobsys-explore.js.map +1 -1
  81. package/docgen.config.js +15 -15
  82. package/docs/.vuepress/.cache/deps/_metadata.json +52 -52
  83. package/docs/.vuepress/.cache/deps/lodash-es.js +8442 -8442
  84. package/docs/.vuepress/.cache/deps/lodash-es.js.map +7 -7
  85. package/docs/.vuepress/.temp/internal/clientConfigs.js +17 -17
  86. package/docs/.vuepress/.temp/internal/pagesComponents.js +24 -24
  87. package/docs/.vuepress/.temp/internal/pagesData.js +22 -22
  88. package/docs/.vuepress/.temp/internal/pagesRoutes.js +12 -12
  89. package/docs/.vuepress/.temp/internal/themeData.js +1 -1
  90. package/docs/.vuepress/.temp/pages/components/decorator/ExDecorator.html.js +1 -1
  91. package/docs/.vuepress/.temp/pages/components/decorator/ExDecorator.html.vue +37 -37
  92. package/docs/.vuepress/.temp/pages/components/sector/ExSector.html.js +1 -1
  93. package/docs/.vuepress/.temp/pages/components/sector/ExSector.html.vue +71 -71
  94. package/docs/.vuepress/.temp/styles/index.scss +1 -1
  95. package/docs/.vuepress/config.js +61 -61
  96. package/docs/.vuepress/dist/404.html +33 -33
  97. package/docs/.vuepress/dist/assets/404.html-a0ce2184.js +1 -1
  98. package/docs/.vuepress/dist/assets/ExButton.html-ad283101.js +1 -1
  99. package/docs/.vuepress/dist/assets/ExDecorator.html-42d09114.js +1 -1
  100. package/docs/.vuepress/dist/assets/ExDecorator.html-c82c5fe8.js +1 -1
  101. package/docs/.vuepress/dist/assets/ExForm.html-9e3f8000.js +1 -1
  102. package/docs/.vuepress/dist/assets/ExProvider.html-78fdc6cd.js +1 -1
  103. package/docs/.vuepress/dist/assets/ExSearch.html-103f6f34.js +1 -1
  104. package/docs/.vuepress/dist/assets/ExSector.html-a1e24c3a.js +7 -7
  105. package/docs/.vuepress/dist/assets/ExSector.html-cff3fefd.js +1 -1
  106. package/docs/.vuepress/dist/assets/ExUploader.html-8310e424.js +1 -1
  107. package/docs/.vuepress/dist/assets/app-29fe8d1e.js +10 -10
  108. package/docs/.vuepress/dist/assets/hooks.html-90ccbc1a.js +1 -1
  109. package/docs/.vuepress/dist/assets/index.html-85b79c97.js +43 -43
  110. package/docs/.vuepress/dist/assets/style-46d7e227.css +1 -1
  111. package/docs/.vuepress/dist/components/button/ExButton.html +33 -33
  112. package/docs/.vuepress/dist/components/decorator/ExDecorator.html +33 -33
  113. package/docs/.vuepress/dist/components/form/ExForm.html +33 -33
  114. package/docs/.vuepress/dist/components/provider/ExProvider.html +33 -33
  115. package/docs/.vuepress/dist/components/search/ExSearch.html +33 -33
  116. package/docs/.vuepress/dist/components/sector/ExSector.html +39 -39
  117. package/docs/.vuepress/dist/components/uploader/ExUploader.html +33 -33
  118. package/docs/.vuepress/dist/hooks.html +33 -33
  119. package/docs/.vuepress/dist/index.html +75 -75
  120. package/docs/.vuepress/styles/index.scss +7 -7
  121. package/docs/components/decorator/ExDecorator.md +14 -14
  122. package/docs/components/sector/ExSector.md +43 -43
  123. package/docs/index.md +82 -82
  124. package/hooks/cipher.js +44 -44
  125. package/hooks/datetime.js +69 -69
  126. package/hooks/form.js +188 -188
  127. package/hooks/utils.js +282 -282
  128. package/index.html +17 -17
  129. package/package.json +1 -1
  130. package/playground/App.vue +191 -191
  131. package/playground/TestButton.vue +61 -61
  132. package/playground/TestCascader.vue +2442 -2442
  133. package/playground/TestDecorator.vue +14 -14
  134. package/playground/TestForm.vue +429 -429
  135. package/playground/TestFormItem.vue +110 -110
  136. package/playground/TestGrid.vue +22 -22
  137. package/playground/TestPagination.vue +1250 -1248
  138. package/playground/TestQrcode.vue +7 -7
  139. package/playground/TestResult.vue +12 -12
  140. package/playground/TestSearch.vue +115 -115
  141. package/playground/TestSector.vue +15 -15
  142. package/playground/TestSurvey.vue +27 -27
  143. package/playground/TestUploader.vue +14 -14
  144. package/playground/main.js +22 -22
  145. package/utils/style.js +13 -13
  146. package/vite.config.js +54 -54
  147. package/.changeset/blue-spiders-roll.md +0 -5
  148. package/.changeset/cyan-monkeys-draw.md +0 -5
  149. package/.changeset/dry-feet-float.md +0 -5
  150. package/.changeset/empty-mice-share.md +0 -5
  151. package/.changeset/famous-yaks-doubt.md +0 -5
  152. package/.changeset/five-fans-type.md +0 -5
  153. package/.changeset/funny-hats-drop.md +0 -5
  154. package/.changeset/khaki-cobras-bathe.md +0 -5
  155. package/.changeset/khaki-forks-shave.md +0 -5
  156. package/.changeset/lazy-yaks-crash.md +0 -5
  157. package/.changeset/light-cycles-flow.md +0 -5
  158. package/.changeset/loud-mirrors-explain.md +0 -5
  159. package/.changeset/lovely-balloons-protect.md +0 -5
  160. package/.changeset/mean-pens-travel.md +0 -5
  161. package/.changeset/moody-doors-grow.md +0 -5
  162. package/.changeset/moody-laws-change.md +0 -5
  163. package/.changeset/nasty-goats-joke.md +0 -5
  164. package/.changeset/odd-forks-drop.md +0 -5
  165. package/.changeset/olive-windows-suffer.md +0 -5
  166. package/.changeset/popular-carpets-jog.md +0 -5
  167. package/.changeset/popular-planets-play.md +0 -5
  168. package/.changeset/rare-gorillas-boil.md +0 -5
  169. package/.changeset/rare-moose-teach.md +0 -5
  170. package/.changeset/sharp-tools-hope.md +0 -5
  171. package/.changeset/slimy-sloths-refuse.md +0 -5
  172. package/.changeset/slow-boats-search.md +0 -5
  173. package/.changeset/small-experts-bake.md +0 -5
  174. package/.changeset/smooth-horses-tie.md +0 -5
  175. package/.changeset/tame-feet-reply.md +0 -5
  176. package/.changeset/tidy-items-reflect.md +0 -5
  177. package/.changeset/weak-chicken-admire.md +0 -5
  178. package/.changeset/weak-rockets-compare.md +0 -5
  179. package/.changeset/wild-glasses-bathe.md +0 -5
  180. package/.changeset/wise-ears-turn.md +0 -5
@@ -1,5 +1,5 @@
1
- import _ExPagination from "./ExPagination.jsx"
2
- import withInstall from "../../utils/withInstall"
3
-
4
- export const ExPagination = withInstall(_ExPagination)
5
- export default ExPagination
1
+ import _ExPagination from "./ExPagination.jsx"
2
+ import withInstall from "../../utils/withInstall"
3
+
4
+ export const ExPagination = withInstall(_ExPagination)
5
+ export default ExPagination
@@ -1,3 +1,3 @@
1
- .ex-pagination__refresh {
2
- overflow: visible;
3
- }
1
+ .ex-pagination__refresh {
2
+ overflow: visible;
3
+ }
@@ -1,173 +1,173 @@
1
- import { defineComponent, provide } from "vue"
2
-
3
- export const EX_UPLOADER = Symbol("EX_UPLOADER")
4
- export const EX_ADDRESS = Symbol("EX_ADDRESS")
5
- export const EX_FORM = Symbol("EX_FORM")
6
- export const EX_SEARCH = Symbol("EX_SEARCH")
7
- export const EX_PAGINATION = Symbol("EX_PAGINATION")
8
-
9
- /**
10
- * Explore 配置组件
11
- * @version 1.0.0
12
- */
13
- export default defineComponent({
14
- name: "ExProvider",
15
- /**
16
- * @typedef {Object} ProviderProps
17
- * @property {UploaderProviderProps} [uploader] `ExUploader` 配置
18
- * @property {AddressProviderProps} [address] `ExAddress` 配置
19
- * @property {FormProviderProps} [form] `ExForm` 配置
20
- * @property {SearchProviderProps} [search] `ExSearch` 配置
21
- * @property {PaginationProviderProps} [pagination] `ExPagination` 配置
22
- *
23
- */
24
- props: {
25
- /**
26
- * @typedef {Object} UploaderProviderProps `ExUploader` 配置
27
- * @property {string} uploadUrl 上传地址
28
- * @property {UploadFileItem} defaultFileItem 默认文件项
29
- *
30
- * @typedef {Object} UploadFileItem 文件项
31
- * @property {string} [id] 文件 ID
32
- * @property {string} [name] 文件名
33
- * @property {string} defaultFileItem.url 文件地址
34
- * @property {string} defaultFileItem.path 文件路径
35
- * @property {string} [thumbUrl] 缩略图地址
36
- */
37
- uploader: {
38
- type: Object,
39
- default: () => ({
40
- uploadUrl: "",
41
- defaultFileItem: {
42
- id: "id",
43
- name: "name",
44
- url: "url",
45
- path: "path",
46
- thumbUrl: "thumbUrl",
47
- },
48
- }),
49
- },
50
-
51
- /**
52
- * @typedef {Object} AddressProviderProps `ExAddress` 配置
53
- * @property {string} addressUrl 选项请求地址
54
- * @property {string} displayTextType 显示值的类型。"all": 所有, last:最后选中的值
55
- * @property {Function} [afterFetched] 处理接口返回数据的函数
56
- * @property {AddressOptionKeys} optionKeys 地址选项键名
57
- *
58
- * @typedef {Object} AddressOptionKeys 地址选项键名
59
- * @property {string} optionKeys.value 选项对应的值
60
- * @property {string} optionKeys.text 选项文字
61
- * @property {string} optionKeys.children 子选项列表
62
- */
63
- address: {
64
- type: Object,
65
- default: () => ({
66
- addressUrl: "",
67
- displayTextType: "",
68
- afterFetched: null,
69
- optionKeys: {
70
- value: "code",
71
- text: "name",
72
- children: "children",
73
- },
74
- }),
75
- },
76
-
77
- /**
78
- * @typedef {Object} FormProviderProps `ExForm` 配置
79
- * @property {Object} [format] 格式化配置, 如 {date: true} 表示在提交表单时使用 `useFormFormat` 格式所有日期字段
80
- * @property {Function} [afterFetched] 处理接口返回数据的函数
81
- */
82
- form: {
83
- type: Object,
84
- default: () => ({
85
- format: {},
86
- afterFetched: null,
87
- }),
88
- },
89
-
90
- /**
91
- * @typedef {Object} SearchProviderProps `ExSearch` 配置
92
- * @property {Object} [maskClass] 定制伪 Input 样式
93
- * @property {Object} [inputClass] 弹层中 Input 的样式
94
- */
95
- search: {
96
- type: Object,
97
- default: () => ({
98
- maskClass: "",
99
- inputClass: "",
100
- }),
101
- },
102
-
103
- /**
104
- * @typedef {Object} PaginationRes
105
- * @property {Array} items 数据
106
- * @property {number} currentPage 当前页码
107
- * @property {number} totalSize 总条数
108
- * @property {String} [errorMessage] 错误信息
109
- */
110
-
111
- /**
112
- * @typedef {Object} PaginationProviderProps `ExPagination` 配置
113
- * @property {function():PaginationRes} [afterFetched] 处理接口返回数据的函数
114
- * @property {PaginationRequestKeys} [requestKeys] 请求参数键名
115
- * /
116
-
117
- /**
118
- * @typedef {Object} PaginationRequestKeys 请求参数键名
119
- * @property {string} [currentPage] 当前页码
120
- * @property {string} [pageSize] 每页条数
121
- */
122
- pagination: {
123
- type: Object,
124
- default: () => ({
125
- afterFetched: null,
126
- requestKeys: {
127
- currentPage: "currentPage",
128
- pageSize: "pageSize",
129
- },
130
- }),
131
- },
132
- },
133
- setup(props, { slots }) {
134
- provide(EX_UPLOADER, {
135
- uploadUrl: props.uploader?.uploadUrl || "",
136
- defaultFileItem: {
137
- id: "id",
138
- name: "name",
139
- url: "url",
140
- path: "path",
141
- thumbUrl: "thumbUrl",
142
- ...props.uploader?.defaultFileItem,
143
- },
144
- })
145
- provide(EX_ADDRESS, {
146
- addressUrl: props.address?.addressUrl || "",
147
- displayTextType: props.address?.displayTextType || "",
148
- afterFetched: props.address?.afterFetched,
149
- optionKeys: {
150
- value: "code",
151
- text: "name",
152
- children: "children",
153
- ...props.address?.optionKeys,
154
- },
155
- })
156
- provide(EX_FORM, { format: {}, ...props.form })
157
- provide(EX_SEARCH, {
158
- maskClass: "",
159
- inputClass: "",
160
- ...props.search,
161
- })
162
- provide(EX_PAGINATION, {
163
- afterFetched: props.pagination?.afterFetched,
164
- requestKeys: {
165
- currentPage: "currentPage",
166
- pageSize: "pageSize",
167
- ...props.pagination?.requestKeys,
168
- },
169
- })
170
-
171
- return () => <div>{slots.default?.()}</div>
172
- },
173
- })
1
+ import { defineComponent, provide } from "vue"
2
+
3
+ export const EX_UPLOADER = Symbol("EX_UPLOADER")
4
+ export const EX_ADDRESS = Symbol("EX_ADDRESS")
5
+ export const EX_FORM = Symbol("EX_FORM")
6
+ export const EX_SEARCH = Symbol("EX_SEARCH")
7
+ export const EX_PAGINATION = Symbol("EX_PAGINATION")
8
+
9
+ /**
10
+ * Explore 配置组件
11
+ * @version 1.0.0
12
+ */
13
+ export default defineComponent({
14
+ name: "ExProvider",
15
+ /**
16
+ * @typedef {Object} ProviderProps
17
+ * @property {UploaderProviderProps} [uploader] `ExUploader` 配置
18
+ * @property {AddressProviderProps} [address] `ExAddress` 配置
19
+ * @property {FormProviderProps} [form] `ExForm` 配置
20
+ * @property {SearchProviderProps} [search] `ExSearch` 配置
21
+ * @property {PaginationProviderProps} [pagination] `ExPagination` 配置
22
+ *
23
+ */
24
+ props: {
25
+ /**
26
+ * @typedef {Object} UploaderProviderProps `ExUploader` 配置
27
+ * @property {string} uploadUrl 上传地址
28
+ * @property {UploadFileItem} defaultFileItem 默认文件项
29
+ *
30
+ * @typedef {Object} UploadFileItem 文件项
31
+ * @property {string} [id] 文件 ID
32
+ * @property {string} [name] 文件名
33
+ * @property {string} defaultFileItem.url 文件地址
34
+ * @property {string} defaultFileItem.path 文件路径
35
+ * @property {string} [thumbUrl] 缩略图地址
36
+ */
37
+ uploader: {
38
+ type: Object,
39
+ default: () => ({
40
+ uploadUrl: "",
41
+ defaultFileItem: {
42
+ id: "id",
43
+ name: "name",
44
+ url: "url",
45
+ path: "path",
46
+ thumbUrl: "thumbUrl",
47
+ },
48
+ }),
49
+ },
50
+
51
+ /**
52
+ * @typedef {Object} AddressProviderProps `ExAddress` 配置
53
+ * @property {string} addressUrl 选项请求地址
54
+ * @property {string} displayTextType 显示值的类型。"all": 所有, last:最后选中的值
55
+ * @property {Function} [afterFetched] 处理接口返回数据的函数
56
+ * @property {AddressOptionKeys} optionKeys 地址选项键名
57
+ *
58
+ * @typedef {Object} AddressOptionKeys 地址选项键名
59
+ * @property {string} optionKeys.value 选项对应的值
60
+ * @property {string} optionKeys.text 选项文字
61
+ * @property {string} optionKeys.children 子选项列表
62
+ */
63
+ address: {
64
+ type: Object,
65
+ default: () => ({
66
+ addressUrl: "",
67
+ displayTextType: "",
68
+ afterFetched: null,
69
+ optionKeys: {
70
+ value: "code",
71
+ text: "name",
72
+ children: "children",
73
+ },
74
+ }),
75
+ },
76
+
77
+ /**
78
+ * @typedef {Object} FormProviderProps `ExForm` 配置
79
+ * @property {Object} [format] 格式化配置, 如 {date: true} 表示在提交表单时使用 `useFormFormat` 格式所有日期字段
80
+ * @property {Function} [afterFetched] 处理接口返回数据的函数
81
+ */
82
+ form: {
83
+ type: Object,
84
+ default: () => ({
85
+ format: {},
86
+ afterFetched: null,
87
+ }),
88
+ },
89
+
90
+ /**
91
+ * @typedef {Object} SearchProviderProps `ExSearch` 配置
92
+ * @property {Object} [maskClass] 定制伪 Input 样式
93
+ * @property {Object} [inputClass] 弹层中 Input 的样式
94
+ */
95
+ search: {
96
+ type: Object,
97
+ default: () => ({
98
+ maskClass: "",
99
+ inputClass: "",
100
+ }),
101
+ },
102
+
103
+ /**
104
+ * @typedef {Object} PaginationRes
105
+ * @property {Array} items 数据
106
+ * @property {number} currentPage 当前页码
107
+ * @property {number} totalSize 总条数
108
+ * @property {String} [errorMessage] 错误信息
109
+ */
110
+
111
+ /**
112
+ * @typedef {Object} PaginationProviderProps `ExPagination` 配置
113
+ * @property {function():PaginationRes} [afterFetched] 处理接口返回数据的函数
114
+ * @property {PaginationRequestKeys} [requestKeys] 请求参数键名
115
+ * /
116
+
117
+ /**
118
+ * @typedef {Object} PaginationRequestKeys 请求参数键名
119
+ * @property {string} [currentPage] 当前页码
120
+ * @property {string} [pageSize] 每页条数
121
+ */
122
+ pagination: {
123
+ type: Object,
124
+ default: () => ({
125
+ afterFetched: null,
126
+ requestKeys: {
127
+ currentPage: "currentPage",
128
+ pageSize: "pageSize",
129
+ },
130
+ }),
131
+ },
132
+ },
133
+ setup(props, { slots }) {
134
+ provide(EX_UPLOADER, {
135
+ uploadUrl: props.uploader?.uploadUrl || "",
136
+ defaultFileItem: {
137
+ id: "id",
138
+ name: "name",
139
+ url: "url",
140
+ path: "path",
141
+ thumbUrl: "thumbUrl",
142
+ ...props.uploader?.defaultFileItem,
143
+ },
144
+ })
145
+ provide(EX_ADDRESS, {
146
+ addressUrl: props.address?.addressUrl || "",
147
+ displayTextType: props.address?.displayTextType || "",
148
+ afterFetched: props.address?.afterFetched,
149
+ optionKeys: {
150
+ value: "code",
151
+ text: "name",
152
+ children: "children",
153
+ ...props.address?.optionKeys,
154
+ },
155
+ })
156
+ provide(EX_FORM, { format: {}, ...props.form })
157
+ provide(EX_SEARCH, {
158
+ maskClass: "",
159
+ inputClass: "",
160
+ ...props.search,
161
+ })
162
+ provide(EX_PAGINATION, {
163
+ afterFetched: props.pagination?.afterFetched,
164
+ requestKeys: {
165
+ currentPage: "currentPage",
166
+ pageSize: "pageSize",
167
+ ...props.pagination?.requestKeys,
168
+ },
169
+ })
170
+
171
+ return () => <div>{slots.default?.()}</div>
172
+ },
173
+ })
@@ -1,86 +1,86 @@
1
- import { defineComponent, onBeforeUpdate, onMounted, ref, watch } from "vue"
2
- import QRCode from "qrcode"
3
- import "./index.less"
4
-
5
- /**
6
- * ExQrcode 二维码
7
- * @version 1.0.0
8
- */
9
- export default defineComponent({
10
- name: "ExQrcode",
11
- props: {
12
- /**
13
- * 是否居中显示
14
- */
15
- center: { type: Boolean, default: false },
16
-
17
- /**
18
- * 二维码内容
19
- */
20
- text: { type: [String, Number], default: "" },
21
-
22
- /**
23
- * 二维码尺寸
24
- */
25
- size: { type: Number, default: 120 },
26
-
27
- /**
28
- * 边距
29
- */
30
- margin: { type: Number, default: 0 },
31
-
32
- /**
33
- * 前景色
34
- */
35
- colorDark: { type: String, default: "#000000" },
36
-
37
- /**
38
- * 背景色
39
- */
40
- colorLight: { type: String, default: "#FFFFFF" },
41
-
42
- /**
43
- * 纠错级别
44
- * @values L, M, Q, H
45
- */
46
- correctLevel: { type: String, default: "H" },
47
- },
48
-
49
- setup(props) {
50
- const containerRef = ref()
51
-
52
- const create = () => {
53
- QRCode.toDataURL(containerRef.value, String(props.text), {
54
- errorCorrectionLevel: props.correctLevel,
55
- color: {
56
- dark: props.colorDark,
57
- light: props.colorLight,
58
- },
59
- width: props.size,
60
- margin: props.margin,
61
- })
62
- }
63
-
64
- watch(
65
- () => props,
66
- () => {
67
- create()
68
- },
69
- { deep: true },
70
- )
71
-
72
- onBeforeUpdate(() => {
73
- containerRef.value = null
74
- })
75
-
76
- onMounted(() => {
77
- create()
78
- })
79
-
80
- return () => (
81
- <div class={`ex-qrcode ${props.center ? "ex-qrcode__center" : ""}`}>
82
- <canvas ref={containerRef}></canvas>
83
- </div>
84
- )
85
- },
86
- })
1
+ import { defineComponent, onBeforeUpdate, onMounted, ref, watch } from "vue"
2
+ import QRCode from "qrcode"
3
+ import "./index.less"
4
+
5
+ /**
6
+ * ExQrcode 二维码
7
+ * @version 1.0.0
8
+ */
9
+ export default defineComponent({
10
+ name: "ExQrcode",
11
+ props: {
12
+ /**
13
+ * 是否居中显示
14
+ */
15
+ center: { type: Boolean, default: false },
16
+
17
+ /**
18
+ * 二维码内容
19
+ */
20
+ text: { type: [String, Number], default: "" },
21
+
22
+ /**
23
+ * 二维码尺寸
24
+ */
25
+ size: { type: Number, default: 120 },
26
+
27
+ /**
28
+ * 边距
29
+ */
30
+ margin: { type: Number, default: 0 },
31
+
32
+ /**
33
+ * 前景色
34
+ */
35
+ colorDark: { type: String, default: "#000000" },
36
+
37
+ /**
38
+ * 背景色
39
+ */
40
+ colorLight: { type: String, default: "#FFFFFF" },
41
+
42
+ /**
43
+ * 纠错级别
44
+ * @values L, M, Q, H
45
+ */
46
+ correctLevel: { type: String, default: "H" },
47
+ },
48
+
49
+ setup(props) {
50
+ const containerRef = ref()
51
+
52
+ const create = () => {
53
+ QRCode.toDataURL(containerRef.value, String(props.text), {
54
+ errorCorrectionLevel: props.correctLevel,
55
+ color: {
56
+ dark: props.colorDark,
57
+ light: props.colorLight,
58
+ },
59
+ width: props.size,
60
+ margin: props.margin,
61
+ })
62
+ }
63
+
64
+ watch(
65
+ () => props,
66
+ () => {
67
+ create()
68
+ },
69
+ { deep: true },
70
+ )
71
+
72
+ onBeforeUpdate(() => {
73
+ containerRef.value = null
74
+ })
75
+
76
+ onMounted(() => {
77
+ create()
78
+ })
79
+
80
+ return () => (
81
+ <div class={`ex-qrcode ${props.center ? "ex-qrcode__center" : ""}`}>
82
+ <canvas ref={containerRef}></canvas>
83
+ </div>
84
+ )
85
+ },
86
+ })
@@ -1,5 +1,5 @@
1
- import _ExQrcode from "./ExQrcode.jsx"
2
- import withInstall from "../../utils/withInstall"
3
-
4
- export const ExQrcode = withInstall(_ExQrcode)
5
- export default ExQrcode
1
+ import _ExQrcode from "./ExQrcode.jsx"
2
+ import withInstall from "../../utils/withInstall"
3
+
4
+ export const ExQrcode = withInstall(_ExQrcode)
5
+ export default ExQrcode
@@ -1,8 +1,8 @@
1
- .ex-qrcode {
2
- display: flex;
3
-
4
- &.ex-qrcode__center {
5
- justify-content: center;
6
- align-items: center;
7
- }
8
- }
1
+ .ex-qrcode {
2
+ display: flex;
3
+
4
+ &.ex-qrcode__center {
5
+ justify-content: center;
6
+ align-items: center;
7
+ }
8
+ }