uview-pro 0.0.17 → 0.0.19

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 (232) hide show
  1. package/changelog.md +283 -249
  2. package/components/u-action-sheet/types.ts +35 -35
  3. package/components/u-action-sheet/u-action-sheet.vue +160 -160
  4. package/components/u-alert-tips/types.ts +39 -39
  5. package/components/u-alert-tips/u-alert-tips.vue +212 -212
  6. package/components/u-avatar/types.ts +34 -34
  7. package/components/u-avatar/u-avatar.vue +193 -193
  8. package/components/u-avatar-cropper/types.ts +23 -23
  9. package/components/u-avatar-cropper/u-avatar-cropper.vue +286 -286
  10. package/components/u-avatar-cropper/weCropper.d.ts +62 -62
  11. package/components/u-avatar-cropper/weCropper.js +1253 -1253
  12. package/components/u-avatar-cropper/weCropper.ts +1255 -1255
  13. package/components/u-back-top/types.ts +39 -39
  14. package/components/u-back-top/u-back-top.vue +125 -125
  15. package/components/u-badge/types.ts +36 -36
  16. package/components/u-badge/u-badge.vue +165 -165
  17. package/components/u-button/types.ts +66 -66
  18. package/components/u-button/u-button.vue +554 -554
  19. package/components/u-calendar/types.ts +63 -63
  20. package/components/u-calendar/u-calendar.vue +592 -592
  21. package/components/u-car-keyboard/types.ts +12 -12
  22. package/components/u-car-keyboard/u-car-keyboard.vue +234 -234
  23. package/components/u-card/types.ts +59 -59
  24. package/components/u-card/u-card.vue +194 -194
  25. package/components/u-cell-group/types.ts +17 -17
  26. package/components/u-cell-group/u-cell-group.vue +50 -50
  27. package/components/u-cell-item/types.ts +54 -54
  28. package/components/u-cell-item/u-cell-item.vue +202 -202
  29. package/components/u-checkbox/types.ts +31 -31
  30. package/components/u-checkbox/u-checkbox.vue +267 -265
  31. package/components/u-checkbox-group/types.ts +32 -32
  32. package/components/u-checkbox-group/u-checkbox-group.vue +79 -79
  33. package/components/u-circle-progress/types.ts +52 -52
  34. package/components/u-circle-progress/u-circle-progress.vue +189 -189
  35. package/components/u-city-select/types.ts +20 -20
  36. package/components/u-city-select/u-city-select.vue +236 -236
  37. package/components/u-col/types.ts +30 -30
  38. package/components/u-col/u-col.vue +123 -123
  39. package/components/u-collapse/types.ts +31 -31
  40. package/components/u-collapse/u-collapse.vue +68 -68
  41. package/components/u-collapse-item/types.ts +25 -25
  42. package/components/u-collapse-item/u-collapse-item.vue +176 -176
  43. package/components/u-column-notice/types.ts +48 -48
  44. package/components/u-column-notice/u-column-notice.vue +176 -176
  45. package/components/u-count-down/types.ts +42 -42
  46. package/components/u-count-down/u-count-down.vue +258 -258
  47. package/components/u-count-to/types.ts +32 -32
  48. package/components/u-count-to/u-count-to.vue +241 -241
  49. package/components/u-divider/types.ts +31 -31
  50. package/components/u-divider/u-divider.vue +121 -121
  51. package/components/u-dropdown/types.ts +32 -32
  52. package/components/u-dropdown/u-dropdown.vue +289 -289
  53. package/components/u-dropdown-item/types.ts +27 -27
  54. package/components/u-dropdown-item/u-dropdown-item.vue +123 -123
  55. package/components/u-empty/types.ts +36 -36
  56. package/components/u-empty/u-empty.vue +88 -88
  57. package/components/u-field/types.ts +69 -69
  58. package/components/u-field/u-field.vue +354 -354
  59. package/components/u-full-screen/types.ts +14 -14
  60. package/components/u-full-screen/u-full-screen.vue +82 -82
  61. package/components/u-gap/types.ts +18 -18
  62. package/components/u-gap/u-gap.vue +40 -40
  63. package/components/u-grid/types.ts +19 -19
  64. package/components/u-grid/u-grid.vue +93 -93
  65. package/components/u-grid-item/types.ts +16 -16
  66. package/components/u-grid-item/u-grid-item.vue +130 -130
  67. package/components/u-icon/types.ts +62 -62
  68. package/components/u-icon/u-icon.vue +274 -274
  69. package/components/u-image/types.ts +51 -51
  70. package/components/u-image/u-image.vue +222 -222
  71. package/components/u-index-anchor/types.ts +16 -16
  72. package/components/u-index-anchor/u-index-anchor.vue +86 -86
  73. package/components/u-index-list/types.ts +43 -43
  74. package/components/u-index-list/u-index-list.vue +355 -355
  75. package/components/u-input/types.ts +140 -140
  76. package/components/u-input/u-input.vue +255 -255
  77. package/components/u-keyboard/types.ts +40 -40
  78. package/components/u-keyboard/u-keyboard.vue +158 -158
  79. package/components/u-lazy-load/types.ts +37 -37
  80. package/components/u-lazy-load/u-lazy-load.vue +233 -233
  81. package/components/u-line/types.ts +44 -44
  82. package/components/u-line/u-line.vue +59 -59
  83. package/components/u-line-progress/types.ts +58 -58
  84. package/components/u-line-progress/u-line-progress.vue +109 -109
  85. package/components/u-link/types.ts +43 -43
  86. package/components/u-link/u-link.vue +75 -75
  87. package/components/u-loading/types.ts +35 -35
  88. package/components/u-loading/u-loading.vue +90 -90
  89. package/components/u-loading-popup/types.ts +26 -26
  90. package/components/u-loading-popup/u-loading-popup.vue +239 -239
  91. package/components/u-loadmore/types.ts +79 -79
  92. package/components/u-loadmore/u-loadmore.vue +140 -140
  93. package/components/u-mask/types.ts +43 -43
  94. package/components/u-mask/u-mask.vue +106 -106
  95. package/components/u-message-input/types.ts +74 -74
  96. package/components/u-message-input/u-message-input.vue +255 -255
  97. package/components/u-modal/types.ts +118 -118
  98. package/components/u-modal/u-modal.vue +200 -200
  99. package/components/u-navbar/types.ts +103 -103
  100. package/components/u-navbar/u-navbar.vue +226 -226
  101. package/components/u-no-network/image.ts +2 -2
  102. package/components/u-no-network/types.ts +28 -28
  103. package/components/u-no-network/u-no-network.vue +290 -290
  104. package/components/u-notice-bar/types.ts +111 -111
  105. package/components/u-notice-bar/u-notice-bar.vue +174 -174
  106. package/components/u-number-box/types.ts +42 -42
  107. package/components/u-number-box/u-number-box.vue +312 -312
  108. package/components/u-number-keyboard/types.ts +26 -26
  109. package/components/u-number-keyboard/u-number-keyboard.vue +166 -166
  110. package/components/u-picker/types.ts +111 -111
  111. package/components/u-picker/u-picker.vue +637 -637
  112. package/components/u-popup/types.ts +59 -59
  113. package/components/u-popup/u-popup.vue +359 -359
  114. package/components/u-radio/types.ts +25 -25
  115. package/components/u-radio/u-radio.vue +258 -258
  116. package/components/u-radio-group/types.ts +29 -29
  117. package/components/u-radio-group/u-radio-group.vue +98 -98
  118. package/components/u-rate/types.ts +40 -40
  119. package/components/u-rate/u-rate.vue +234 -234
  120. package/components/u-read-more/types.ts +35 -35
  121. package/components/u-read-more/u-read-more.vue +150 -150
  122. package/components/u-row/types.ts +20 -20
  123. package/components/u-row/u-row.vue +87 -87
  124. package/components/u-row-notice/types.ts +39 -39
  125. package/components/u-row-notice/u-row-notice.vue +213 -213
  126. package/components/u-search/types.ts +53 -53
  127. package/components/u-search/u-search.vue +256 -256
  128. package/components/u-section/types.ts +32 -32
  129. package/components/u-section/u-section.vue +125 -125
  130. package/components/u-select/types.ts +43 -43
  131. package/components/u-select/u-select.vue +361 -361
  132. package/components/u-skeleton/types.ts +20 -20
  133. package/components/u-skeleton/u-skeleton.vue +205 -205
  134. package/components/u-slider/types.ts +32 -32
  135. package/components/u-slider/u-slider.vue +238 -238
  136. package/components/u-steps/types.ts +28 -28
  137. package/components/u-steps/u-steps.vue +160 -160
  138. package/components/u-sticky/types.ts +22 -22
  139. package/components/u-sticky/u-sticky.vue +159 -159
  140. package/components/u-subsection/types.ts +36 -36
  141. package/components/u-subsection/u-subsection.vue +328 -328
  142. package/components/u-swipe-action/types.ts +50 -50
  143. package/components/u-swipe-action/u-swipe-action.vue +253 -253
  144. package/components/u-swiper/types.ts +47 -47
  145. package/components/u-swiper/u-swiper.vue +266 -266
  146. package/components/u-switch/types.ts +28 -28
  147. package/components/u-switch/u-switch.vue +128 -128
  148. package/components/u-tabbar/types.ts +36 -36
  149. package/components/u-tabbar/u-tabbar.vue +280 -280
  150. package/components/u-table/types.ts +25 -25
  151. package/components/u-table/u-table.vue +55 -55
  152. package/components/u-tabs/types.ts +51 -51
  153. package/components/u-tabs/u-tabs.vue +284 -284
  154. package/components/u-tabs-swiper/types.ts +53 -53
  155. package/components/u-tabs-swiper/u-tabs-swiper.vue +379 -379
  156. package/components/u-tag/types.ts +37 -37
  157. package/components/u-tag/u-tag.vue +244 -244
  158. package/components/u-td/types.ts +12 -12
  159. package/components/u-td/u-td.vue +69 -69
  160. package/components/u-th/types.ts +12 -12
  161. package/components/u-th/u-th.vue +63 -63
  162. package/components/u-time-line/u-time-line.vue +39 -39
  163. package/components/u-time-line-item/types.ts +14 -14
  164. package/components/u-time-line-item/u-time-line-item.vue +78 -78
  165. package/components/u-toast/types.ts +36 -36
  166. package/components/u-toast/u-toast.vue +233 -233
  167. package/components/u-top-tips/types.ts +14 -14
  168. package/components/u-top-tips/u-top-tips.vue +113 -113
  169. package/components/u-tr/types.ts +8 -8
  170. package/components/u-tr/u-tr.vue +24 -24
  171. package/components/u-upload/types.ts +71 -71
  172. package/components/u-upload/u-upload.vue +545 -545
  173. package/components/u-verification-code/types.ts +22 -22
  174. package/components/u-verification-code/u-verification-code.vue +164 -164
  175. package/components/u-waterfall/types.ts +16 -16
  176. package/components/u-waterfall/u-waterfall.vue +175 -175
  177. package/iconfont.css +910 -910
  178. package/index.scss +22 -22
  179. package/index.ts +195 -202
  180. package/libs/config/config.ts +26 -26
  181. package/libs/config/zIndex.ts +37 -37
  182. package/libs/css/color.scss +155 -155
  183. package/libs/css/common.scss +175 -175
  184. package/libs/css/style.components.scss +6 -6
  185. package/libs/css/style.h5.scss +8 -8
  186. package/libs/css/style.mp.scss +72 -72
  187. package/libs/css/style.nvue.scss +2 -2
  188. package/libs/css/style.vue.scss +175 -175
  189. package/libs/function/$parent.ts +22 -22
  190. package/libs/function/addUnit.ts +13 -13
  191. package/libs/function/color.ts +36 -36
  192. package/libs/function/colorGradient.ts +125 -125
  193. package/libs/function/debounce.ts +28 -28
  194. package/libs/function/deepClone.ts +39 -39
  195. package/libs/function/deepMerge.ts +34 -34
  196. package/libs/function/getParent.ts +58 -58
  197. package/libs/function/getRect.ts +26 -26
  198. package/libs/function/guid.ts +42 -42
  199. package/libs/function/md5.ts +398 -398
  200. package/libs/function/parent.ts +21 -21
  201. package/libs/function/queryParams.ts +60 -60
  202. package/libs/function/random.ts +16 -16
  203. package/libs/function/randomArray.ts +11 -11
  204. package/libs/function/route.ts +118 -118
  205. package/libs/function/sys.ts +15 -15
  206. package/libs/function/test.ts +229 -229
  207. package/libs/function/throttle.ts +31 -31
  208. package/libs/function/timeFormat.ts +54 -54
  209. package/libs/function/timeFrom.ts +48 -48
  210. package/libs/function/toast.ts +14 -14
  211. package/libs/function/trim.ts +21 -21
  212. package/libs/function/type2icon.ts +36 -36
  213. package/libs/hooks/useEmitter.ts +77 -77
  214. package/libs/hooks/useParent.ts +29 -29
  215. package/libs/request/auto-http.ts +76 -76
  216. package/libs/request/index.ts +223 -237
  217. package/libs/store/index.ts +88 -88
  218. package/libs/util/async-validator.d.ts +62 -62
  219. package/libs/util/async-validator.js +1356 -1356
  220. package/libs/util/emitter.ts +112 -112
  221. package/libs/util/mitt.ts +118 -118
  222. package/libs/util/parent.ts +20 -20
  223. package/package.json +107 -107
  224. package/readme.md +231 -231
  225. package/theme.scss +38 -38
  226. package/types/components.d.ts +95 -95
  227. package/types/global.d.ts +221 -221
  228. package/types/ignore-errors.d.ts +30 -30
  229. package/types/index.d.ts +90 -90
  230. package/types/uni-app.d.ts +63 -63
  231. package/libs/request/uni-http.md +0 -156
  232. package/libs/request/uni-http.ts +0 -434
