uview-pro 0.3.0 → 0.3.1

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 (249) hide show
  1. package/changelog.md +584 -574
  2. package/components/common/props.ts +22 -22
  3. package/components/u-action-sheet/types.ts +37 -37
  4. package/components/u-action-sheet/u-action-sheet.vue +178 -178
  5. package/components/u-alert-tips/types.ts +41 -41
  6. package/components/u-alert-tips/u-alert-tips.vue +238 -238
  7. package/components/u-avatar/types.ts +36 -36
  8. package/components/u-avatar/u-avatar.vue +217 -217
  9. package/components/u-avatar-cropper/types.ts +23 -23
  10. package/components/u-avatar-cropper/u-avatar-cropper.vue +297 -297
  11. package/components/u-avatar-cropper/weCropper.d.ts +62 -62
  12. package/components/u-avatar-cropper/weCropper.js +1281 -1281
  13. package/components/u-avatar-cropper/weCropper.ts +1276 -1276
  14. package/components/u-back-top/types.ts +36 -36
  15. package/components/u-back-top/u-back-top.vue +140 -140
  16. package/components/u-badge/types.ts +38 -38
  17. package/components/u-badge/u-badge.vue +183 -183
  18. package/components/u-button/types.ts +66 -66
  19. package/components/u-button/u-button.vue +579 -579
  20. package/components/u-calendar/types.ts +75 -75
  21. package/components/u-calendar/u-calendar.vue +793 -793
  22. package/components/u-car-keyboard/types.ts +14 -14
  23. package/components/u-car-keyboard/u-car-keyboard.vue +262 -262
  24. package/components/u-card/types.ts +61 -61
  25. package/components/u-card/u-card.vue +209 -209
  26. package/components/u-cell-group/types.ts +19 -19
  27. package/components/u-cell-group/u-cell-group.vue +60 -60
  28. package/components/u-cell-item/types.ts +56 -56
  29. package/components/u-cell-item/u-cell-item.vue +226 -226
  30. package/components/u-checkbox/types.ts +33 -33
  31. package/components/u-checkbox/u-checkbox.vue +282 -282
  32. package/components/u-checkbox-group/types.ts +34 -34
  33. package/components/u-checkbox-group/u-checkbox-group.vue +130 -130
  34. package/components/u-circle-progress/types.ts +54 -54
  35. package/components/u-circle-progress/u-circle-progress.vue +206 -206
  36. package/components/u-city-select/types.ts +22 -22
  37. package/components/u-city-select/u-city-select.vue +276 -276
  38. package/components/u-col/types.ts +32 -32
  39. package/components/u-col/u-col.vue +142 -142
  40. package/components/u-collapse/types.ts +33 -33
  41. package/components/u-collapse/u-collapse.vue +190 -190
  42. package/components/u-collapse-item/types.ts +27 -27
  43. package/components/u-collapse-item/u-collapse-item.vue +290 -290
  44. package/components/u-column-notice/types.ts +50 -50
  45. package/components/u-column-notice/u-column-notice.vue +222 -222
  46. package/components/u-count-down/types.ts +44 -44
  47. package/components/u-count-down/u-count-down.vue +286 -286
  48. package/components/u-count-to/types.ts +34 -34
  49. package/components/u-count-to/u-count-to.vue +266 -266
  50. package/components/u-divider/types.ts +33 -33
  51. package/components/u-divider/u-divider.vue +145 -145
  52. package/components/u-dropdown/types.ts +34 -34
  53. package/components/u-dropdown/u-dropdown.vue +330 -330
  54. package/components/u-dropdown-item/types.ts +29 -29
  55. package/components/u-dropdown-item/u-dropdown-item.vue +120 -120
  56. package/components/u-empty/types.ts +38 -38
  57. package/components/u-empty/u-empty.vue +103 -103
  58. package/components/u-field/types.ts +71 -71
  59. package/components/u-field/u-field.vue +388 -388
  60. package/components/u-form/types.ts +29 -29
  61. package/components/u-form/u-form.vue +130 -130
  62. package/components/u-form-item/types.ts +72 -72
  63. package/components/u-form-item/u-form-item.vue +447 -447
  64. package/components/u-full-screen/types.ts +16 -16
  65. package/components/u-full-screen/u-full-screen.vue +103 -103
  66. package/components/u-gap/types.ts +20 -20
  67. package/components/u-gap/u-gap.vue +50 -50
  68. package/components/u-grid/types.ts +21 -21
  69. package/components/u-grid/u-grid.vue +91 -91
  70. package/components/u-grid-item/types.ts +16 -16
  71. package/components/u-grid-item/u-grid-item.vue +130 -130
  72. package/components/u-icon/types.ts +61 -61
  73. package/components/u-icon/u-icon.vue +296 -296
  74. package/components/u-image/types.ts +51 -51
  75. package/components/u-image/u-image.vue +239 -239
  76. package/components/u-index-anchor/types.ts +16 -16
  77. package/components/u-index-anchor/u-index-anchor.vue +94 -94
  78. package/components/u-index-list/types.ts +43 -43
  79. package/components/u-index-list/u-index-list.vue +352 -352
  80. package/components/u-input/types.ts +137 -137
  81. package/components/u-input/u-input.vue +288 -288
  82. package/components/u-keyboard/types.ts +40 -40
  83. package/components/u-keyboard/u-keyboard.vue +178 -178
  84. package/components/u-lazy-load/types.ts +37 -37
  85. package/components/u-lazy-load/u-lazy-load.vue +246 -246
  86. package/components/u-line/types.ts +44 -44
  87. package/components/u-line/u-line.vue +68 -68
  88. package/components/u-line-progress/types.ts +58 -58
  89. package/components/u-line-progress/u-line-progress.vue +126 -126
  90. package/components/u-link/types.ts +43 -43
  91. package/components/u-link/u-link.vue +84 -84
  92. package/components/u-loading/types.ts +35 -35
  93. package/components/u-loading/u-loading.vue +105 -105
  94. package/components/u-loading-popup/types.ts +26 -26
  95. package/components/u-loading-popup/u-loading-popup.vue +253 -253
  96. package/components/u-loadmore/types.ts +79 -79
  97. package/components/u-loadmore/u-loadmore.vue +156 -156
  98. package/components/u-mask/types.ts +40 -40
  99. package/components/u-mask/u-mask.vue +113 -113
  100. package/components/u-message-input/types.ts +74 -74
  101. package/components/u-message-input/u-message-input.vue +281 -281
  102. package/components/u-modal/types.ts +118 -118
  103. package/components/u-modal/u-modal.vue +220 -220
  104. package/components/u-navbar/types.ts +103 -103
  105. package/components/u-navbar/u-navbar.vue +251 -251
  106. package/components/u-no-network/image.ts +2 -2
  107. package/components/u-no-network/types.ts +28 -28
  108. package/components/u-no-network/u-no-network.vue +303 -303
  109. package/components/u-notice-bar/types.ts +111 -111
  110. package/components/u-notice-bar/u-notice-bar.vue +189 -189
  111. package/components/u-number-box/types.ts +42 -42
  112. package/components/u-number-box/u-number-box.vue +321 -321
  113. package/components/u-number-keyboard/types.ts +26 -26
  114. package/components/u-number-keyboard/u-number-keyboard.vue +188 -188
  115. package/components/u-picker/types.ts +123 -123
  116. package/components/u-picker/u-picker.vue +685 -685
  117. package/components/u-popup/types.ts +59 -59
  118. package/components/u-popup/u-popup.vue +385 -385
  119. package/components/u-radio/types.ts +27 -27
  120. package/components/u-radio/u-radio.vue +279 -279
  121. package/components/u-radio-group/types.ts +31 -31
  122. package/components/u-radio-group/u-radio-group.vue +96 -96
  123. package/components/u-rate/types.ts +42 -42
  124. package/components/u-rate/u-rate.vue +249 -249
  125. package/components/u-read-more/types.ts +37 -37
  126. package/components/u-read-more/u-read-more.vue +172 -172
  127. package/components/u-root-portal/u-root-portal.vue +56 -56
  128. package/components/u-row/types.ts +22 -22
  129. package/components/u-row/u-row.vue +105 -105
  130. package/components/u-row-notice/types.ts +41 -41
  131. package/components/u-row-notice/u-row-notice.vue +256 -256
  132. package/components/u-safe-bottom/u-safe-bottom.vue +57 -57
  133. package/components/u-search/types.ts +55 -55
  134. package/components/u-search/u-search.vue +279 -279
  135. package/components/u-section/types.ts +34 -34
  136. package/components/u-section/u-section.vue +150 -150
  137. package/components/u-select/types.ts +45 -45
  138. package/components/u-select/u-select.vue +388 -388
  139. package/components/u-skeleton/types.ts +22 -22
  140. package/components/u-skeleton/u-skeleton.vue +231 -231
  141. package/components/u-slider/types.ts +34 -34
  142. package/components/u-slider/u-slider.vue +255 -255
  143. package/components/u-status-bar/u-status-bar.vue +74 -74
  144. package/components/u-steps/types.ts +30 -30
  145. package/components/u-steps/u-steps.vue +181 -181
  146. package/components/u-sticky/types.ts +24 -24
  147. package/components/u-sticky/u-sticky.vue +178 -178
  148. package/components/u-subsection/types.ts +38 -38
  149. package/components/u-subsection/u-subsection.vue +339 -339
  150. package/components/u-swipe-action/types.ts +52 -52
  151. package/components/u-swipe-action/u-swipe-action.vue +276 -276
  152. package/components/u-swiper/types.ts +49 -49
  153. package/components/u-swiper/u-swiper.vue +308 -308
  154. package/components/u-switch/types.ts +30 -30
  155. package/components/u-switch/u-switch.vue +150 -150
  156. package/components/u-tabbar/types.ts +38 -38
  157. package/components/u-tabbar/u-tabbar.vue +315 -315
  158. package/components/u-table/types.ts +27 -27
  159. package/components/u-table/u-table.vue +67 -67
  160. package/components/u-tabs/types.ts +53 -53
  161. package/components/u-tabs/u-tabs.vue +302 -302
  162. package/components/u-tabs-swiper/types.ts +55 -55
  163. package/components/u-tabs-swiper/u-tabs-swiper.vue +409 -409
  164. package/components/u-tag/types.ts +39 -39
  165. package/components/u-tag/u-tag.vue +268 -268
  166. package/components/u-td/types.ts +14 -14
  167. package/components/u-td/u-td.vue +98 -98
  168. package/components/u-text/types.ts +72 -72
  169. package/components/u-text/u-text.vue +343 -343
  170. package/components/u-th/types.ts +14 -14
  171. package/components/u-th/u-th.vue +92 -92
  172. package/components/u-time-line/u-time-line.vue +53 -53
  173. package/components/u-time-line-item/types.ts +16 -16
  174. package/components/u-time-line-item/u-time-line-item.vue +90 -90
  175. package/components/u-toast/types.ts +38 -38
  176. package/components/u-toast/u-toast.vue +240 -240
  177. package/components/u-top-tips/types.ts +16 -16
  178. package/components/u-top-tips/u-top-tips.vue +130 -130
  179. package/components/u-tr/types.ts +11 -11
  180. package/components/u-tr/u-tr.vue +39 -39
  181. package/components/u-upload/types.ts +82 -82
  182. package/components/u-upload/u-upload.vue +568 -568
  183. package/components/u-verification-code/types.ts +24 -24
  184. package/components/u-verification-code/u-verification-code.vue +176 -176
  185. package/components/u-waterfall/types.ts +18 -18
  186. package/components/u-waterfall/u-waterfall.vue +187 -187
  187. package/iconfont.css +913 -913
  188. package/index.scss +25 -25
  189. package/index.ts +38 -38
  190. package/libs/config/config.ts +26 -26
  191. package/libs/config/zIndex.ts +37 -37
  192. package/libs/css/color.scss +155 -155
  193. package/libs/css/common.scss +178 -178
  194. package/libs/css/style.components.scss +16 -16
  195. package/libs/css/style.h5.scss +8 -8
  196. package/libs/css/style.mp.scss +72 -72
  197. package/libs/css/style.nvue.scss +15 -15
  198. package/libs/css/style.vue.scss +188 -188
  199. package/libs/function/$parent.ts +24 -24
  200. package/libs/function/addUnit.ts +13 -13
  201. package/libs/function/color.ts +37 -37
  202. package/libs/function/colorGradient.ts +139 -139
  203. package/libs/function/debounce.ts +28 -28
  204. package/libs/function/deepClone.ts +39 -39
  205. package/libs/function/deepMerge.ts +35 -35
  206. package/libs/function/getParent.ts +63 -63
  207. package/libs/function/getRect.ts +26 -26
  208. package/libs/function/guid.ts +42 -42
  209. package/libs/function/md5.ts +403 -403
  210. package/libs/function/parent.ts +21 -21
  211. package/libs/function/queryParams.ts +64 -64
  212. package/libs/function/random.ts +16 -16
  213. package/libs/function/randomArray.ts +11 -11
  214. package/libs/function/route.ts +118 -118
  215. package/libs/function/styleUtils.ts +83 -83
  216. package/libs/function/sys.ts +15 -15
  217. package/libs/function/test.ts +289 -289
  218. package/libs/function/throttle.ts +31 -31
  219. package/libs/function/timeFormat.ts +55 -55
  220. package/libs/function/timeFrom.ts +48 -48
  221. package/libs/function/toast.ts +14 -14
  222. package/libs/function/trim.ts +21 -21
  223. package/libs/function/type2icon.ts +39 -39
  224. package/libs/hooks/index.ts +4 -4
  225. package/libs/hooks/useCompRelation.ts +364 -364
  226. package/libs/hooks/useComponent.ts +759 -759
  227. package/libs/hooks/useEmitter.ts +79 -79
  228. package/libs/hooks/useParent.ts +33 -33
  229. package/libs/hooks/useRect.ts +33 -33
  230. package/libs/index.ts +337 -337
  231. package/libs/request/auto-http.ts +76 -76
  232. package/libs/request/index.ts +242 -242
  233. package/libs/store/index.ts +88 -88
  234. package/libs/util/async-validator.d.ts +75 -75
  235. package/libs/util/async-validator.js +1 -1
  236. package/libs/util/calendar.d.ts +57 -57
  237. package/libs/util/emitter.ts +112 -112
  238. package/libs/util/eventBus.ts +86 -86
  239. package/libs/util/logger.ts +364 -364
  240. package/libs/util/mitt.ts +118 -118
  241. package/libs/util/parent.ts +20 -20
  242. package/package.json +4 -4
  243. package/readme.md +241 -241
  244. package/theme.scss +38 -38
  245. package/types/components.d.ts +97 -97
  246. package/types/global.d.ts +331 -331
  247. package/types/ignore-errors.d.ts +30 -30
  248. package/types/index.d.ts +19 -19
  249. package/types/uni-app.d.ts +63 -63
