uview-pro 0.0.13 → 0.0.15

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 (234) hide show
  1. package/changelog.md +236 -217
  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 +265 -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-form/types.ts +6 -4
  60. package/components/u-form/u-form.vue +19 -5
  61. package/components/u-form-item/types.ts +2 -2
  62. package/components/u-form-item/u-form-item.vue +7 -6
  63. package/components/u-full-screen/types.ts +14 -14
  64. package/components/u-full-screen/u-full-screen.vue +82 -82
  65. package/components/u-gap/types.ts +18 -18
  66. package/components/u-gap/u-gap.vue +40 -40
  67. package/components/u-grid/types.ts +19 -19
  68. package/components/u-grid/u-grid.vue +93 -93
  69. package/components/u-grid-item/types.ts +16 -16
  70. package/components/u-grid-item/u-grid-item.vue +130 -130
  71. package/components/u-icon/types.ts +62 -62
  72. package/components/u-icon/u-icon.vue +274 -274
  73. package/components/u-image/types.ts +51 -49
  74. package/components/u-image/u-image.vue +222 -218
  75. package/components/u-index-anchor/types.ts +16 -16
  76. package/components/u-index-anchor/u-index-anchor.vue +86 -86
  77. package/components/u-index-list/types.ts +43 -43
  78. package/components/u-index-list/u-index-list.vue +355 -355
  79. package/components/u-input/types.ts +140 -140
  80. package/components/u-input/u-input.vue +255 -255
  81. package/components/u-keyboard/types.ts +40 -40
  82. package/components/u-keyboard/u-keyboard.vue +158 -158
  83. package/components/u-lazy-load/types.ts +37 -37
  84. package/components/u-lazy-load/u-lazy-load.vue +233 -233
  85. package/components/u-line/types.ts +44 -44
  86. package/components/u-line/u-line.vue +59 -59
  87. package/components/u-line-progress/types.ts +58 -58
  88. package/components/u-line-progress/u-line-progress.vue +109 -109
  89. package/components/u-link/types.ts +43 -43
  90. package/components/u-link/u-link.vue +75 -75
  91. package/components/u-loading/types.ts +35 -35
  92. package/components/u-loading/u-loading.vue +90 -90
  93. package/components/u-loadmore/types.ts +79 -79
  94. package/components/u-loadmore/u-loadmore.vue +140 -140
  95. package/components/u-mask/types.ts +43 -43
  96. package/components/u-mask/u-mask.vue +106 -106
  97. package/components/u-message-input/types.ts +74 -74
  98. package/components/u-message-input/u-message-input.vue +255 -255
  99. package/components/u-modal/types.ts +118 -118
  100. package/components/u-modal/u-modal.vue +200 -200
  101. package/components/u-navbar/types.ts +103 -103
  102. package/components/u-navbar/u-navbar.vue +226 -226
  103. package/components/u-no-network/image.ts +2 -2
  104. package/components/u-no-network/types.ts +28 -28
  105. package/components/u-no-network/u-no-network.vue +290 -290
  106. package/components/u-notice-bar/types.ts +111 -111
  107. package/components/u-notice-bar/u-notice-bar.vue +174 -174
  108. package/components/u-number-box/types.ts +42 -42
  109. package/components/u-number-box/u-number-box.vue +312 -312
  110. package/components/u-number-keyboard/types.ts +26 -26
  111. package/components/u-number-keyboard/u-number-keyboard.vue +166 -166
  112. package/components/u-picker/types.ts +111 -111
  113. package/components/u-picker/u-picker.vue +637 -637
  114. package/components/u-popup/types.ts +59 -59
  115. package/components/u-popup/u-popup.vue +359 -359
  116. package/components/u-radio/types.ts +25 -25
  117. package/components/u-radio/u-radio.vue +258 -258
  118. package/components/u-radio-group/types.ts +29 -29
  119. package/components/u-radio-group/u-radio-group.vue +98 -98
  120. package/components/u-rate/types.ts +40 -40
  121. package/components/u-rate/u-rate.vue +234 -234
  122. package/components/u-read-more/types.ts +35 -35
  123. package/components/u-read-more/u-read-more.vue +150 -150
  124. package/components/u-row/types.ts +20 -20
  125. package/components/u-row/u-row.vue +87 -87
  126. package/components/u-row-notice/types.ts +39 -39
  127. package/components/u-row-notice/u-row-notice.vue +213 -213
  128. package/components/u-search/types.ts +53 -53
  129. package/components/u-search/u-search.vue +256 -256
  130. package/components/u-section/types.ts +32 -32
  131. package/components/u-section/u-section.vue +125 -125
  132. package/components/u-select/types.ts +43 -43
  133. package/components/u-select/u-select.vue +361 -345
  134. package/components/u-skeleton/types.ts +20 -20
  135. package/components/u-skeleton/u-skeleton.vue +205 -205
  136. package/components/u-slider/types.ts +32 -32
  137. package/components/u-slider/u-slider.vue +238 -238
  138. package/components/u-steps/types.ts +28 -28
  139. package/components/u-steps/u-steps.vue +160 -160
  140. package/components/u-sticky/types.ts +22 -22
  141. package/components/u-sticky/u-sticky.vue +159 -159
  142. package/components/u-subsection/types.ts +36 -36
  143. package/components/u-subsection/u-subsection.vue +328 -328
  144. package/components/u-swipe-action/types.ts +50 -50
  145. package/components/u-swipe-action/u-swipe-action.vue +253 -252
  146. package/components/u-swiper/types.ts +47 -47
  147. package/components/u-swiper/u-swiper.vue +266 -266
  148. package/components/u-switch/types.ts +28 -28
  149. package/components/u-switch/u-switch.vue +128 -128
  150. package/components/u-tabbar/types.ts +36 -36
  151. package/components/u-tabbar/u-tabbar.vue +280 -280
  152. package/components/u-table/types.ts +25 -25
  153. package/components/u-table/u-table.vue +55 -55
  154. package/components/u-tabs/types.ts +51 -51
  155. package/components/u-tabs/u-tabs.vue +284 -284
  156. package/components/u-tabs-swiper/types.ts +53 -53
  157. package/components/u-tabs-swiper/u-tabs-swiper.vue +379 -379
  158. package/components/u-tag/types.ts +37 -37
  159. package/components/u-tag/u-tag.vue +244 -244
  160. package/components/u-td/types.ts +12 -12
  161. package/components/u-td/u-td.vue +69 -69
  162. package/components/u-th/types.ts +12 -12
  163. package/components/u-th/u-th.vue +63 -63
  164. package/components/u-time-line/u-time-line.vue +39 -39
  165. package/components/u-time-line-item/types.ts +14 -14
  166. package/components/u-time-line-item/u-time-line-item.vue +78 -78
  167. package/components/u-toast/types.ts +36 -36
  168. package/components/u-toast/u-toast.vue +233 -233
  169. package/components/u-top-tips/types.ts +14 -14
  170. package/components/u-top-tips/u-top-tips.vue +113 -113
  171. package/components/u-tr/types.ts +8 -8
  172. package/components/u-tr/u-tr.vue +24 -24
  173. package/components/u-upload/types.ts +71 -71
  174. package/components/u-upload/u-upload.vue +545 -545
  175. package/components/u-verification-code/types.ts +22 -22
  176. package/components/u-verification-code/u-verification-code.vue +164 -164
  177. package/components/u-waterfall/types.ts +16 -16
  178. package/components/u-waterfall/u-waterfall.vue +170 -170
  179. package/iconfont.css +910 -910
  180. package/index.scss +22 -22
  181. package/index.ts +202 -202
  182. package/libs/config/config.ts +26 -26
  183. package/libs/config/zIndex.ts +37 -37
  184. package/libs/css/color.scss +155 -155
  185. package/libs/css/common.scss +175 -175
  186. package/libs/css/style.components.scss +6 -6
  187. package/libs/css/style.h5.scss +8 -8
  188. package/libs/css/style.mp.scss +72 -72
  189. package/libs/css/style.nvue.scss +2 -2
  190. package/libs/css/style.vue.scss +175 -175
  191. package/libs/function/$parent.ts +22 -22
  192. package/libs/function/addUnit.ts +13 -13
  193. package/libs/function/color.ts +36 -36
  194. package/libs/function/colorGradient.ts +125 -125
  195. package/libs/function/debounce.ts +28 -28
  196. package/libs/function/deepClone.ts +39 -39
  197. package/libs/function/deepMerge.ts +34 -34
  198. package/libs/function/getParent.ts +58 -58
  199. package/libs/function/getRect.ts +26 -26
  200. package/libs/function/guid.ts +42 -42
  201. package/libs/function/md5.ts +398 -398
  202. package/libs/function/parent.ts +21 -21
  203. package/libs/function/queryParams.ts +60 -60
  204. package/libs/function/random.ts +16 -16
  205. package/libs/function/randomArray.ts +11 -11
  206. package/libs/function/route.ts +118 -118
  207. package/libs/function/sys.ts +15 -15
  208. package/libs/function/test.ts +229 -229
  209. package/libs/function/throttle.ts +31 -31
  210. package/libs/function/timeFormat.ts +54 -54
  211. package/libs/function/timeFrom.ts +48 -48
  212. package/libs/function/toast.ts +14 -14
  213. package/libs/function/trim.ts +21 -21
  214. package/libs/function/type2icon.ts +36 -36
  215. package/libs/hooks/useEmitter.ts +77 -77
  216. package/libs/hooks/useParent.ts +29 -29
  217. package/libs/request/auto-http.ts +76 -76
  218. package/libs/request/index.ts +237 -237
  219. package/libs/request/uni-http.md +156 -156
  220. package/libs/request/uni-http.ts +434 -434
  221. package/libs/store/index.ts +88 -88
  222. package/libs/util/async-validator.d.ts +62 -62
  223. package/libs/util/async-validator.js +1356 -1356
  224. package/libs/util/emitter.ts +112 -112
  225. package/libs/util/mitt.ts +118 -118
  226. package/libs/util/parent.ts +20 -20
  227. package/package.json +107 -107
  228. package/readme.md +231 -236
  229. package/theme.scss +38 -38
  230. package/types/components.d.ts +94 -94
  231. package/types/global.d.ts +221 -208
  232. package/types/ignore-errors.d.ts +30 -30
  233. package/types/index.d.ts +90 -90
  234. package/types/uni-app.d.ts +63 -63
