@netang/quasar 0.2.30 → 0.2.32

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 (289) hide show
  1. package/.editorconfig +12 -12
  2. package/_docs/docs/components/field-table.md +58 -58
  3. package/_docs/docs/components/field-tree.md +21 -21
  4. package/_docs/docs/components/table.md +24 -24
  5. package/_docs/docs/utils/table.md +196 -196
  6. package/components/column-title/index.vue +38 -38
  7. package/components/data/index.vue +20 -20
  8. package/components/dialog/img-viewer/index.vue +697 -697
  9. package/components/dialog/index.vue +387 -387
  10. package/components/dragger/index.vue +203 -203
  11. package/components/drawer/index.vue +303 -303
  12. package/components/editor-code/index.vue +328 -328
  13. package/components/empty/index.vue +82 -82
  14. package/components/field-date/index.vue +860 -860
  15. package/components/field-date/methods.js +100 -100
  16. package/components/field-table/index.vue +1483 -1483
  17. package/components/field-text/index.vue +166 -166
  18. package/components/field-tree/index.vue +755 -755
  19. package/components/img/index.vue +279 -279
  20. package/components/input-number/index.vue +560 -560
  21. package/components/list-menu/index.vue +149 -149
  22. package/components/list-menu-item/index.vue +79 -79
  23. package/components/mixed-table/index.vue +532 -532
  24. package/components/mixed-table-splitter/index.vue +377 -377
  25. package/components/power-page/index.vue +96 -96
  26. package/components/price/index.vue +188 -188
  27. package/components/private/components/index.js +11 -11
  28. package/components/private/components/move-to-tree/index.vue +154 -154
  29. package/components/private/edit-power-data/index.vue +846 -846
  30. package/components/private/table-visible-columns-button/index.vue +114 -114
  31. package/components/render/index.vue +123 -123
  32. package/components/search/index.vue +231 -231
  33. package/components/search-item/index.vue +210 -210
  34. package/components/select/index.vue +177 -177
  35. package/components/splitter/index.vue +422 -422
  36. package/components/table/index.vue +513 -513
  37. package/components/table-column-fixed/index.vue +110 -110
  38. package/components/table-pagination/index.vue +192 -192
  39. package/components/table-summary/index.vue +107 -107
  40. package/components/thumbnail/index.vue +72 -72
  41. package/components/toolbar/index.vue +150 -150
  42. package/components/tree/index.vue +1728 -1728
  43. package/components/tree/virtual-scroll.vue +41 -41
  44. package/components/uploader/index.vue +196 -196
  45. package/components/uploader-query/index.vue +945 -945
  46. package/components/value-format/index.vue +274 -274
  47. package/components/virtual-scroll/index.vue +136 -136
  48. package/configs/area3.js +1 -1
  49. package/docs/404.html +33 -33
  50. package/docs/assets/404.html-60b35caa.js +1 -1
  51. package/docs/assets/404.html-d1e63d77.js +1 -1
  52. package/docs/assets/alert.html-b2a2a72f.js +5 -5
  53. package/docs/assets/alert.html-ba46d137.js +1 -1
  54. package/docs/assets/app-9f30aa4b.js +6 -6
  55. package/docs/assets/area.html-01b9b58d.js +42 -42
  56. package/docs/assets/area.html-9a4fce6a.js +1 -1
  57. package/docs/assets/arr.html-145d27e7.js +1 -1
  58. package/docs/assets/arr.html-674e65ab.js +11 -11
  59. package/docs/assets/auth.html-579fa830.js +1 -1
  60. package/docs/assets/auth.html-8544ed95.js +8 -8
  61. package/docs/assets/bus.html-c71254aa.js +1 -1
  62. package/docs/assets/bus.html-dc7d3d19.js +6 -6
  63. package/docs/assets/column-title.html-c735cb5a.js +3 -3
  64. package/docs/assets/column-title.html-e9316762.js +1 -1
  65. package/docs/assets/confirm.html-ddfdc27f.js +10 -10
  66. package/docs/assets/confirm.html-ef3e2bef.js +1 -1
  67. package/docs/assets/copy.html-d20345b6.js +1 -1
  68. package/docs/assets/copy.html-ef8c8571.js +13 -13
  69. package/docs/assets/data.html-6432175d.js +30 -30
  70. package/docs/assets/data.html-a3b05d5b.js +1 -1
  71. package/docs/assets/dialog.html-1f698e5a.js +1 -1
  72. package/docs/assets/dialog.html-62902b83.js +68 -68
  73. package/docs/assets/dialog.html-baea77c9.js +1 -1
  74. package/docs/assets/dialog.html-bb082fc4.js +1 -1
  75. package/docs/assets/dict.html-1311da3d.js +23 -23
  76. package/docs/assets/dict.html-b96fbf0c.js +1 -1
  77. package/docs/assets/dictOptions.html-7c4f40a5.js +1 -1
  78. package/docs/assets/dictOptions.html-fb99d175.js +5 -5
  79. package/docs/assets/dragger.html-668d3efa.js +1 -1
  80. package/docs/assets/dragger.html-749d585a.js +1 -1
  81. package/docs/assets/editor-code.html-6ab26ea9.js +1 -1
  82. package/docs/assets/editor-code.html-d196205d.js +1 -1
  83. package/docs/assets/empty.html-1c139131.js +1 -1
  84. package/docs/assets/empty.html-1e9c441d.js +1 -1
  85. package/docs/assets/field-date.html-069fdb13.js +1 -1
  86. package/docs/assets/field-date.html-ad204aa9.js +1 -1
  87. package/docs/assets/field-table.html-ce480f03.js +1 -1
  88. package/docs/assets/field-table.html-d9236160.js +1 -1
  89. package/docs/assets/field-text.html-7277c62f.js +1 -1
  90. package/docs/assets/field-text.html-ccb4cecf.js +1 -1
  91. package/docs/assets/field-tree.html-519bfb45.js +1 -1
  92. package/docs/assets/field-tree.html-fdc748d6.js +1 -1
  93. package/docs/assets/form.html-2b562c37.js +2 -2
  94. package/docs/assets/form.html-75104cd5.js +1 -1
  95. package/docs/assets/framework-204010b2.js +5 -5
  96. package/docs/assets/getData.html-990e3787.js +1 -1
  97. package/docs/assets/getData.html-bb72025f.js +34 -34
  98. package/docs/assets/getFile.html-42368004.js +1 -1
  99. package/docs/assets/getFile.html-99abd054.js +3 -3
  100. package/docs/assets/getImage.html-3429c5a1.js +1 -1
  101. package/docs/assets/getImage.html-4d886d83.js +3 -3
  102. package/docs/assets/getTime.html-7435f922.js +1 -1
  103. package/docs/assets/getTime.html-b37f49eb.js +20 -20
  104. package/docs/assets/img.html-7d1da657.js +1 -1
  105. package/docs/assets/img.html-fbea1105.js +1 -1
  106. package/docs/assets/index.html-1695dd7c.js +1 -1
  107. package/docs/assets/index.html-65a4aa67.js +1 -1
  108. package/docs/assets/index.html-7b98d5bd.js +1 -1
  109. package/docs/assets/index.html-c01f2648.js +1 -1
  110. package/docs/assets/input-number.html-0b250d2a.js +1 -1
  111. package/docs/assets/input-number.html-a8eb0378.js +1 -1
  112. package/docs/assets/list-menu-item.html-7f1b4611.js +1 -1
  113. package/docs/assets/list-menu-item.html-84ed5ab8.js +1 -1
  114. package/docs/assets/list-menu.html-28b4163f.js +1 -1
  115. package/docs/assets/list-menu.html-cb6ba95b.js +1 -1
  116. package/docs/assets/loading.html-dae9e39d.js +6 -6
  117. package/docs/assets/loading.html-dc74c9e6.js +1 -1
  118. package/docs/assets/notify.html-e6c4c514.js +1 -1
  119. package/docs/assets/notify.html-f2c4d914.js +8 -8
  120. package/docs/assets/power-page.html-32e02f82.js +1 -1
  121. package/docs/assets/power-page.html-485e77da.js +1 -1
  122. package/docs/assets/power.html-d258cc19.js +93 -93
  123. package/docs/assets/power.html-e490bd32.js +1 -1
  124. package/docs/assets/previewImage.html-6a6b4245.js +1 -1
  125. package/docs/assets/previewImage.html-c5b7e945.js +2 -2
  126. package/docs/assets/price.html-1882c548.js +19 -19
  127. package/docs/assets/price.html-94d3f5be.js +1 -1
  128. package/docs/assets/price.html-d213df0f.js +1 -1
  129. package/docs/assets/price.html-deaf880f.js +1 -1
  130. package/docs/assets/render.html-8efcbdd4.js +1 -1
  131. package/docs/assets/render.html-df228e38.js +1 -1
  132. package/docs/assets/rule.html-2cd57fc2.js +13 -13
  133. package/docs/assets/rule.html-61662001.js +1 -1
  134. package/docs/assets/ruleValid.html-04fe2552.js +1 -1
  135. package/docs/assets/ruleValid.html-e0a776af.js +14 -14
  136. package/docs/assets/search-0782d0d1.svg +1 -1
  137. package/docs/assets/search-item.html-3f75394c.js +1 -1
  138. package/docs/assets/search-item.html-4e942ecd.js +1 -1
  139. package/docs/assets/search.html-2807043e.js +1 -1
  140. package/docs/assets/search.html-c24f8806.js +1 -1
  141. package/docs/assets/select.html-00d0607c.js +1 -1
  142. package/docs/assets/select.html-de7731f5.js +1 -1
  143. package/docs/assets/splitter.html-56f51a70.js +1 -1
  144. package/docs/assets/splitter.html-f5c836d7.js +1 -1
  145. package/docs/assets/style-161e43ab.css +1 -1
  146. package/docs/assets/symbols.html-a6aea4bf.js +1 -1
  147. package/docs/assets/symbols.html-b1f65bad.js +21 -21
  148. package/docs/assets/table-column-fixed.html-3a69e7b2.js +1 -1
  149. package/docs/assets/table-column-fixed.html-e763c38b.js +1 -1
  150. package/docs/assets/table-pagination.html-236934d3.js +1 -1
  151. package/docs/assets/table-pagination.html-c37ee2ac.js +1 -1
  152. package/docs/assets/table-splitter.html-07eab15c.js +1 -1
  153. package/docs/assets/table-splitter.html-7670ee65.js +1 -1
  154. package/docs/assets/table-summary.html-04db434f.js +1 -1
  155. package/docs/assets/table-summary.html-943c65a0.js +1 -1
  156. package/docs/assets/table.html-36253ad7.js +1 -1
  157. package/docs/assets/table.html-7f9c5d1b.js +38 -38
  158. package/docs/assets/table.html-93d53dc8.js +1 -1
  159. package/docs/assets/table.html-ac99b9cb.js +1 -1
  160. package/docs/assets/thumbnail.html-bab1976b.js +1 -1
  161. package/docs/assets/thumbnail.html-eb64e5e8.js +1 -1
  162. package/docs/assets/timestamp.html-4e54f79b.js +13 -13
  163. package/docs/assets/timestamp.html-d0e1b88a.js +1 -1
  164. package/docs/assets/toast.html-58ecbe21.js +1 -1
  165. package/docs/assets/toast.html-c9b9d36b.js +6 -6
  166. package/docs/assets/toolbar.html-83d9f97c.js +1 -1
  167. package/docs/assets/toolbar.html-ff7b8c92.js +1 -1
  168. package/docs/assets/tree.html-d07cbe79.js +23 -23
  169. package/docs/assets/tree.html-ea04193e.js +1 -1
  170. package/docs/assets/uploader-query.html-05590718.js +1 -1
  171. package/docs/assets/uploader-query.html-3175bac5.js +1 -1
  172. package/docs/assets/uploader.html-36da4394.js +2 -2
  173. package/docs/assets/uploader.html-6b5f3079.js +1 -1
  174. package/docs/assets/uploader.html-b9340b57.js +1 -1
  175. package/docs/assets/uploader.html-bc1c22e3.js +1 -1
  176. package/docs/assets/value-format.html-8ae3d47d.js +1 -1
  177. package/docs/assets/value-format.html-afa99b3d.js +1 -1
  178. package/docs/components/column-title.html +35 -35
  179. package/docs/components/data.html +62 -62
  180. package/docs/components/dialog.html +33 -33
  181. package/docs/components/dragger.html +33 -33
  182. package/docs/components/editor-code.html +33 -33
  183. package/docs/components/empty.html +33 -33
  184. package/docs/components/field-date.html +33 -33
  185. package/docs/components/field-table.html +33 -33
  186. package/docs/components/field-text.html +33 -33
  187. package/docs/components/field-tree.html +33 -33
  188. package/docs/components/img.html +33 -33
  189. package/docs/components/input-number.html +33 -33
  190. package/docs/components/list-menu-item.html +33 -33
  191. package/docs/components/list-menu.html +33 -33
  192. package/docs/components/power-page.html +33 -33
  193. package/docs/components/price.html +33 -33
  194. package/docs/components/render.html +33 -33
  195. package/docs/components/search-item.html +33 -33
  196. package/docs/components/search.html +33 -33
  197. package/docs/components/select.html +33 -33
  198. package/docs/components/splitter.html +33 -33
  199. package/docs/components/table-column-fixed.html +33 -33
  200. package/docs/components/table-pagination.html +33 -33
  201. package/docs/components/table-splitter.html +33 -33
  202. package/docs/components/table-summary.html +33 -33
  203. package/docs/components/table.html +33 -33
  204. package/docs/components/thumbnail.html +33 -33
  205. package/docs/components/toolbar.html +33 -33
  206. package/docs/components/uploader-query.html +33 -33
  207. package/docs/components/uploader.html +33 -33
  208. package/docs/components/value-format.html +33 -33
  209. package/docs/css/index.css +3 -3
  210. package/docs/index.html +33 -33
  211. package/docs/utils/alert.html +37 -37
  212. package/docs/utils/area.html +74 -74
  213. package/docs/utils/arr.html +43 -43
  214. package/docs/utils/auth.html +40 -40
  215. package/docs/utils/bus.html +38 -38
  216. package/docs/utils/confirm.html +42 -42
  217. package/docs/utils/copy.html +45 -45
  218. package/docs/utils/dialog.html +100 -100
  219. package/docs/utils/dict.html +55 -55
  220. package/docs/utils/dictOptions.html +37 -37
  221. package/docs/utils/form.html +34 -34
  222. package/docs/utils/getData.html +66 -66
  223. package/docs/utils/getFile.html +35 -35
  224. package/docs/utils/getImage.html +35 -35
  225. package/docs/utils/getTime.html +52 -52
  226. package/docs/utils/index.html +33 -33
  227. package/docs/utils/loading.html +38 -38
  228. package/docs/utils/notify.html +40 -40
  229. package/docs/utils/power.html +125 -125
  230. package/docs/utils/previewImage.html +34 -34
  231. package/docs/utils/price.html +51 -51
  232. package/docs/utils/rule.html +45 -45
  233. package/docs/utils/ruleValid.html +46 -46
  234. package/docs/utils/symbols.html +53 -53
  235. package/docs/utils/table.html +70 -70
  236. package/docs/utils/timestamp.html +45 -45
  237. package/docs/utils/toast.html +38 -38
  238. package/docs/utils/tree.html +55 -55
  239. package/docs/utils/uploader.html +34 -34
  240. package/package.json +25 -25
  241. package/sass/common.scss +184 -184
  242. package/sass/index.scss +12 -12
  243. package/sass/line.scss +39 -39
  244. package/sass/quasar/btn.scss +46 -46
  245. package/sass/quasar/common.scss +3 -3
  246. package/sass/quasar/drawer.scss +6 -6
  247. package/sass/quasar/field.scss +259 -259
  248. package/sass/quasar/loading.scss +6 -6
  249. package/sass/quasar/table.scss +168 -168
  250. package/sass/quasar/toolbar.scss +22 -22
  251. package/sass/variables.scss +140 -140
  252. package/store/index.js +29 -29
  253. package/utils/$auth.js +128 -128
  254. package/utils/$form.js +72 -72
  255. package/utils/$power.js +1494 -1492
  256. package/utils/$render.js +75 -75
  257. package/utils/$rule.js +13 -13
  258. package/utils/$ruleValid.js +10 -10
  259. package/utils/$search.js +416 -416
  260. package/utils/$table.js +1348 -1276
  261. package/utils/$tree.js +682 -682
  262. package/utils/alert.js +12 -12
  263. package/utils/area.js +400 -400
  264. package/utils/arr.js +51 -51
  265. package/utils/bus.js +6 -6
  266. package/utils/config.js +66 -66
  267. package/utils/confirm.js +11 -11
  268. package/utils/copy.js +30 -30
  269. package/utils/dialog.js +36 -36
  270. package/utils/dict.js +21 -21
  271. package/utils/dictOptions.js +28 -28
  272. package/utils/getData.js +88 -88
  273. package/utils/getFile.js +67 -67
  274. package/utils/getImage.js +276 -276
  275. package/utils/getTime.js +113 -113
  276. package/utils/index.js +67 -67
  277. package/utils/loading.js +15 -15
  278. package/utils/notify.js +13 -13
  279. package/utils/play.js +40 -40
  280. package/utils/previewImage.js +14 -14
  281. package/utils/price.js +18 -18
  282. package/utils/symbols.js +18 -18
  283. package/utils/timestamp.js +18 -18
  284. package/utils/toast.js +13 -13
  285. package/utils/uploader.js +2114 -2114
  286. package/utils/useAuth.js +30 -30
  287. package/utils/useFileUrl.js +26 -26
  288. package/utils/useRouter.js +47 -47
  289. package/utils/useSearch.js +562 -562