@@ -1,178 +1,178 @@
1
- <template>
2
- <u-popup
3
- :mask="mask"
4
- :maskCloseAble="maskCloseAble"
5
- mode="bottom"
6
- :popup="false"
7
- v-model="popupValue"
8
- length="auto"
9
- :safeAreaInsetBottom="safeAreaInsetBottom"
10
- @close="popupClose"
11
- :zIndex="uZIndex"
12
- >
13
- <slot />
14
- <view class="u-tooltip" v-if="tooltip">
15
- <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
16
- {{ cancelBtn ? cancelText : '' }}
17
- </view>
18
- <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
19
- {{ tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘' }}
20
- </view>
21
- <view
22
- v-if="confirmBtn"
23
- @tap="onConfirm"
24
- class="u-tooltip-item u-tooltips-submit"
25
- hover-class="u-tooltips-submit-hover"
26
- >
27
- {{ confirmBtn ? confirmText : '' }}
28
- </view>
29
- </view>
30
- <block v-if="mode == 'number' || mode == 'card'">
31
- <u-number-keyboard
32
- :random="random"
33
- @backspace="backspace"
34
- @change="change"
35
- :mode="mode"
36
- :dotEnabled="dotEnabled"
37
- ></u-number-keyboard>
38
- </block>
39
- <block v-else>
40
- <u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
41
- </block>
42
- </u-popup>
43
- </template>
44
-
45
- <script lang="ts">
46
- export default {
47
- name: 'u-keyboard',
48
- options: {
49
- addGlobalClass: true,
50
- // #ifndef MP-TOUTIAO
51
- virtualHost: true,
52
- // #endif
53
- styleIsolation: 'shared'
54
- }
55
- };
56
- </script>
57
-
58
- <script setup lang="ts">
59
- import { KeyboardProps } from './types';
60
- import { computed } from 'vue';
61
-
62
- /**
63
- * keyboard 键盘
64
- * @description 此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。
65
- * @tutorial https://uviewpro.cn/zh/components/keyboard.html
66
- * @property {String} mode 键盘类型,见官网基本使用的说明(默认number)
67
- * @property {Boolean} dot-enabled 是否显示"."按键,只在mode=number时有效(默认true)
68
- * @property {Boolean} tooltip 是否显示键盘顶部工具条(默认true)
69
- * @property {String} tips 工具条中间的提示文字,见上方基本使用的说明,如不需要,请传""空字符
70
- * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true)
71
- * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true)
72
- * @property {Boolean} mask 是否显示遮罩(默认true)
73
- * @property {String} confirm-text 确认按钮的文字
74
- * @property {String} cancel-text 取消按钮的文字
75
- * @property {Number String} z-index 弹出键盘的z-index值(默认1075)
76
- * @property {Boolean} random 是否打乱键盘按键的顺序(默认false)
77
- * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
78
- * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘(默认true)
79
- * @event {Function} change 按键被点击(不包含退格键被点击)
80
- * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
81
- * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
82
- * @event {Function} backspace 键盘退格键被点击
83
- * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
84
- */
85
-
86
- const props = defineProps(KeyboardProps);
87
- const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
88
-
89
- const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
90
-
91
- const popupValue = computed({
92
- get: () => props.modelValue,
93
- set: (val: boolean) => emit('update:modelValue', val)
94
- });
95
-
96
- /**
97
- * 按键被点击(不包含退格键被点击)
98
- */
99
- function change(e: any) {
100
- emit('change', e);
101
- }
102
-
103
- /**
104
- * 键盘关闭
105
- */
106
- function popupClose() {
107
- emit('update:modelValue', false);
108
- }
109
-
110
- /**
111
- * 输入完成
112
- */
113
- function onConfirm() {
114
- popupClose();
115
- emit('confirm');
116
- }
117
-
118
- /**
119
- * 取消输入
120
- */
121
- function onCancel() {
122
- popupClose();
123
- emit('cancel');
124
- }
125
-
126
- /**
127
- * 退格键
128
- */
129
- function backspace() {
130
- emit('backspace');
131
- }
132
- </script>
133
-
134
- <style lang="scss" scoped>
135
- @import '../../libs/css/style.components.scss';
136
-
137
- .u-keyboard {
138
- position: relative;
139
- z-index: 1003;
140
- }
141
-
142
- .u-tooltip {
143
- @include vue-flex;
144
- justify-content: space-between;
145
- }
146
-
147
- .u-tooltip-item {
148
- color: #333333;
149
- flex: 0 0 33.333333%;
150
- text-align: center;
151
- padding: 20rpx 10rpx;
152
- font-size: 28rpx;
153
- }
154
-
155
- .u-tooltips-submit {
156
- text-align: right;
157
- flex-grow: 1;
158
- flex-wrap: 0;
159
- padding-right: 40rpx;
160
- color: $u-type-primary;
161
- }
162
-
163
- .u-tooltip-cancel {
164
- text-align: left;
165
- flex-grow: 1;
166
- flex-wrap: 0;
167
- padding-left: 40rpx;
168
- color: #888888;
169
- }
170
-
171
- .u-tooltips-submit-hover {
172
- color: $u-type-success;
173
- }
174
-
175
- .u-tooltip-cancel-hover {
176
- color: #333333;
177
- }
178
- </style>
1
+ <template>
2
+ <u-popup
3
+ :mask="mask"
4
+ :maskCloseAble="maskCloseAble"
5
+ mode="bottom"
6
+ :popup="false"
7
+ v-model="popupValue"
8
+ length="auto"
9
+ :safeAreaInsetBottom="safeAreaInsetBottom"
10
+ @close="popupClose"
11
+ :zIndex="uZIndex"
12
+ >
13
+ <slot />
14
+ <view class="u-tooltip" v-if="tooltip">
15
+ <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
16
+ {{ cancelBtn ? cancelText : '' }}
17
+ </view>
18
+ <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
19
+ {{ tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘' }}
20
+ </view>
21
+ <view
22
+ v-if="confirmBtn"
23
+ @tap="onConfirm"
24
+ class="u-tooltip-item u-tooltips-submit"
25
+ hover-class="u-tooltips-submit-hover"
26
+ >
27
+ {{ confirmBtn ? confirmText : '' }}
28
+ </view>
29
+ </view>
30
+ <block v-if="mode == 'number' || mode == 'card'">
31
+ <u-number-keyboard
32
+ :random="random"
33
+ @backspace="backspace"
34
+ @change="change"
35
+ :mode="mode"
36
+ :dotEnabled="dotEnabled"
37
+ ></u-number-keyboard>
38
+ </block>
39
+ <block v-else>
40
+ <u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
41
+ </block>
42
+ </u-popup>
43
+ </template>
44
+
45
+ <script lang="ts">
46
+ export default {
47
+ name: 'u-keyboard',
48
+ options: {
49
+ addGlobalClass: true,
50
+ // #ifndef MP-TOUTIAO
51
+ virtualHost: true,
52
+ // #endif
53
+ styleIsolation: 'shared'
54
+ }
55
+ };
56
+ </script>
57
+
58
+ <script setup lang="ts">
59
+ import { KeyboardProps } from './types';
60
+ import { computed } from 'vue';
61
+
62
+ /**
63
+ * keyboard 键盘
64
+ * @description 此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。
65
+ * @tutorial https://uviewpro.cn/zh/components/keyboard.html
66
+ * @property {String} mode 键盘类型,见官网基本使用的说明(默认number)
67
+ * @property {Boolean} dot-enabled 是否显示"."按键,只在mode=number时有效(默认true)
68
+ * @property {Boolean} tooltip 是否显示键盘顶部工具条(默认true)
69
+ * @property {String} tips 工具条中间的提示文字,见上方基本使用的说明,如不需要,请传""空字符
70
+ * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true)
71
+ * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true)
72
+ * @property {Boolean} mask 是否显示遮罩(默认true)
73
+ * @property {String} confirm-text 确认按钮的文字
74
+ * @property {String} cancel-text 取消按钮的文字
75
+ * @property {Number String} z-index 弹出键盘的z-index值(默认1075)
76
+ * @property {Boolean} random 是否打乱键盘按键的顺序(默认false)
77
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
78
+ * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘(默认true)
79
+ * @event {Function} change 按键被点击(不包含退格键被点击)
80
+ * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
81
+ * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
82
+ * @event {Function} backspace 键盘退格键被点击
83
+ * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
84
+ */
85
+
86
+ const props = defineProps(KeyboardProps);
87
+ const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
88
+
89
+ const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
90
+
91
+ const popupValue = computed({
92
+ get: () => props.modelValue,
93
+ set: (val: boolean) => emit('update:modelValue', val)
94
+ });
95
+
96
+ /**
97
+ * 按键被点击(不包含退格键被点击)
98
+ */
99
+ function change(e: any) {
100
+ emit('change', e);
101
+ }
102
+
103
+ /**
104
+ * 键盘关闭
105
+ */
106
+ function popupClose() {
107
+ emit('update:modelValue', false);
108
+ }
109
+
110
+ /**
111
+ * 输入完成
112
+ */
113
+ function onConfirm() {
114
+ popupClose();
115
+ emit('confirm');
116
+ }
117
+
118
+ /**
119
+ * 取消输入
120
+ */
121
+ function onCancel() {
122
+ popupClose();
123
+ emit('cancel');
124
+ }
125
+
126
+ /**
127
+ * 退格键
128
+ */
129
+ function backspace() {
130
+ emit('backspace');
131
+ }
132
+ </script>
133
+
134
+ <style lang="scss" scoped>
135
+ @import '../../libs/css/style.components.scss';
136
+
137
+ .u-keyboard {
138
+ position: relative;
139
+ z-index: 1003;
140
+ }
141
+
142
+ .u-tooltip {
143
+ @include vue-flex;
144
+ justify-content: space-between;
145
+ }
146
+
147
+ .u-tooltip-item {
148
+ color: #333333;
149
+ flex: 0 0 33.333333%;
150
+ text-align: center;
151
+ padding: 20rpx 10rpx;
152
+ font-size: 28rpx;
153
+ }
154
+
155
+ .u-tooltips-submit {
156
+ text-align: right;
157
+ flex-grow: 1;
158
+ flex-wrap: 0;
159
+ padding-right: 40rpx;
160
+ color: $u-type-primary;
161
+ }
162
+
163
+ .u-tooltip-cancel {
164
+ text-align: left;
165
+ flex-grow: 1;
166
+ flex-wrap: 0;
167
+ padding-left: 40rpx;
168
+ color: #888888;
169
+ }
170
+
171
+ .u-tooltips-submit-hover {
172
+ color: $u-type-success;
173
+ }
174
+
175
+ .u-tooltip-cancel-hover {
176
+ color: #333333;
177
+ }
178
+ </style>
@@ -1,37 +1,37 @@
1
- import type { ExtractPropTypes, PropType } from 'vue';
2
- import type { Effect, ImgMode } from '../../types/global';
3
-
4
- /**
5
- * u-lazy-load 组件 Props 类型定义
6
- * @description 懒加载图片组件属性
7
- */
8
- export const LazyLoadProps = {
9
- /** 用户自定义值,在事件触发时回调,用以区分是哪个图片 */
10
- index: [Number, String],
11
- /** 要显示的图片 */
12
- image: { type: String, default: '' },
13
- /** 图片裁剪模式 */
14
- imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
15
- /** 占位图片路径 */
16
- loadingImg: {
17
- type: String,
18
- default:
19
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1zbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PD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'
20
- },
21
- /** 加载失败的错误占位图 */
22
- errorImg: { type: String },
23
- /** 图片进入可见区域前多少像素时,单位rpx,开始加载图片 */
24
- threshold: { type: [String, Number] as PropType<string | number>, default: 100 },
25
- /** 淡入淡出动画的过渡时间 */
26
- duration: { type: [String, Number] as PropType<string | number>, default: 500 },
27
- /** 渡效果的速度曲线 */
28
- effect: { type: String as PropType<Effect>, default: 'ease-in-out' },
29
- /** 是否使用过渡效果 */
30
- isEffect: { type: Boolean, default: true },
31
- /** 圆角值 */
32
- borderRadius: { type: [String, Number] as PropType<string | number>, default: 0 },
33
- /** 图片高度,单位rpx */
34
- height: { type: [String, Number] as PropType<string | number>, default: 450 }
35
- };
36
-
37
- export type LazyLoadProps = ExtractPropTypes<typeof LazyLoadProps>;
1
+ import type { ExtractPropTypes, PropType } from 'vue';
2
+ import type { Effect, ImgMode } from '../../types/global';
3
+
4
+ /**
5
+ * u-lazy-load 组件 Props 类型定义
6
+ * @description 懒加载图片组件属性
7
+ */
8
+ export const LazyLoadProps = {
9
+ /** 用户自定义值,在事件触发时回调,用以区分是哪个图片 */
10
+ index: [Number, String],
11
+ /** 要显示的图片 */
12
+ image: { type: String, default: '' },
13
+ /** 图片裁剪模式 */
14
+ imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
15
+ /** 占位图片路径 */
16
+ loadingImg: {
17
+ type: String,
18
+ default:
19
+ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1zbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PD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'
20
+ },
21
+ /** 加载失败的错误占位图 */
22
+ errorImg: { type: String },
23
+ /** 图片进入可见区域前多少像素时,单位rpx,开始加载图片 */
24
+ threshold: { type: [String, Number] as PropType<string | number>, default: 100 },
25
+ /** 淡入淡出动画的过渡时间 */
26
+ duration: { type: [String, Number] as PropType<string | number>, default: 500 },
27
+ /** 渡效果的速度曲线 */
28
+ effect: { type: String as PropType<Effect>, default: 'ease-in-out' },
29
+ /** 是否使用过渡效果 */
30
+ isEffect: { type: Boolean, default: true },
31
+ /** 圆角值 */
32
+ borderRadius: { type: [String, Number] as PropType<string | number>, default: 0 },
33
+ /** 图片高度,单位rpx */
34
+ height: { type: [String, Number] as PropType<string | number>, default: 450 }
35
+ };
36
+
37
+ export type LazyLoadProps = ExtractPropTypes<typeof LazyLoadProps>;