@@ -1,75 +1,75 @@
1
- <template>
2
- <text
3
- class="u-link"
4
- @tap.stop="openLink"
5
- :style="{
6
- color: color,
7
- fontSize: fontSize + 'rpx',
8
- borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
9
- paddingBottom: underLine ? '0rpx' : '0'
10
- }"
11
- >
12
- <slot></slot>
13
- </text>
14
- </template>
15
-
16
- <script setup lang="ts">
17
- import { $u } from '../..';
18
- import { LinkProps } from './types';
19
-
20
- defineOptions({
21
- name: 'u-link'
22
- });
23
-
24
- /**
25
- * link 超链接
26
- * @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
27
- * @tutorial https://uview-pro.netlify.app/components/link.html
28
- * @property {String} color 文字颜色(默认#606266)
29
- * @property {String Number} font-size 字体大小,单位rpx(默认28)
30
- * @property {Boolean} under-line 是否显示下划线(默认false)
31
- * @property {String} href 跳转的链接,要带上http(s)
32
- * @property {String} line-color 下划线颜色,默认同color参数颜色
33
- * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语(默认“链接已复制,请在浏览器打开”)
34
- * @example <u-link href="https://uview-pro.netlify.app">蜀道难,难于上青天</u-link>
35
- */
36
- const props = defineProps(LinkProps);
37
-
38
- /**
39
- * 打开链接方法
40
- * 不同平台有不同表现形式
41
- */
42
- function openLink() {
43
- // #ifdef APP-PLUS
44
- if (typeof plus !== 'undefined' && plus.runtime) {
45
- plus.runtime.openURL(props.href);
46
- }
47
- // #endif
48
- // #ifdef H5
49
- if (typeof window !== 'undefined') {
50
- window.open(props.href);
51
- }
52
- // #endif
53
- // #ifdef MP
54
- if (typeof uni !== 'undefined' && uni.setClipboardData) {
55
- uni.setClipboardData({
56
- data: props.href,
57
- success: () => {
58
- uni.hideToast();
59
- if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
60
- $u.toast(props.mpTips);
61
- }
62
- }
63
- });
64
- }
65
- // #endif
66
- }
67
- </script>
68
-
69
- <style lang="scss" scoped>
70
- @import '../../libs/css/style.components.scss';
71
-
72
- .u-link {
73
- line-height: 1;
74
- }
75
- </style>
1
+ <template>
2
+ <text
3
+ class="u-link"
4
+ @tap.stop="openLink"
5
+ :style="{
6
+ color: color,
7
+ fontSize: fontSize + 'rpx',
8
+ borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
9
+ paddingBottom: underLine ? '0rpx' : '0'
10
+ }"
11
+ >
12
+ <slot></slot>
13
+ </text>
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import { $u } from '../..';
18
+ import { LinkProps } from './types';
19
+
20
+ defineOptions({
21
+ name: 'u-link'
22
+ });
23
+
24
+ /**
25
+ * link 超链接
26
+ * @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
27
+ * @tutorial https://uview-pro.netlify.app/components/link.html
28
+ * @property {String} color 文字颜色(默认#606266)
29
+ * @property {String Number} font-size 字体大小,单位rpx(默认28)
30
+ * @property {Boolean} under-line 是否显示下划线(默认false)
31
+ * @property {String} href 跳转的链接,要带上http(s)
32
+ * @property {String} line-color 下划线颜色,默认同color参数颜色
33
+ * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语(默认“链接已复制,请在浏览器打开”)
34
+ * @example <u-link href="https://uview-pro.netlify.app">蜀道难,难于上青天</u-link>
35
+ */
36
+ const props = defineProps(LinkProps);
37
+
38
+ /**
39
+ * 打开链接方法
40
+ * 不同平台有不同表现形式
41
+ */
42
+ function openLink() {
43
+ // #ifdef APP-PLUS
44
+ if (typeof plus !== 'undefined' && plus.runtime) {
45
+ plus.runtime.openURL(props.href);
46
+ }
47
+ // #endif
48
+ // #ifdef H5
49
+ if (typeof window !== 'undefined') {
50
+ window.open(props.href);
51
+ }
52
+ // #endif
53
+ // #ifdef MP
54
+ if (typeof uni !== 'undefined' && uni.setClipboardData) {
55
+ uni.setClipboardData({
56
+ data: props.href,
57
+ success: () => {
58
+ uni.hideToast();
59
+ if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
60
+ $u.toast(props.mpTips);
61
+ }
62
+ }
63
+ });
64
+ }
65
+ // #endif
66
+ }
67
+ </script>
68
+
69
+ <style lang="scss" scoped>
70
+ @import '../../libs/css/style.components.scss';
71
+
72
+ .u-link {
73
+ line-height: 1;
74
+ }
75
+ </style>
@@ -1,35 +1,35 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
-
3
- type LoadingMode = 'circle' | 'flower';
4
-
5
- /**
6
- * u-loading 组件 props 类型定义
7
- * @description 加载动画,支持多种模式
8
- */
9
- export const LoadingProps = {
10
- /** 动画的类型 */
11
- mode: {
12
- type: String as PropType<LoadingMode>,
13
- default: 'circle'
14
- },
15
- /** 动画的颜色 */
16
- color: {
17
- type: String,
18
- default: '#c7c7c7'
19
- },
20
- /** 加载图标的大小,单位rpx */
21
- size: {
22
- type: [String, Number] as PropType<string | number>,
23
- default: '34'
24
- },
25
- /** 是否显示动画 */
26
- show: {
27
- type: Boolean,
28
- default: true
29
- }
30
- };
31
-
32
- /**
33
- * u-loading 组件 props 类型
34
- */
35
- export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+
3
+ type LoadingMode = 'circle' | 'flower';
4
+
5
+ /**
6
+ * u-loading 组件 props 类型定义
7
+ * @description 加载动画,支持多种模式
8
+ */
9
+ export const LoadingProps = {
10
+ /** 动画的类型 */
11
+ mode: {
12
+ type: String as PropType<LoadingMode>,
13
+ default: 'circle'
14
+ },
15
+ /** 动画的颜色 */
16
+ color: {
17
+ type: String,
18
+ default: '#c7c7c7'
19
+ },
20
+ /** 加载图标的大小,单位rpx */
21
+ size: {
22
+ type: [String, Number] as PropType<string | number>,
23
+ default: '34'
24
+ },
25
+ /** 是否显示动画 */
26
+ show: {
27
+ type: Boolean,
28
+ default: true
29
+ }
30
+ };
31
+
32
+ /**
33
+ * u-loading 组件 props 类型
34
+ */
35
+ export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;
@@ -1,90 +1,90 @@
1
- <template>
2
- <view v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> </view>
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import { computed } from 'vue';
7
- import { LoadingProps } from './types';
8
-
9
- defineOptions({
10
- name: 'u-loading'
11
- });
12
-
13
- /**
14
- * loading 加载动画
15
- * @description 此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
16
- * @tutorial https://uview-pro.netlify.app/components/loading.html
17
- * @property {String} mode 模式选择,见官网说明(默认circle)
18
- * @property {String} color 动画活动区域的颜色,只对 mode = flower 模式有效(默认#c7c7c7)
19
- * @property {String|Number} size 加载图标的大小,单位rpx(默认34)
20
- * @property {Boolean} show 是否显示动画(默认true)
21
- * @example <u-loading mode="circle"></u-loading>
22
- */
23
- const props = defineProps(LoadingProps);
24
-
25
- /**
26
- * 加载中圆圈动画的样式
27
- * @returns {Record<string, any>}
28
- */
29
- const cricleStyle = computed(() => {
30
- let style: Record<string, any> = {};
31
- style.width = props.size + 'rpx';
32
- style.height = props.size + 'rpx';
33
- // 只对圆圈模式生效
34
- if (props.mode === 'circle') {
35
- style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
36
- }
37
- return style;
38
- });
39
- </script>
40
-
41
- <style lang="scss" scoped>
42
- @import '../../libs/css/style.components.scss';
43
-
44
- .u-loading-circle {
45
- /* #ifndef APP-NVUE */
46
- display: inline-flex;
47
- /* #endif */
48
- vertical-align: middle;
49
- width: 28rpx;
50
- height: 28rpx;
51
- background: 0 0;
52
- border-radius: 50%;
53
- border: 2px solid;
54
- border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
55
- animation: u-circle 1s linear infinite;
56
- }
57
-
58
- .u-loading-flower {
59
- width: 20px;
60
- height: 20px;
61
- display: inline-block;
62
- vertical-align: middle;
63
- -webkit-animation: u-flower 1s steps(12) infinite;
64
- animation: u-flower 1s steps(12) infinite;
65
- background: transparent
66
- url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
67
- no-repeat;
68
- background-size: 100%;
69
- }
70
-
71
- @keyframes u-flower {
72
- 0% {
73
- -webkit-transform: rotate(0deg);
74
- transform: rotate(0deg);
75
- }
76
- to {
77
- -webkit-transform: rotate(1turn);
78
- transform: rotate(1turn);
79
- }
80
- }
81
-
82
- @keyframes u-circle {
83
- 0% {
84
- transform: rotate(0);
85
- }
86
- 100% {
87
- transform: rotate(360deg);
88
- }
89
- }
90
- </style>
1
+ <template>
2
+ <view v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> </view>
3
+ </template>
4
+
5
+ <script setup lang="ts">
6
+ import { computed } from 'vue';
7
+ import { LoadingProps } from './types';
8
+
9
+ defineOptions({
10
+ name: 'u-loading'
11
+ });
12
+
13
+ /**
14
+ * loading 加载动画
15
+ * @description 此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
16
+ * @tutorial https://uview-pro.netlify.app/components/loading.html
17
+ * @property {String} mode 模式选择,见官网说明(默认circle)
18
+ * @property {String} color 动画活动区域的颜色,只对 mode = flower 模式有效(默认#c7c7c7)
19
+ * @property {String|Number} size 加载图标的大小,单位rpx(默认34)
20
+ * @property {Boolean} show 是否显示动画(默认true)
21
+ * @example <u-loading mode="circle"></u-loading>
22
+ */
23
+ const props = defineProps(LoadingProps);
24
+
25
+ /**
26
+ * 加载中圆圈动画的样式
27
+ * @returns {Record<string, any>}
28
+ */
29
+ const cricleStyle = computed(() => {
30
+ let style: Record<string, any> = {};
31
+ style.width = props.size + 'rpx';
32
+ style.height = props.size + 'rpx';
33
+ // 只对圆圈模式生效
34
+ if (props.mode === 'circle') {
35
+ style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
36
+ }
37
+ return style;
38
+ });
39
+ </script>
40
+
41
+ <style lang="scss" scoped>
42
+ @import '../../libs/css/style.components.scss';
43
+
44
+ .u-loading-circle {
45
+ /* #ifndef APP-NVUE */
46
+ display: inline-flex;
47
+ /* #endif */
48
+ vertical-align: middle;
49
+ width: 28rpx;
50
+ height: 28rpx;
51
+ background: 0 0;
52
+ border-radius: 50%;
53
+ border: 2px solid;
54
+ border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
55
+ animation: u-circle 1s linear infinite;
56
+ }
57
+
58
+ .u-loading-flower {
59
+ width: 20px;
60
+ height: 20px;
61
+ display: inline-block;
62
+ vertical-align: middle;
63
+ -webkit-animation: u-flower 1s steps(12) infinite;
64
+ animation: u-flower 1s steps(12) infinite;
65
+ background: transparent
66
+ url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
67
+ no-repeat;
68
+ background-size: 100%;
69
+ }
70
+
71
+ @keyframes u-flower {
72
+ 0% {
73
+ -webkit-transform: rotate(0deg);
74
+ transform: rotate(0deg);
75
+ }
76
+ to {
77
+ -webkit-transform: rotate(1turn);
78
+ transform: rotate(1turn);
79
+ }
80
+ }
81
+
82
+ @keyframes u-circle {
83
+ 0% {
84
+ transform: rotate(0);
85
+ }
86
+ 100% {
87
+ transform: rotate(360deg);
88
+ }
89
+ }
90
+ </style>
@@ -1,26 +1,26 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
- type LoadingMode = 'circle' | 'flower';
3
-
4
- /**
5
- * u-loading-popup 组件 props 类型定义
6
- */
7
- export const LoadingPopupProps = {
8
- /** 是否显示加载弹窗 */
9
- modelValue: { type: Boolean, default: false },
10
- /** 加载提示文本 */
11
- text: { type: String, default: '' },
12
- /** 方向,可选 'vertical' | 'horizontal' */
13
- direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
14
- /** 自动关闭的持续时间(ms),0为不自动关闭 */
15
- duration: { type: Number, default: 0 },
16
- /** 允许点击遮罩关闭的最短时间(ms) */
17
- cancelTime: { type: Number, default: 10000 },
18
- /** 动画的类型 */
19
- mode: { type: String as PropType<LoadingMode>, default: 'circle' },
20
- /** 动画的颜色 */
21
- color: { type: String, default: '#c7c7c7' },
22
- /** 加载图标的大小,单位rpx */
23
- size: { type: [String, Number] as PropType<string | number>, default: '48' }
24
- };
25
-
26
- export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+ type LoadingMode = 'circle' | 'flower';
3
+
4
+ /**
5
+ * u-loading-popup 组件 props 类型定义
6
+ */
7
+ export const LoadingPopupProps = {
8
+ /** 是否显示加载弹窗 */
9
+ modelValue: { type: Boolean, default: false },
10
+ /** 加载提示文本 */
11
+ text: { type: String, default: '' },
12
+ /** 方向,可选 'vertical' | 'horizontal' */
13
+ direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
14
+ /** 自动关闭的持续时间(ms),0为不自动关闭 */
15
+ duration: { type: Number, default: 0 },
16
+ /** 允许点击遮罩关闭的最短时间(ms) */
17
+ cancelTime: { type: Number, default: 10000 },
18
+ /** 动画的类型 */
19
+ mode: { type: String as PropType<LoadingMode>, default: 'circle' },
20
+ /** 动画的颜色 */
21
+ color: { type: String, default: '#c7c7c7' },
22
+ /** 加载图标的大小,单位rpx */
23
+ size: { type: [String, Number] as PropType<string | number>, default: '48' }
24
+ };
25
+
26
+ export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;