uview-pro 0.6.18 → 0.6.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 (278) hide show
  1. package/changelog.md +1778 -1768
  2. package/components/u-action-sheet/types.ts +52 -52
  3. package/components/u-action-sheet/u-action-sheet.vue +196 -196
  4. package/components/u-action-sheet-item/types.ts +35 -35
  5. package/components/u-action-sheet-item/u-action-sheet-item.vue +85 -85
  6. package/components/u-alert-tips/types.ts +49 -49
  7. package/components/u-alert-tips/u-alert-tips.vue +239 -239
  8. package/components/u-avatar/types.ts +44 -44
  9. package/components/u-avatar/u-avatar.vue +218 -218
  10. package/components/u-avatar-cropper/types.ts +23 -23
  11. package/components/u-avatar-cropper/u-avatar-cropper.vue +299 -299
  12. package/components/u-avatar-cropper/weCropper.d.ts +62 -62
  13. package/components/u-avatar-cropper/weCropper.js +1281 -1281
  14. package/components/u-avatar-cropper/weCropper.ts +1276 -1276
  15. package/components/u-back-top/types.ts +44 -44
  16. package/components/u-back-top/u-back-top.vue +141 -141
  17. package/components/u-badge/types.ts +46 -46
  18. package/components/u-badge/u-badge.vue +153 -153
  19. package/components/u-button/types.ts +76 -76
  20. package/components/u-button/u-button.vue +608 -608
  21. package/components/u-calendar/types.ts +126 -126
  22. package/components/u-calendar/u-calendar.vue +1243 -1243
  23. package/components/u-car-keyboard/types.ts +22 -22
  24. package/components/u-car-keyboard/u-car-keyboard.vue +263 -263
  25. package/components/u-card/types.ts +69 -69
  26. package/components/u-card/u-card.vue +210 -210
  27. package/components/u-cell-group/types.ts +27 -27
  28. package/components/u-cell-group/u-cell-group.vue +60 -60
  29. package/components/u-cell-item/types.ts +64 -64
  30. package/components/u-cell-item/u-cell-item.vue +221 -221
  31. package/components/u-checkbox/types.ts +45 -45
  32. package/components/u-checkbox/u-checkbox.vue +363 -363
  33. package/components/u-checkbox-group/types.ts +45 -45
  34. package/components/u-checkbox-group/u-checkbox-group.vue +172 -172
  35. package/components/u-circle-progress/types.ts +63 -63
  36. package/components/u-circle-progress/u-circle-progress.vue +299 -299
  37. package/components/u-city-select/types.ts +30 -30
  38. package/components/u-city-select/u-city-select.vue +281 -281
  39. package/components/u-col/types.ts +40 -40
  40. package/components/u-col/u-col.vue +142 -142
  41. package/components/u-collapse/types.ts +41 -41
  42. package/components/u-collapse/u-collapse.vue +190 -190
  43. package/components/u-collapse-item/types.ts +35 -35
  44. package/components/u-collapse-item/u-collapse-item.vue +291 -291
  45. package/components/u-column-notice/types.ts +58 -58
  46. package/components/u-column-notice/u-column-notice.vue +223 -223
  47. package/components/u-config-provider/types.ts +53 -53
  48. package/components/u-config-provider/u-config-provider.vue +185 -185
  49. package/components/u-count-down/types.ts +52 -52
  50. package/components/u-count-down/u-count-down.vue +288 -288
  51. package/components/u-count-to/types.ts +42 -42
  52. package/components/u-count-to/u-count-to.vue +266 -266
  53. package/components/u-divider/types.ts +41 -41
  54. package/components/u-divider/u-divider.vue +146 -146
  55. package/components/u-dropdown/types.ts +67 -67
  56. package/components/u-dropdown/u-dropdown.vue +436 -436
  57. package/components/u-dropdown-item/types.ts +40 -40
  58. package/components/u-dropdown-item/u-dropdown-item.vue +124 -124
  59. package/components/u-empty/types.ts +46 -46
  60. package/components/u-empty/u-empty.vue +109 -109
  61. package/components/u-fab/types.ts +83 -83
  62. package/components/u-fab/u-fab.vue +330 -330
  63. package/components/u-field/types.ts +81 -81
  64. package/components/u-field/u-field.vue +398 -398
  65. package/components/u-form/types.ts +39 -39
  66. package/components/u-form/u-form.vue +175 -135
  67. package/components/u-form-item/types.ts +95 -95
  68. package/components/u-form-item/u-form-item.vue +563 -563
  69. package/components/u-full-screen/types.ts +26 -26
  70. package/components/u-full-screen/u-full-screen.vue +100 -100
  71. package/components/u-gap/types.ts +28 -28
  72. package/components/u-gap/u-gap.vue +50 -50
  73. package/components/u-grid/types.ts +29 -29
  74. package/components/u-grid/u-grid.vue +91 -91
  75. package/components/u-grid-item/types.ts +24 -24
  76. package/components/u-grid-item/u-grid-item.vue +130 -130
  77. package/components/u-icon/types.ts +69 -69
  78. package/components/u-icon/u-icon.vue +301 -301
  79. package/components/u-image/types.ts +61 -61
  80. package/components/u-image/u-image.vue +245 -245
  81. package/components/u-index-anchor/types.ts +24 -24
  82. package/components/u-index-anchor/u-index-anchor.vue +120 -120
  83. package/components/u-index-list/types.ts +44 -44
  84. package/components/u-index-list/u-index-list.vue +346 -346
  85. package/components/u-input/types.ts +165 -165
  86. package/components/u-input/u-input.vue +453 -453
  87. package/components/u-keyboard/types.ts +40 -40
  88. package/components/u-keyboard/u-keyboard.vue +201 -201
  89. package/components/u-lazy-load/types.ts +37 -37
  90. package/components/u-lazy-load/u-lazy-load.vue +246 -246
  91. package/components/u-line/types.ts +44 -44
  92. package/components/u-line/u-line.vue +68 -68
  93. package/components/u-line-progress/types.ts +58 -58
  94. package/components/u-line-progress/u-line-progress.vue +131 -131
  95. package/components/u-link/types.ts +54 -54
  96. package/components/u-link/u-link.vue +100 -100
  97. package/components/u-loading/types.ts +45 -45
  98. package/components/u-loading/u-loading.vue +106 -106
  99. package/components/u-loading-popup/types.ts +26 -26
  100. package/components/u-loading-popup/u-loading-popup.vue +254 -254
  101. package/components/u-loadmore/types.ts +88 -88
  102. package/components/u-loadmore/u-loadmore.vue +170 -170
  103. package/components/u-mask/types.ts +48 -48
  104. package/components/u-mask/u-mask.vue +113 -113
  105. package/components/u-message-input/types.ts +90 -90
  106. package/components/u-message-input/u-message-input.vue +283 -283
  107. package/components/u-modal/service.ts +48 -48
  108. package/components/u-modal/types.ts +139 -139
  109. package/components/u-modal/u-modal.vue +465 -465
  110. package/components/u-navbar/types.ts +104 -104
  111. package/components/u-navbar/u-navbar.vue +268 -268
  112. package/components/u-no-network/image.ts +2 -2
  113. package/components/u-no-network/types.ts +29 -29
  114. package/components/u-no-network/u-no-network.vue +313 -313
  115. package/components/u-notice-bar/types.ts +111 -111
  116. package/components/u-notice-bar/u-notice-bar.vue +191 -191
  117. package/components/u-number-box/types.ts +42 -42
  118. package/components/u-number-box/u-number-box.vue +322 -322
  119. package/components/u-number-keyboard/types.ts +26 -26
  120. package/components/u-number-keyboard/u-number-keyboard.vue +189 -189
  121. package/components/u-pagination/types.ts +38 -38
  122. package/components/u-pagination/u-pagination.vue +102 -102
  123. package/components/u-picker/types.ts +140 -140
  124. package/components/u-picker/u-picker.vue +854 -854
  125. package/components/u-popup/types.ts +64 -64
  126. package/components/u-popup/u-popup.vue +427 -427
  127. package/components/u-radio/types.ts +39 -39
  128. package/components/u-radio/u-radio.vue +349 -349
  129. package/components/u-radio-group/types.ts +40 -40
  130. package/components/u-radio-group/u-radio-group.vue +96 -96
  131. package/components/u-rate/types.ts +50 -50
  132. package/components/u-rate/u-rate.vue +250 -250
  133. package/components/u-read-more/types.ts +46 -46
  134. package/components/u-read-more/u-read-more.vue +182 -182
  135. package/components/u-root-portal/u-root-portal.vue +55 -55
  136. package/components/u-row/types.ts +30 -30
  137. package/components/u-row/u-row.vue +105 -105
  138. package/components/u-row-notice/types.ts +49 -49
  139. package/components/u-row-notice/u-row-notice.vue +257 -257
  140. package/components/u-safe-bottom/types.ts +19 -19
  141. package/components/u-safe-bottom/u-safe-bottom.vue +55 -55
  142. package/components/u-search/u-search.vue +297 -297
  143. package/components/u-section/types.ts +42 -42
  144. package/components/u-section/u-section.vue +156 -156
  145. package/components/u-select/types.ts +56 -56
  146. package/components/u-select/u-select.vue +447 -447
  147. package/components/u-skeleton/types.ts +89 -89
  148. package/components/u-skeleton/u-skeleton.vue +253 -253
  149. package/components/u-slider/types.ts +55 -55
  150. package/components/u-slider/u-slider.vue +422 -422
  151. package/components/u-status-bar/types.ts +21 -21
  152. package/components/u-status-bar/u-status-bar.vue +64 -64
  153. package/components/u-step/types.ts +37 -37
  154. package/components/u-step/u-step.vue +292 -292
  155. package/components/u-steps/types.ts +39 -39
  156. package/components/u-steps/u-steps.vue +105 -105
  157. package/components/u-sticky/types.ts +33 -33
  158. package/components/u-sticky/u-sticky.vue +177 -177
  159. package/components/u-subsection/types.ts +46 -46
  160. package/components/u-subsection/u-subsection.vue +358 -358
  161. package/components/u-swipe-action/types.ts +60 -60
  162. package/components/u-swipe-action/u-swipe-action.vue +276 -276
  163. package/components/u-swiper/types.ts +57 -57
  164. package/components/u-swiper/u-swiper.vue +308 -308
  165. package/components/u-switch/types.ts +39 -39
  166. package/components/u-switch/u-switch.vue +212 -212
  167. package/components/u-tabbar/types.ts +57 -57
  168. package/components/u-tabbar/u-tabbar.vue +480 -480
  169. package/components/u-table/types.ts +35 -35
  170. package/components/u-table/u-table.vue +67 -67
  171. package/components/u-tabs/types.ts +64 -64
  172. package/components/u-tabs/u-tabs.vue +328 -328
  173. package/components/u-tabs-swiper/types.ts +64 -64
  174. package/components/u-tabs-swiper/u-tabs-swiper.vue +407 -407
  175. package/components/u-tag/types.ts +47 -47
  176. package/components/u-tag/u-tag.vue +276 -276
  177. package/components/u-td/types.ts +22 -22
  178. package/components/u-td/u-td.vue +65 -65
  179. package/components/u-text/types.ts +80 -80
  180. package/components/u-text/u-text.vue +355 -355
  181. package/components/u-textarea/types.ts +105 -105
  182. package/components/u-textarea/u-textarea.vue +450 -450
  183. package/components/u-th/types.ts +22 -22
  184. package/components/u-th/u-th.vue +63 -63
  185. package/components/u-time-line/u-time-line.vue +64 -64
  186. package/components/u-time-line-item/types.ts +24 -24
  187. package/components/u-time-line-item/u-time-line-item.vue +89 -89
  188. package/components/u-toast/service.ts +40 -40
  189. package/components/u-toast/types.ts +54 -54
  190. package/components/u-toast/u-toast.vue +385 -385
  191. package/components/u-top-tips/types.ts +25 -25
  192. package/components/u-top-tips/u-top-tips.vue +130 -130
  193. package/components/u-tr/types.ts +19 -19
  194. package/components/u-tr/u-tr.vue +39 -39
  195. package/components/u-transition/types.ts +43 -43
  196. package/components/u-transition/u-transition.vue +437 -437
  197. package/components/u-upload/types.ts +171 -171
  198. package/components/u-upload/u-upload.vue +1605 -1605
  199. package/components/u-verification-code/types.ts +32 -32
  200. package/components/u-verification-code/u-verification-code.vue +183 -183
  201. package/components/u-waterfall/types.ts +26 -26
  202. package/components/u-waterfall/u-waterfall.vue +188 -188
  203. package/iconfont.css +913 -913
  204. package/index.scss +26 -26
  205. package/libs/config/color.ts +9 -9
  206. package/libs/config/config.ts +59 -59
  207. package/libs/config/theme-tokens.ts +102 -102
  208. package/libs/config/zIndex.ts +32 -32
  209. package/libs/css/color.scss +155 -155
  210. package/libs/css/common.scss +183 -183
  211. package/libs/css/style.components.scss +16 -16
  212. package/libs/css/style.h5.scss +8 -8
  213. package/libs/css/style.mp.scss +68 -68
  214. package/libs/css/style.nvue.scss +15 -15
  215. package/libs/css/style.theme.scss +56 -56
  216. package/libs/css/style.vue.scss +188 -188
  217. package/libs/function/$parent.ts +24 -24
  218. package/libs/function/addUnit.ts +50 -50
  219. package/libs/function/clipboard.ts +73 -73
  220. package/libs/function/color.ts +28 -28
  221. package/libs/function/colorGradient.ts +139 -139
  222. package/libs/function/debounce.ts +28 -28
  223. package/libs/function/deepClone.ts +39 -39
  224. package/libs/function/deepMerge.ts +35 -35
  225. package/libs/function/getParent.ts +63 -63
  226. package/libs/function/getRect.ts +26 -26
  227. package/libs/function/guid.ts +42 -42
  228. package/libs/function/md5.ts +403 -403
  229. package/libs/function/parent.ts +21 -21
  230. package/libs/function/queryParams.ts +64 -64
  231. package/libs/function/random.ts +16 -16
  232. package/libs/function/randomArray.ts +11 -11
  233. package/libs/function/route.ts +118 -118
  234. package/libs/function/styleUtils.ts +83 -83
  235. package/libs/function/sys.ts +15 -15
  236. package/libs/function/test.ts +289 -289
  237. package/libs/function/throttle.ts +31 -31
  238. package/libs/function/timeFormat.ts +55 -55
  239. package/libs/function/timeFrom.ts +48 -48
  240. package/libs/function/toast.ts +14 -14
  241. package/libs/function/trim.ts +21 -21
  242. package/libs/function/type2icon.ts +38 -38
  243. package/libs/hooks/index.ts +10 -10
  244. package/libs/hooks/useColor.ts +61 -61
  245. package/libs/hooks/useCompRelation.ts +424 -424
  246. package/libs/hooks/useDebounce.ts +15 -15
  247. package/libs/hooks/useEmitter.ts +79 -79
  248. package/libs/hooks/useLocale.ts +34 -34
  249. package/libs/hooks/useModal.ts +131 -131
  250. package/libs/hooks/useRect.ts +40 -40
  251. package/libs/hooks/useRouter.ts +173 -173
  252. package/libs/hooks/useTheme.ts +173 -173
  253. package/libs/hooks/useThrottle.ts +16 -16
  254. package/libs/hooks/useToast.ts +115 -115
  255. package/libs/index.ts +349 -349
  256. package/libs/request/auto-http.ts +76 -76
  257. package/libs/request/index.ts +301 -301
  258. package/libs/store/index.ts +88 -88
  259. package/libs/util/async-validator.d.ts +75 -75
  260. package/libs/util/async-validator.js +1 -1
  261. package/libs/util/calendar.d.ts +57 -57
  262. package/libs/util/canvas-2d.ts +182 -182
  263. package/libs/util/config-provider.ts +804 -804
  264. package/libs/util/emitter.ts +112 -112
  265. package/libs/util/mitt.ts +118 -118
  266. package/libs/util/system-theme.ts +25 -25
  267. package/locale/index.ts +2 -2
  268. package/locale/lang/en-US.ts +136 -136
  269. package/locale/lang/zh-CN.ts +136 -136
  270. package/package.json +1 -1
  271. package/plugins/root/page.ts +77 -77
  272. package/plugins/root/root.ts +53 -53
  273. package/theme.scss +149 -149
  274. package/types/components.d.ts +105 -105
  275. package/types/global.d.ts +470 -470
  276. package/types/ignore-errors.d.ts +30 -30
  277. package/types/index.d.ts +15 -15
  278. package/types/uni-app.d.ts +63 -63