@@ -1,41 +1,41 @@
1
- <template>
2
- <!-- 如果为自定义虚拟滚动 -->
3
- <virtual-scroll
4
- v-bind="$attrs"
5
- v-slot="props"
6
- v-if="isNVirtualScroll"
7
- >
8
- <slot v-bind="props" />
9
- </virtual-scroll>
10
-
11
- <!-- 否则为 quasar 虚拟滚动 -->
12
- <q-virtual-scroll
13
- v-bind="$attrs"
14
- v-slot="props"
15
- v-else
16
- >
17
- <slot v-bind="props" />
18
- </q-virtual-scroll>
19
- </template>
20
-
21
- <script>
22
- import VirtualScroll from '../virtual-scroll'
23
-
24
- export default {
25
-
26
- /**
27
- * 组件
28
- */
29
- components: {
30
- VirtualScroll,
31
- },
32
-
33
- /**
34
- * 声明属性
35
- */
36
- props: {
37
- // 是否为自定义虚拟滚动
38
- isNVirtualScroll: Boolean,
39
- },
40
- }
41
- </script>
1
+ <template>
2
+ <!-- 如果为自定义虚拟滚动 -->
3
+ <virtual-scroll
4
+ v-bind="$attrs"
5
+ v-slot="props"
6
+ v-if="isNVirtualScroll"
7
+ >
8
+ <slot v-bind="props" />
9
+ </virtual-scroll>
10
+
11
+ <!-- 否则为 quasar 虚拟滚动 -->
12
+ <q-virtual-scroll
13
+ v-bind="$attrs"
14
+ v-slot="props"
15
+ v-else
16
+ >
17
+ <slot v-bind="props" />
18
+ </q-virtual-scroll>
19
+ </template>
20
+
21
+ <script>
22
+ import VirtualScroll from '../virtual-scroll'
23
+
24
+ export default {
25
+
26
+ /**
27
+ * 组件
28
+ */
29
+ components: {
30
+ VirtualScroll,
31
+ },
32
+
33
+ /**
34
+ * 声明属性
35
+ */
36
+ props: {
37
+ // 是否为自定义虚拟滚动
38
+ isNVirtualScroll: Boolean,
39
+ },
40
+ }
41
+ </script>
@@ -1,196 +1,196 @@
1
- <template>
2
- <div class="n-uploader" v-if="pageStatus === true">
3
-
4
- <!-- 隐藏上传文件输入框 -->
5
- <input
6
- ref="fileRef"
7
- class="hidden"
8
- type="file"
9
- capture="camera"
10
- :multiple="count !== 1"
11
- @change="uploader.fileChange"
12
- >
13
-
14
- <!-- 插槽 -->
15
- <slot
16
- :count="count"
17
- :uploader="uploader"
18
- :query="uploadFileLists"
19
- />
20
- </div>
21
- </template>
22
-
23
- <script>
24
- import { onMounted, ref, watch, provide, inject } from 'vue'
25
-
26
- import $n_uploader from '../../utils/uploader'
27
-
28
- import { NPowerKey, NUploaderKey } from '../../utils/symbols'
29
-
30
- export default {
31
-
32
- /**
33
- * 标识
34
- */
35
- name: 'NUploader',
36
-
37
- /**
38
- * 声明属性
39
- */
40
- props: {
41
- // 值
42
- modelValue: [String, Array],
43
- // 上传器类型
44
- uploaderType: String,
45
- // 上传文件类型, 可选值 file image video audio
46
- type: {
47
- type: String,
48
- validator: v => [ 'file', 'image', 'video', 'audio'].includes(v),
49
- default: 'image',
50
- },
51
- // 上传文件数量(0:不限)
52
- count: {
53
- type: Number,
54
- default: 0,
55
- },
56
- // 单个文件的最大大小(单位: MB)
57
- maxSize: Number,
58
- // 单个文件的限制后缀
59
- exts: Array,
60
- // true: 值格式为数组, 如 ['xxxxxx', 'xxxxxx', 'xxxxxx']
61
- // false: 值格式为字符串, 如 xxxxxx,xxxxxx,xxxxxx
62
- valueArray: Boolean,
63
- // 是否去重
64
- unique: Boolean,
65
- // 是否初始加载文件信息(仅图片有效, 其他类型自动会加载文件信息)
66
- loadInfo: Boolean,
67
- // 单文件上传提示(true: 提示上传替换, false: 不提示直接替换)
68
- confirm: Boolean,
69
- // 提交时上传网络外链文件
70
- submitUploadNet: Boolean,
71
- },
72
-
73
- /**
74
- * 声明事件
75
- */
76
- emits: [
77
- 'update:modelValue',
78
- 'update',
79
- ],
80
-
81
- /**
82
- * 组合式
83
- */
84
- setup(props, { emit }) {
85
-
86
- // ==========【数据】============================================================================================
87
-
88
- // 获取权限注入数据
89
- const $power = inject(NPowerKey)
90
-
91
- // 页面状态
92
- const pageStatus = ref(false)
93
-
94
- // 上传文件输入框节点
95
- const fileRef = ref(null)
96
-
97
- // 上传文件列表
98
- const uploadFileLists = ref([])
99
-
100
- // 停止观察值
101
- let stopValueWatcher = false
102
-
103
- // 创建上传器
104
- const uploader = $n_uploader.create({
105
- // 上传器类型
106
- uploaderType: props.uploaderType,
107
- // 上传文件类型, 可选值 file image video audio
108
- type: props.type,
109
- // 声明属性
110
- props,
111
- // 上传文件输入框节点
112
- fileRef,
113
- // 上传文件列表
114
- uploadFileLists,
115
- // 更新值方法
116
- onUpdateModelValue({ value }) {
117
- // 停止观察值
118
- stopValueWatcher = true
119
- // 触发更新已选数据
120
- emit('update:modelValue', value)
121
- },
122
- // 更新方法
123
- onUpdate(res) {
124
- emit('update', res)
125
- },
126
- })
127
-
128
- // 更新布局数据
129
- if ($power) {
130
- $power?.update(function(data) {
131
- data.uploader.push(uploader)
132
- })
133
- }
134
-
135
- // ==========【监听数据】==============================================================================================
136
-
137
- /**
138
- * 监听上传文件列表
139
- */
140
- watch(()=>props.modelValue, function() {
141
-
142
- // 如果停止观察值
143
- if (stopValueWatcher === true) {
144
- // 取消停止观察值
145
- stopValueWatcher = false
146
- return
147
- }
148
-
149
- // 初始化上传列表
150
- uploader.initUploadFileLists()
151
- .finally()
152
- }, {
153
- // 深度监听
154
- deep: true,
155
- })
156
-
157
- // ==========【注入】=============================================================================================
158
-
159
- provide(NUploaderKey, {
160
- // 声明属性
161
- props,
162
- // 上传器
163
- uploader,
164
- // 文件队列
165
- query: uploadFileLists,
166
- })
167
-
168
- // ==========【生命周期】=========================================================================================
169
-
170
- /**
171
- * 实例被挂载后调用
172
- */
173
- onMounted( async function() {
174
-
175
- // 初始化上传列表
176
- await uploader.initUploadFileLists()
177
-
178
- // 页面状态
179
- pageStatus.value = true
180
- })
181
-
182
- // ==========【返回】=============================================================================================
183
-
184
- return {
185
- // 页面状态
186
- pageStatus,
187
- // 上传文件输入框节点
188
- fileRef,
189
- // 上传文件列表
190
- uploadFileLists,
191
- // 上传器
192
- uploader,
193
- }
194
- },
195
- }
196
- </script>
1
+ <template>
2
+ <div class="n-uploader" v-if="pageStatus === true">
3
+
4
+ <!-- 隐藏上传文件输入框 -->
5
+ <input
6
+ ref="fileRef"
7
+ class="hidden"
8
+ type="file"
9
+ capture="camera"
10
+ :multiple="count !== 1"
11
+ @change="uploader.fileChange"
12
+ >
13
+
14
+ <!-- 插槽 -->
15
+ <slot
16
+ :count="count"
17
+ :uploader="uploader"
18
+ :query="uploadFileLists"
19
+ />
20
+ </div>
21
+ </template>
22
+
23
+ <script>
24
+ import { onMounted, ref, watch, provide, inject } from 'vue'
25
+
26
+ import $n_uploader from '../../utils/uploader'
27
+
28
+ import { NPowerKey, NUploaderKey } from '../../utils/symbols'
29
+
30
+ export default {
31
+
32
+ /**
33
+ * 标识
34
+ */
35
+ name: 'NUploader',
36
+
37
+ /**
38
+ * 声明属性
39
+ */
40
+ props: {
41
+ // 值
42
+ modelValue: [String, Array],
43
+ // 上传器类型
44
+ uploaderType: String,
45
+ // 上传文件类型, 可选值 file image video audio
46
+ type: {
47
+ type: String,
48
+ validator: v => [ 'file', 'image', 'video', 'audio'].includes(v),
49
+ default: 'image',
50
+ },
51
+ // 上传文件数量(0:不限)
52
+ count: {
53
+ type: Number,
54
+ default: 0,
55
+ },
56
+ // 单个文件的最大大小(单位: MB)
57
+ maxSize: Number,
58
+ // 单个文件的限制后缀
59
+ exts: Array,
60
+ // true: 值格式为数组, 如 ['xxxxxx', 'xxxxxx', 'xxxxxx']
61
+ // false: 值格式为字符串, 如 xxxxxx,xxxxxx,xxxxxx
62
+ valueArray: Boolean,
63
+ // 是否去重
64
+ unique: Boolean,
65
+ // 是否初始加载文件信息(仅图片有效, 其他类型自动会加载文件信息)
66
+ loadInfo: Boolean,
67
+ // 单文件上传提示(true: 提示上传替换, false: 不提示直接替换)
68
+ confirm: Boolean,
69
+ // 提交时上传网络外链文件
70
+ submitUploadNet: Boolean,
71
+ },
72
+
73
+ /**
74
+ * 声明事件
75
+ */
76
+ emits: [
77
+ 'update:modelValue',
78
+ 'update',
79
+ ],
80
+
81
+ /**
82
+ * 组合式
83
+ */
84
+ setup(props, { emit }) {
85
+
86
+ // ==========【数据】============================================================================================
87
+
88
+ // 获取权限注入数据
89
+ const $power = inject(NPowerKey)
90
+
91
+ // 页面状态
92
+ const pageStatus = ref(false)
93
+
94
+ // 上传文件输入框节点
95
+ const fileRef = ref(null)
96
+
97
+ // 上传文件列表
98
+ const uploadFileLists = ref([])
99
+
100
+ // 停止观察值
101
+ let stopValueWatcher = false
102
+
103
+ // 创建上传器
104
+ const uploader = $n_uploader.create({
105
+ // 上传器类型
106
+ uploaderType: props.uploaderType,
107
+ // 上传文件类型, 可选值 file image video audio
108
+ type: props.type,
109
+ // 声明属性
110
+ props,
111
+ // 上传文件输入框节点
112
+ fileRef,
113
+ // 上传文件列表
114
+ uploadFileLists,
115
+ // 更新值方法
116
+ onUpdateModelValue({ value }) {
117
+ // 停止观察值
118
+ stopValueWatcher = true
119
+ // 触发更新已选数据
120
+ emit('update:modelValue', value)
121
+ },
122
+ // 更新方法
123
+ onUpdate(res) {
124
+ emit('update', res)
125
+ },
126
+ })
127
+
128
+ // 更新布局数据
129
+ if ($power) {
130
+ $power?.update(function(data) {
131
+ data.uploader.push(uploader)
132
+ })
133
+ }
134
+
135
+ // ==========【监听数据】==============================================================================================
136
+
137
+ /**
138
+ * 监听上传文件列表
139
+ */
140
+ watch(()=>props.modelValue, function() {
141
+
142
+ // 如果停止观察值
143
+ if (stopValueWatcher === true) {
144
+ // 取消停止观察值
145
+ stopValueWatcher = false
146
+ return
147
+ }
148
+
149
+ // 初始化上传列表
150
+ uploader.initUploadFileLists()
151
+ .finally()
152
+ }, {
153
+ // 深度监听
154
+ deep: true,
155
+ })
156
+
157
+ // ==========【注入】=============================================================================================
158
+
159
+ provide(NUploaderKey, {
160
+ // 声明属性
161
+ props,
162
+ // 上传器
163
+ uploader,
164
+ // 文件队列
165
+ query: uploadFileLists,
166
+ })
167
+
168
+ // ==========【生命周期】=========================================================================================
169
+
170
+ /**
171
+ * 实例被挂载后调用
172
+ */
173
+ onMounted( async function() {
174
+
175
+ // 初始化上传列表
176
+ await uploader.initUploadFileLists()
177
+
178
+ // 页面状态
179
+ pageStatus.value = true
180
+ })
181
+
182
+ // ==========【返回】=============================================================================================
183
+
184
+ return {
185
+ // 页面状态
186
+ pageStatus,
187
+ // 上传文件输入框节点
188
+ fileRef,
189
+ // 上传文件列表
190
+ uploadFileLists,
191
+ // 上传器
192
+ uploader,
193
+ }
194
+ },
195
+ }
196
+ </script>