@@ -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="http://www.uviewui.com">蜀道难,难于上青天</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,79 +1,79 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
- import type { LoadmoreIconType, LoadmoreStatus, LoadmoreText } from '../../types/global';
3
-
4
- /**
5
- * u-loadmore 组件 props 类型定义
6
- * @description 加载更多,支持多种状态和自定义文字
7
- */
8
-
9
- export const LoadmoreProps = {
10
- /** 组件背景色 */
11
- bgColor: {
12
- type: String,
13
- default: 'transparent'
14
- },
15
- /** 是否显示加载中的图标 */
16
- icon: {
17
- type: Boolean,
18
- default: true
19
- },
20
- /** 字体大小 */
21
- fontSize: {
22
- type: String,
23
- default: '28'
24
- },
25
- /** 字体颜色 */
26
- color: {
27
- type: String,
28
- default: '#606266'
29
- },
30
- /** 组件状态,loadmore-加载前,loading-加载中,nomore-没有更多 */
31
- status: {
32
- type: String as PropType<LoadmoreStatus>,
33
- default: 'loadmore'
34
- },
35
- /** 加载中状态的图标,flower-花朵状,circle-圆圈状 */
36
- iconType: {
37
- type: String as PropType<LoadmoreIconType>,
38
- default: 'circle'
39
- },
40
- /** 显示的文字 */
41
- loadText: {
42
- type: Object as PropType<LoadmoreText>,
43
- default: () => ({
44
- loadmore: '加载更多',
45
- loading: '正在加载...',
46
- nomore: '没有更多了'
47
- })
48
- },
49
- /** 在“没有更多”状态下,是否显示粗点 */
50
- isDot: {
51
- type: Boolean,
52
- default: false
53
- },
54
- /** 加载中显示圆圈动画时,动画的颜色 */
55
- iconColor: {
56
- type: String,
57
- default: '#b7b7b7'
58
- },
59
- /** 上边距 */
60
- marginTop: {
61
- type: [String, Number] as PropType<string | number>,
62
- default: 0
63
- },
64
- /** 下边距 */
65
- marginBottom: {
66
- type: [String, Number] as PropType<string | number>,
67
- default: 0
68
- },
69
- /** 高度,单位rpx */
70
- height: {
71
- type: [String, Number] as PropType<string | number>,
72
- default: 'auto'
73
- }
74
- };
75
-
76
- /**
77
- * u-loadmore 组件 props 类型
78
- */
79
- export type LoadmoreProps = ExtractPropTypes<typeof LoadmoreProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+ import type { LoadmoreIconType, LoadmoreStatus, LoadmoreText } from '../../types/global';
3
+
4
+ /**
5
+ * u-loadmore 组件 props 类型定义
6
+ * @description 加载更多,支持多种状态和自定义文字
7
+ */
8
+
9
+ export const LoadmoreProps = {
10
+ /** 组件背景色 */
11
+ bgColor: {
12
+ type: String,
13
+ default: 'transparent'
14
+ },
15
+ /** 是否显示加载中的图标 */
16
+ icon: {
17
+ type: Boolean,
18
+ default: true
19
+ },
20
+ /** 字体大小 */
21
+ fontSize: {
22
+ type: String,
23
+ default: '28'
24
+ },
25
+ /** 字体颜色 */
26
+ color: {
27
+ type: String,
28
+ default: '#606266'
29
+ },
30
+ /** 组件状态,loadmore-加载前,loading-加载中,nomore-没有更多 */
31
+ status: {
32
+ type: String as PropType<LoadmoreStatus>,
33
+ default: 'loadmore'
34
+ },
35
+ /** 加载中状态的图标,flower-花朵状,circle-圆圈状 */
36
+ iconType: {
37
+ type: String as PropType<LoadmoreIconType>,
38
+ default: 'circle'
39
+ },
40
+ /** 显示的文字 */
41
+ loadText: {
42
+ type: Object as PropType<LoadmoreText>,
43
+ default: () => ({
44
+ loadmore: '加载更多',
45
+ loading: '正在加载...',
46
+ nomore: '没有更多了'
47
+ })
48
+ },
49
+ /** 在“没有更多”状态下,是否显示粗点 */
50
+ isDot: {
51
+ type: Boolean,
52
+ default: false
53
+ },
54
+ /** 加载中显示圆圈动画时,动画的颜色 */
55
+ iconColor: {
56
+ type: String,
57
+ default: '#b7b7b7'
58
+ },
59
+ /** 上边距 */
60
+ marginTop: {
61
+ type: [String, Number] as PropType<string | number>,
62
+ default: 0
63
+ },
64
+ /** 下边距 */
65
+ marginBottom: {
66
+ type: [String, Number] as PropType<string | number>,
67
+ default: 0
68
+ },
69
+ /** 高度,单位rpx */
70
+ height: {
71
+ type: [String, Number] as PropType<string | number>,
72
+ default: 'auto'
73
+ }
74
+ };
75
+
76
+ /**
77
+ * u-loadmore 组件 props 类型
78
+ */
79
+ export type LoadmoreProps = ExtractPropTypes<typeof LoadmoreProps>;