@@ -1,58 +1,58 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
- import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
3
-
4
- /**
5
- * u-column-notice 通告栏 Props
6
- */
7
- export const ColumnNoticeProps = {
8
- /** 自定义根节点样式 */
9
- customStyle: {
10
- type: [String, Object] as PropType<string | Record<string, any>>,
11
- default: () => ({})
12
- },
13
- /** 自定义根节点样式类 */
14
- customClass: {
15
- type: String as unknown as PropType<string>,
16
- default: ''
17
- },
18
- /** 显示的内容,数组 */
19
- list: { type: Array as PropType<string[]>, default: () => [] },
20
- /** 显示的主题,success|error|primary|info|warning */
21
- type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
22
- /** 是否显示左侧的音量图标 */
23
- volumeIcon: { type: Boolean, default: true },
24
- /** 是否显示右侧的右箭头图标 */
25
- moreIcon: { type: Boolean, default: false },
26
- /** 是否显示右侧的关闭图标 */
27
- closeIcon: { type: Boolean, default: false },
28
- /** 是否自动播放 */
29
- autoplay: { type: Boolean, default: true },
30
- /** 文字颜色,各图标也会使用文字颜色 */
31
- color: { type: String, default: '' },
32
- /** 背景颜色 */
33
- bgColor: { type: String, default: '' },
34
- /** 滚动方向,row-水平滚动,column-垂直滚动 */
35
- direction: { type: String as PropType<ScrollDirection>, default: 'row' },
36
- /** 是否显示 */
37
- show: { type: Boolean, default: true },
38
- /** 字体大小,单位rpx */
39
- fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
40
- /** 滚动一个周期的时间长,单位ms */
41
- duration: { type: [Number, String] as PropType<number | string>, default: 2000 },
42
- /** 音量喇叭的大小 */
43
- volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
44
- /** 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度 */
45
- speed: { type: Number, default: 160 },
46
- /** 水平滚动时,是否采用衔接形式滚动 */
47
- isCircular: { type: Boolean, default: true },
48
- /** 滚动方向,horizontal-水平滚动,vertical-垂直滚动 */
49
- mode: { type: String as PropType<Direction>, default: 'horizontal' },
50
- /** 播放状态,play-播放,paused-暂停 */
51
- playState: { type: String as PropType<PlayState>, default: 'play' },
52
- /** 是否禁止用手滑动切换 */
53
- disableTouch: { type: Boolean, default: true },
54
- /** 通知的边距 */
55
- padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
56
- };
57
-
58
- export type ColumnNoticeProps = ExtractPropTypes<typeof ColumnNoticeProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+ import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
3
+
4
+ /**
5
+ * u-column-notice 通告栏 Props
6
+ */
7
+ export const ColumnNoticeProps = {
8
+ /** 自定义根节点样式 */
9
+ customStyle: {
10
+ type: [String, Object] as PropType<string | Record<string, any>>,
11
+ default: () => ({})
12
+ },
13
+ /** 自定义根节点样式类 */
14
+ customClass: {
15
+ type: String as unknown as PropType<string>,
16
+ default: ''
17
+ },
18
+ /** 显示的内容,数组 */
19
+ list: { type: Array as PropType<string[]>, default: () => [] },
20
+ /** 显示的主题,success|error|primary|info|warning */
21
+ type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
22
+ /** 是否显示左侧的音量图标 */
23
+ volumeIcon: { type: Boolean, default: true },
24
+ /** 是否显示右侧的右箭头图标 */
25
+ moreIcon: { type: Boolean, default: false },
26
+ /** 是否显示右侧的关闭图标 */
27
+ closeIcon: { type: Boolean, default: false },
28
+ /** 是否自动播放 */
29
+ autoplay: { type: Boolean, default: true },
30
+ /** 文字颜色,各图标也会使用文字颜色 */
31
+ color: { type: String, default: '' },
32
+ /** 背景颜色 */
33
+ bgColor: { type: String, default: '' },
34
+ /** 滚动方向,row-水平滚动,column-垂直滚动 */
35
+ direction: { type: String as PropType<ScrollDirection>, default: 'row' },
36
+ /** 是否显示 */
37
+ show: { type: Boolean, default: true },
38
+ /** 字体大小,单位rpx */
39
+ fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
40
+ /** 滚动一个周期的时间长,单位ms */
41
+ duration: { type: [Number, String] as PropType<number | string>, default: 2000 },
42
+ /** 音量喇叭的大小 */
43
+ volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
44
+ /** 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度 */
45
+ speed: { type: Number, default: 160 },
46
+ /** 水平滚动时,是否采用衔接形式滚动 */
47
+ isCircular: { type: Boolean, default: true },
48
+ /** 滚动方向,horizontal-水平滚动,vertical-垂直滚动 */
49
+ mode: { type: String as PropType<Direction>, default: 'horizontal' },
50
+ /** 播放状态,play-播放,paused-暂停 */
51
+ playState: { type: String as PropType<PlayState>, default: 'play' },
52
+ /** 是否禁止用手滑动切换 */
53
+ disableTouch: { type: Boolean, default: true },
54
+ /** 通知的边距 */
55
+ padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
56
+ };
57
+
58
+ export type ColumnNoticeProps = ExtractPropTypes<typeof ColumnNoticeProps>;
@@ -1,223 +1,223 @@
1
- <template>
2
- <view
3
- class="u-notice-bar"
4
- :style="$u.toStyle({ background: computeBgColor, padding: props.padding }, customStyle)"
5
- :class="[props.type ? `u-type-${props.type}-light-bg` : '', customClass]"
6
- >
7
- <view class="u-icon-wrap">
8
- <u-icon
9
- class="u-left-icon"
10
- v-if="props.volumeIcon"
11
- name="volume-fill"
12
- :size="props.volumeSize"
13
- :color="computeColor"
14
- ></u-icon>
15
- </view>
16
- <swiper
17
- :disable-touch="props.disableTouch"
18
- @change="change"
19
- :autoplay="props.autoplay && props.playState === 'play'"
20
- :vertical="vertical"
21
- circular
22
- :interval="props.duration"
23
- class="u-swiper"
24
- >
25
- <swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
26
- <view
27
- class="u-news-item u-line-1"
28
- :style="textStyle"
29
- @tap="click(index)"
30
- :class="['u-type-' + props.type]"
31
- >
32
- {{ item }}
33
- </view>
34
- </swiper-item>
35
- </swiper>
36
- <view class="u-icon-wrap">
37
- <u-icon
38
- @click="getMore"
39
- class="u-right-icon"
40
- v-if="props.moreIcon"
41
- name="arrow-right"
42
- :size="26"
43
- :color="computeColor"
44
- ></u-icon>
45
- <u-icon
46
- @click="close"
47
- class="u-right-icon"
48
- v-if="props.closeIcon"
49
- name="close"
50
- :size="24"
51
- :color="computeColor"
52
- ></u-icon>
53
- </view>
54
- </view>
55
- </template>
56
-
57
- <script lang="ts">
58
- export default {
59
- name: 'u-column-notice',
60
- options: {
61
- addGlobalClass: true,
62
- // #ifndef MP-TOUTIAO
63
- virtualHost: true,
64
- // #endif
65
- styleIsolation: 'shared'
66
- }
67
- };
68
- </script>
69
-
70
- <script setup lang="ts">
71
- import { computed } from 'vue';
72
- import { ColumnNoticeProps } from './types';
73
- import { $u } from '../../';
74
- import uIcon from '../u-icon/u-icon.vue';
75
-
76
- /**
77
- * u-column-notice 通告栏
78
- * @property {Array} list 显示的内容,数组
79
- * @property {String} type 显示的主题,success|error|primary|info|warning
80
- * @property {Boolean} volumeIcon 是否显示左侧的音量图标
81
- * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
82
- * @property {Boolean} closeIcon 是否显示右侧的关闭图标
83
- * @property {Boolean} autoplay 是否自动播放
84
- * @property {String} color 文字颜色,各图标也会使用文字颜色
85
- * @property {String} bgColor 背景颜色
86
- * @property {String} direction 滚动方向,row-水平滚动,column-垂直滚动
87
- * @property {Boolean} show 是否显示
88
- * @property {String|Number} fontSize 字体大小,单位rpx
89
- * @property {String|Number} duration 滚动一个周期的时间长,单位ms
90
- * @property {String|Number} volumeSize 音量喇叭的大小
91
- * @property {Number} speed 水平滚动时的滚动速度,即每秒滚动多少rpx
92
- * @property {Boolean} isCircular 水平滚动时,是否采用衔接形式滚动
93
- * @property {String} mode 滚动方向,horizontal-水平滚动,vertical-垂直滚动
94
- * @property {String} playState 播放状态,play-播放,paused-暂停
95
- * @property {Boolean} disableTouch 是否禁止用手滑动切换
96
- * @property {String|Number} padding 通知的边距
97
- */
98
-
99
- const props = defineProps(ColumnNoticeProps);
100
-
101
- const emit = defineEmits<{
102
- (e: 'click', index: number): void;
103
- (e: 'close'): void;
104
- (e: 'getMore'): void;
105
- (e: 'end'): void;
106
- }>();
107
-
108
- /**
109
- * 计算字体颜色,如果没有自定义的,就用uview主题颜色
110
- */
111
- const computeColor = computed(() => {
112
- if (props.color) return props.color;
113
- // 如果是无主题,就默认使用content-color
114
- else if (props.type === 'none') return 'var(--u-content-color)';
115
- else return props.type;
116
- });
117
-
118
- /**
119
- * 文字内容的样式
120
- */
121
- const textStyle = computed(() => {
122
- const style: Record<string, any> = {};
123
- if (props.color) style.color = props.color;
124
- else if (props.type === 'none') style.color = 'var(--u-content-color)';
125
- style.fontSize = props.fontSize + 'rpx';
126
- return style;
127
- });
128
-
129
- /**
130
- * 垂直或者水平滚动
131
- */
132
- const vertical = computed(() => {
133
- return props.mode !== 'horizontal';
134
- });
135
-
136
- /**
137
- * 计算背景颜色
138
- */
139
- const computeBgColor = computed(() => {
140
- if (props.bgColor) return props.bgColor;
141
- else if (props.type === 'none') return 'transparent';
142
- else return '';
143
- });
144
-
145
- /**
146
- * 点击通告栏
147
- */
148
- function click(index: number) {
149
- emit('click', index);
150
- }
151
-
152
- /**
153
- * 点击关闭按钮
154
- */
155
- function close() {
156
- emit('close');
157
- }
158
-
159
- /**
160
- * 点击更多箭头按钮
161
- */
162
- function getMore() {
163
- emit('getMore');
164
- }
165
-
166
- /**
167
- * swiper 切换事件
168
- */
169
- function change(e: { detail: { current: number } }) {
170
- const index = e.detail.current;
171
- if (index === props.list.length - 1) {
172
- emit('end');
173
- }
174
- }
175
- </script>
176
-
177
- <style lang="scss" scoped>
178
- @import '../../libs/css/style.components.scss';
179
-
180
- .u-notice-bar {
181
- width: 100%;
182
- @include vue-flex;
183
- align-items: center;
184
- justify-content: center;
185
- flex-wrap: nowrap;
186
- padding: 18rpx 24rpx;
187
- overflow: hidden;
188
- }
189
-
190
- .u-swiper {
191
- font-size: 26rpx;
192
- height: 32rpx;
193
- @include vue-flex;
194
- align-items: center;
195
- flex: 1;
196
- margin-left: 12rpx;
197
- }
198
-
199
- .u-swiper-item {
200
- @include vue-flex;
201
- align-items: center;
202
- overflow: hidden;
203
- }
204
-
205
- .u-news-item {
206
- overflow: hidden;
207
- }
208
-
209
- .u-right-icon {
210
- margin-left: 12rpx;
211
- /* #ifndef APP-NVUE */
212
- display: inline-flex;
213
- /* #endif */
214
- align-items: center;
215
- }
216
-
217
- .u-left-icon {
218
- /* #ifndef APP-NVUE */
219
- display: inline-flex;
220
- /* #endif */
221
- align-items: center;
222
- }
223
- </style>
1
+ <template>
2
+ <view
3
+ class="u-notice-bar"
4
+ :style="$u.toStyle({ background: computeBgColor, padding: props.padding }, customStyle)"
5
+ :class="[props.type ? `u-type-${props.type}-light-bg` : '', customClass]"
6
+ >
7
+ <view class="u-icon-wrap">
8
+ <u-icon
9
+ class="u-left-icon"
10
+ v-if="props.volumeIcon"
11
+ name="volume-fill"
12
+ :size="props.volumeSize"
13
+ :color="computeColor"
14
+ ></u-icon>
15
+ </view>
16
+ <swiper
17
+ :disable-touch="props.disableTouch"
18
+ @change="change"
19
+ :autoplay="props.autoplay && props.playState === 'play'"
20
+ :vertical="vertical"
21
+ circular
22
+ :interval="props.duration"
23
+ class="u-swiper"
24
+ >
25
+ <swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
26
+ <view
27
+ class="u-news-item u-line-1"
28
+ :style="textStyle"
29
+ @tap="click(index)"
30
+ :class="['u-type-' + props.type]"
31
+ >
32
+ {{ item }}
33
+ </view>
34
+ </swiper-item>
35
+ </swiper>
36
+ <view class="u-icon-wrap">
37
+ <u-icon
38
+ @click="getMore"
39
+ class="u-right-icon"
40
+ v-if="props.moreIcon"
41
+ name="arrow-right"
42
+ :size="26"
43
+ :color="computeColor"
44
+ ></u-icon>
45
+ <u-icon
46
+ @click="close"
47
+ class="u-right-icon"
48
+ v-if="props.closeIcon"
49
+ name="close"
50
+ :size="24"
51
+ :color="computeColor"
52
+ ></u-icon>
53
+ </view>
54
+ </view>
55
+ </template>
56
+
57
+ <script lang="ts">
58
+ export default {
59
+ name: 'u-column-notice',
60
+ options: {
61
+ addGlobalClass: true,
62
+ // #ifndef MP-TOUTIAO
63
+ virtualHost: true,
64
+ // #endif
65
+ styleIsolation: 'shared'
66
+ }
67
+ };
68
+ </script>
69
+
70
+ <script setup lang="ts">
71
+ import { computed } from 'vue';
72
+ import { ColumnNoticeProps } from './types';
73
+ import { $u } from '../../';
74
+ import uIcon from '../u-icon/u-icon.vue';
75
+
76
+ /**
77
+ * u-column-notice 通告栏
78
+ * @property {Array} list 显示的内容,数组
79
+ * @property {String} type 显示的主题,success|error|primary|info|warning
80
+ * @property {Boolean} volumeIcon 是否显示左侧的音量图标
81
+ * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
82
+ * @property {Boolean} closeIcon 是否显示右侧的关闭图标
83
+ * @property {Boolean} autoplay 是否自动播放
84
+ * @property {String} color 文字颜色,各图标也会使用文字颜色
85
+ * @property {String} bgColor 背景颜色
86
+ * @property {String} direction 滚动方向,row-水平滚动,column-垂直滚动
87
+ * @property {Boolean} show 是否显示
88
+ * @property {String|Number} fontSize 字体大小,单位rpx
89
+ * @property {String|Number} duration 滚动一个周期的时间长,单位ms
90
+ * @property {String|Number} volumeSize 音量喇叭的大小
91
+ * @property {Number} speed 水平滚动时的滚动速度,即每秒滚动多少rpx
92
+ * @property {Boolean} isCircular 水平滚动时,是否采用衔接形式滚动
93
+ * @property {String} mode 滚动方向,horizontal-水平滚动,vertical-垂直滚动
94
+ * @property {String} playState 播放状态,play-播放,paused-暂停
95
+ * @property {Boolean} disableTouch 是否禁止用手滑动切换
96
+ * @property {String|Number} padding 通知的边距
97
+ */
98
+
99
+ const props = defineProps(ColumnNoticeProps);
100
+
101
+ const emit = defineEmits<{
102
+ (e: 'click', index: number): void;
103
+ (e: 'close'): void;
104
+ (e: 'getMore'): void;
105
+ (e: 'end'): void;
106
+ }>();
107
+
108
+ /**
109
+ * 计算字体颜色,如果没有自定义的,就用uview主题颜色
110
+ */
111
+ const computeColor = computed(() => {
112
+ if (props.color) return props.color;
113
+ // 如果是无主题,就默认使用content-color
114
+ else if (props.type === 'none') return 'var(--u-content-color)';
115
+ else return props.type;
116
+ });
117
+
118
+ /**
119
+ * 文字内容的样式
120
+ */
121
+ const textStyle = computed(() => {
122
+ const style: Record<string, any> = {};
123
+ if (props.color) style.color = props.color;
124
+ else if (props.type === 'none') style.color = 'var(--u-content-color)';
125
+ style.fontSize = props.fontSize + 'rpx';
126
+ return style;
127
+ });
128
+
129
+ /**
130
+ * 垂直或者水平滚动
131
+ */
132
+ const vertical = computed(() => {
133
+ return props.mode !== 'horizontal';
134
+ });
135
+
136
+ /**
137
+ * 计算背景颜色
138
+ */
139
+ const computeBgColor = computed(() => {
140
+ if (props.bgColor) return props.bgColor;
141
+ else if (props.type === 'none') return 'transparent';
142
+ else return '';
143
+ });
144
+
145
+ /**
146
+ * 点击通告栏
147
+ */
148
+ function click(index: number) {
149
+ emit('click', index);
150
+ }
151
+
152
+ /**
153
+ * 点击关闭按钮
154
+ */
155
+ function close() {
156
+ emit('close');
157
+ }
158
+
159
+ /**
160
+ * 点击更多箭头按钮
161
+ */
162
+ function getMore() {
163
+ emit('getMore');
164
+ }
165
+
166
+ /**
167
+ * swiper 切换事件
168
+ */
169
+ function change(e: { detail: { current: number } }) {
170
+ const index = e.detail.current;
171
+ if (index === props.list.length - 1) {
172
+ emit('end');
173
+ }
174
+ }
175
+ </script>
176
+
177
+ <style lang="scss" scoped>
178
+ @import '../../libs/css/style.components.scss';
179
+
180
+ .u-notice-bar {
181
+ width: 100%;
182
+ @include vue-flex;
183
+ align-items: center;
184
+ justify-content: center;
185
+ flex-wrap: nowrap;
186
+ padding: 18rpx 24rpx;
187
+ overflow: hidden;
188
+ }
189
+
190
+ .u-swiper {
191
+ font-size: 26rpx;
192
+ height: 32rpx;
193
+ @include vue-flex;
194
+ align-items: center;
195
+ flex: 1;
196
+ margin-left: 12rpx;
197
+ }
198
+
199
+ .u-swiper-item {
200
+ @include vue-flex;
201
+ align-items: center;
202
+ overflow: hidden;
203
+ }
204
+
205
+ .u-news-item {
206
+ overflow: hidden;
207
+ }
208
+
209
+ .u-right-icon {
210
+ margin-left: 12rpx;
211
+ /* #ifndef APP-NVUE */
212
+ display: inline-flex;
213
+ /* #endif */
214
+ align-items: center;
215
+ }
216
+
217
+ .u-left-icon {
218
+ /* #ifndef APP-NVUE */
219
+ display: inline-flex;
220
+ /* #endif */
221
+ align-items: center;
222
+ }
223
+ </style>
@@ -1,53 +1,53 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
- import { config, configProvider } from '../../libs';
3
- import type { Theme, DarkMode } from '../../types/global';
4
-
5
- export const ConfigProviderProps = {
6
- /** 自定义根节点样式 */
7
- customStyle: {
8
- type: [String, Object] as PropType<string | Record<string, any>>,
9
- default: () => ({})
10
- },
11
- /** 自定义根节点样式类 */
12
- customClass: {
13
- type: String as unknown as PropType<string>,
14
- default: ''
15
- },
16
- /**
17
- * 主题风格,可选值:
18
- * - 'light': 强制亮色模式(默认)
19
- * - 'dark': 强制暗黑模式
20
- * - 'auto': 自动跟随系统设置
21
- */
22
- darkMode: {
23
- type: String as PropType<DarkMode>,
24
- default: () => configProvider.getDarkMode()
25
- },
26
- /**
27
- * 当前主题名称(用于多主题切换)
28
- */
29
- currentTheme: {
30
- type: String,
31
- default: () => configProvider.getCurrentTheme()?.name ?? config.defaultTheme
32
- },
33
- /**
34
- * 自定义主题列表
35
- */
36
- themes: {
37
- type: Array as PropType<Theme[]>,
38
- default: () => configProvider.getThemes()
39
- },
40
- /**
41
- * 国际化配置:传入 locale 列表(数组)并可指定默认语言 currentLocale
42
- */
43
- locales: {
44
- type: Array as PropType<any[]>,
45
- default: () => []
46
- },
47
- currentLocale: {
48
- type: String,
49
- default: () => configProvider.getCurrentLocale()?.name ?? ''
50
- }
51
- };
52
-
53
- export type ConfigProviderProps = ExtractPropTypes<typeof ConfigProviderProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+ import { config, configProvider } from '../../libs';
3
+ import type { Theme, DarkMode } from '../../types/global';
4
+
5
+ export const ConfigProviderProps = {
6
+ /** 自定义根节点样式 */
7
+ customStyle: {
8
+ type: [String, Object] as PropType<string | Record<string, any>>,
9
+ default: () => ({})
10
+ },
11
+ /** 自定义根节点样式类 */
12
+ customClass: {
13
+ type: String as unknown as PropType<string>,
14
+ default: ''
15
+ },
16
+ /**
17
+ * 主题风格,可选值:
18
+ * - 'light': 强制亮色模式(默认)
19
+ * - 'dark': 强制暗黑模式
20
+ * - 'auto': 自动跟随系统设置
21
+ */
22
+ darkMode: {
23
+ type: String as PropType<DarkMode>,
24
+ default: () => configProvider.getDarkMode()
25
+ },
26
+ /**
27
+ * 当前主题名称(用于多主题切换)
28
+ */
29
+ currentTheme: {
30
+ type: String,
31
+ default: () => configProvider.getCurrentTheme()?.name ?? config.defaultTheme
32
+ },
33
+ /**
34
+ * 自定义主题列表
35
+ */
36
+ themes: {
37
+ type: Array as PropType<Theme[]>,
38
+ default: () => configProvider.getThemes()
39
+ },
40
+ /**
41
+ * 国际化配置:传入 locale 列表(数组)并可指定默认语言 currentLocale
42
+ */
43
+ locales: {
44
+ type: Array as PropType<any[]>,
45
+ default: () => []
46
+ },
47
+ currentLocale: {
48
+ type: String,
49
+ default: () => configProvider.getCurrentLocale()?.name ?? ''
50
+ }
51
+ };
52
+
53
+ export type ConfigProviderProps = ExtractPropTypes<typeof ConfigProviderProps>;