uview-pro 0.1.0 → 0.2.0
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.
- package/changelog.md +459 -406
- package/components/common/props.ts +22 -0
- package/components/u-action-sheet/types.ts +35 -35
- package/components/u-action-sheet/u-action-sheet.vue +160 -160
- package/components/u-alert-tips/types.ts +39 -39
- package/components/u-alert-tips/u-alert-tips.vue +212 -212
- package/components/u-avatar/types.ts +34 -34
- package/components/u-avatar/u-avatar.vue +193 -193
- package/components/u-avatar-cropper/types.ts +23 -23
- package/components/u-avatar-cropper/u-avatar-cropper.vue +286 -286
- package/components/u-avatar-cropper/weCropper.d.ts +62 -62
- package/components/u-avatar-cropper/weCropper.js +1253 -1253
- package/components/u-avatar-cropper/weCropper.ts +1255 -1255
- package/components/u-back-top/types.ts +39 -39
- package/components/u-back-top/u-back-top.vue +125 -125
- package/components/u-badge/types.ts +36 -36
- package/components/u-badge/u-badge.vue +165 -165
- package/components/u-button/types.ts +66 -66
- package/components/u-button/u-button.vue +556 -556
- package/components/u-calendar/types.ts +63 -63
- package/components/u-calendar/u-calendar.vue +592 -592
- package/components/u-car-keyboard/types.ts +12 -12
- package/components/u-car-keyboard/u-car-keyboard.vue +234 -234
- package/components/u-card/types.ts +59 -59
- package/components/u-card/u-card.vue +194 -194
- package/components/u-cell-group/types.ts +17 -17
- package/components/u-cell-group/u-cell-group.vue +50 -50
- package/components/u-cell-item/types.ts +54 -54
- package/components/u-cell-item/u-cell-item.vue +202 -202
- package/components/u-checkbox/types.ts +31 -31
- package/components/u-checkbox/u-checkbox.vue +267 -267
- package/components/u-checkbox-group/types.ts +32 -32
- package/components/u-checkbox-group/u-checkbox-group.vue +79 -79
- package/components/u-circle-progress/types.ts +52 -52
- package/components/u-circle-progress/u-circle-progress.vue +187 -187
- package/components/u-city-select/types.ts +20 -20
- package/components/u-city-select/u-city-select.vue +236 -236
- package/components/u-col/types.ts +30 -30
- package/components/u-col/u-col.vue +123 -123
- package/components/u-collapse/types.ts +33 -31
- package/components/u-collapse/u-collapse.vue +69 -68
- package/components/u-collapse-item/types.ts +27 -25
- package/components/u-collapse-item/u-collapse-item.vue +201 -194
- package/components/u-column-notice/types.ts +48 -48
- package/components/u-column-notice/u-column-notice.vue +176 -176
- package/components/u-count-down/types.ts +42 -42
- package/components/u-count-down/u-count-down.vue +258 -258
- package/components/u-count-to/types.ts +32 -32
- package/components/u-count-to/u-count-to.vue +241 -241
- package/components/u-divider/types.ts +31 -31
- package/components/u-divider/u-divider.vue +121 -121
- package/components/u-dropdown/types.ts +32 -32
- package/components/u-dropdown/u-dropdown.vue +289 -289
- package/components/u-dropdown-item/types.ts +27 -27
- package/components/u-dropdown-item/u-dropdown-item.vue +123 -123
- package/components/u-empty/types.ts +36 -36
- package/components/u-empty/u-empty.vue +88 -88
- package/components/u-field/types.ts +69 -69
- package/components/u-field/u-field.vue +354 -354
- package/components/u-form/u-form.vue +132 -132
- package/components/u-form-item/u-form-item.vue +417 -417
- package/components/u-full-screen/types.ts +14 -14
- package/components/u-full-screen/u-full-screen.vue +82 -82
- package/components/u-gap/types.ts +18 -18
- package/components/u-gap/u-gap.vue +40 -40
- package/components/u-grid/types.ts +19 -19
- package/components/u-grid/u-grid.vue +93 -93
- package/components/u-grid-item/types.ts +16 -16
- package/components/u-grid-item/u-grid-item.vue +130 -130
- package/components/u-icon/types.ts +62 -62
- package/components/u-icon/u-icon.vue +281 -274
- package/components/u-image/types.ts +51 -51
- package/components/u-image/u-image.vue +222 -222
- package/components/u-index-anchor/types.ts +16 -16
- package/components/u-index-anchor/u-index-anchor.vue +86 -86
- package/components/u-index-list/types.ts +43 -43
- package/components/u-index-list/u-index-list.vue +355 -355
- package/components/u-input/types.ts +140 -140
- package/components/u-input/u-input.vue +264 -255
- package/components/u-keyboard/types.ts +40 -40
- package/components/u-keyboard/u-keyboard.vue +158 -158
- package/components/u-lazy-load/types.ts +37 -37
- package/components/u-lazy-load/u-lazy-load.vue +233 -233
- package/components/u-line/types.ts +44 -44
- package/components/u-line/u-line.vue +59 -59
- package/components/u-line-progress/types.ts +58 -58
- package/components/u-line-progress/u-line-progress.vue +109 -109
- package/components/u-link/types.ts +43 -43
- package/components/u-link/u-link.vue +75 -75
- package/components/u-loading/types.ts +35 -35
- package/components/u-loading/u-loading.vue +90 -90
- package/components/u-loading-popup/types.ts +26 -26
- package/components/u-loading-popup/u-loading-popup.vue +239 -239
- package/components/u-loadmore/types.ts +79 -79
- package/components/u-loadmore/u-loadmore.vue +140 -140
- package/components/u-mask/types.ts +43 -43
- package/components/u-mask/u-mask.vue +106 -106
- package/components/u-message-input/types.ts +74 -74
- package/components/u-message-input/u-message-input.vue +255 -255
- package/components/u-modal/types.ts +118 -118
- package/components/u-modal/u-modal.vue +204 -204
- package/components/u-navbar/types.ts +103 -103
- package/components/u-navbar/u-navbar.vue +226 -226
- package/components/u-no-network/image.ts +2 -2
- package/components/u-no-network/types.ts +28 -28
- package/components/u-no-network/u-no-network.vue +290 -290
- package/components/u-notice-bar/types.ts +111 -111
- package/components/u-notice-bar/u-notice-bar.vue +174 -174
- package/components/u-number-box/types.ts +42 -42
- package/components/u-number-box/u-number-box.vue +312 -312
- package/components/u-number-keyboard/types.ts +26 -26
- package/components/u-number-keyboard/u-number-keyboard.vue +166 -166
- package/components/u-picker/types.ts +123 -123
- package/components/u-picker/u-picker.vue +637 -637
- package/components/u-popup/types.ts +59 -59
- package/components/u-popup/u-popup.vue +359 -359
- package/components/u-radio/types.ts +25 -25
- package/components/u-radio/u-radio.vue +258 -258
- package/components/u-radio-group/types.ts +29 -29
- package/components/u-radio-group/u-radio-group.vue +98 -98
- package/components/u-rate/types.ts +40 -40
- package/components/u-rate/u-rate.vue +234 -234
- package/components/u-read-more/types.ts +35 -35
- package/components/u-read-more/u-read-more.vue +150 -150
- package/components/u-row/types.ts +20 -20
- package/components/u-row/u-row.vue +87 -87
- package/components/u-row-notice/types.ts +39 -39
- package/components/u-row-notice/u-row-notice.vue +213 -213
- package/components/u-safe-bottom/u-safe-bottom.vue +46 -46
- package/components/u-search/types.ts +53 -53
- package/components/u-search/u-search.vue +256 -256
- package/components/u-section/types.ts +32 -32
- package/components/u-section/u-section.vue +125 -125
- package/components/u-select/types.ts +43 -43
- package/components/u-select/u-select.vue +361 -361
- package/components/u-skeleton/types.ts +20 -20
- package/components/u-skeleton/u-skeleton.vue +205 -205
- package/components/u-slider/types.ts +32 -32
- package/components/u-slider/u-slider.vue +238 -238
- package/components/u-status-bar/u-status-bar.vue +65 -65
- package/components/u-steps/types.ts +28 -28
- package/components/u-steps/u-steps.vue +160 -160
- package/components/u-sticky/types.ts +22 -22
- package/components/u-sticky/u-sticky.vue +159 -159
- package/components/u-subsection/types.ts +36 -36
- package/components/u-subsection/u-subsection.vue +328 -328
- package/components/u-swipe-action/types.ts +50 -50
- package/components/u-swipe-action/u-swipe-action.vue +253 -253
- package/components/u-swiper/types.ts +47 -47
- package/components/u-swiper/u-swiper.vue +266 -266
- package/components/u-switch/types.ts +28 -28
- package/components/u-switch/u-switch.vue +136 -136
- package/components/u-tabbar/types.ts +36 -36
- package/components/u-tabbar/u-tabbar.vue +280 -280
- package/components/u-table/types.ts +25 -25
- package/components/u-table/u-table.vue +55 -55
- package/components/u-tabs/types.ts +51 -51
- package/components/u-tabs/u-tabs.vue +284 -284
- package/components/u-tabs-swiper/types.ts +53 -53
- package/components/u-tabs-swiper/u-tabs-swiper.vue +379 -379
- package/components/u-tag/types.ts +37 -37
- package/components/u-tag/u-tag.vue +244 -244
- package/components/u-td/types.ts +12 -12
- package/components/u-td/u-td.vue +87 -87
- package/components/u-text/types.ts +69 -0
- package/components/u-text/u-text.vue +326 -0
- package/components/u-th/types.ts +12 -12
- package/components/u-th/u-th.vue +81 -81
- package/components/u-time-line/u-time-line.vue +39 -39
- package/components/u-time-line-item/types.ts +14 -14
- package/components/u-time-line-item/u-time-line-item.vue +78 -78
- package/components/u-toast/types.ts +36 -36
- package/components/u-toast/u-toast.vue +233 -233
- package/components/u-top-tips/types.ts +14 -14
- package/components/u-top-tips/u-top-tips.vue +113 -113
- package/components/u-tr/types.ts +8 -8
- package/components/u-tr/u-tr.vue +24 -24
- package/components/u-upload/types.ts +74 -74
- package/components/u-upload/u-upload.vue +545 -545
- package/components/u-verification-code/types.ts +22 -22
- package/components/u-verification-code/u-verification-code.vue +164 -164
- package/components/u-waterfall/types.ts +16 -16
- package/components/u-waterfall/u-waterfall.vue +175 -175
- package/iconfont.css +912 -912
- package/index.scss +25 -23
- package/index.ts +29 -204
- package/libs/config/config.ts +26 -26
- package/libs/config/zIndex.ts +37 -37
- package/libs/css/color.scss +155 -155
- package/libs/css/common.scss +178 -178
- package/libs/css/style.components.scss +16 -7
- package/libs/css/style.h5.scss +8 -8
- package/libs/css/style.mp.scss +72 -72
- package/libs/css/style.nvue.scss +15 -3
- package/libs/css/style.vue.scss +188 -177
- package/libs/function/$parent.ts +21 -21
- package/libs/function/addUnit.ts +13 -13
- package/libs/function/color.ts +37 -71
- package/libs/function/colorGradient.ts +125 -125
- package/libs/function/debounce.ts +28 -28
- package/libs/function/deepClone.ts +39 -39
- package/libs/function/deepMerge.ts +34 -34
- package/libs/function/getParent.ts +59 -59
- package/libs/function/getRect.ts +26 -26
- package/libs/function/guid.ts +42 -42
- package/libs/function/md5.ts +391 -391
- package/libs/function/parent.ts +21 -21
- package/libs/function/queryParams.ts +60 -60
- package/libs/function/random.ts +16 -16
- package/libs/function/randomArray.ts +11 -11
- package/libs/function/route.ts +118 -118
- package/libs/function/styleUtils.ts +83 -83
- package/libs/function/sys.ts +15 -15
- package/libs/function/test.ts +285 -229
- package/libs/function/throttle.ts +31 -31
- package/libs/function/timeFormat.ts +54 -54
- package/libs/function/timeFrom.ts +48 -48
- package/libs/function/toast.ts +14 -14
- package/libs/function/trim.ts +21 -21
- package/libs/function/type2icon.ts +36 -36
- package/libs/hooks/index.ts +3 -0
- package/libs/hooks/useEmitter.ts +77 -77
- package/libs/hooks/useParent.ts +31 -29
- package/libs/hooks/useRect.ts +33 -0
- package/libs/index.ts +291 -0
- package/libs/request/auto-http.ts +76 -76
- package/libs/request/index.ts +223 -223
- package/libs/store/index.ts +88 -88
- package/libs/util/area.ts +3771 -3771
- package/libs/util/async-validator.d.ts +62 -62
- package/libs/util/async-validator.js +1368 -1368
- package/libs/util/city.ts +432 -432
- package/libs/util/emitter.ts +102 -102
- package/libs/util/mitt.ts +115 -115
- package/libs/util/parent.ts +20 -20
- package/libs/util/province.ts +37 -37
- package/package.json +1 -1
- package/readme.md +237 -237
- package/theme.scss +38 -38
- package/types/components.d.ts +96 -95
- package/types/global.d.ts +255 -221
- package/types/ignore-errors.d.ts +30 -30
- package/types/index.d.ts +19 -90
- package/types/uni-app.d.ts +63 -63
|
@@ -1,158 +1,158 @@
|
|
|
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 v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
|
|
22
|
-
{{ confirmBtn ? confirmText : '' }}
|
|
23
|
-
</view>
|
|
24
|
-
</view>
|
|
25
|
-
<block v-if="mode == 'number' || mode == 'card'">
|
|
26
|
-
<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
|
|
27
|
-
</block>
|
|
28
|
-
<block v-else>
|
|
29
|
-
<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
|
|
30
|
-
</block>
|
|
31
|
-
</u-popup>
|
|
32
|
-
</template>
|
|
33
|
-
|
|
34
|
-
<script setup lang="ts">
|
|
35
|
-
import { KeyboardProps } from './types';
|
|
36
|
-
import { computed } from 'vue';
|
|
37
|
-
|
|
38
|
-
defineOptions({
|
|
39
|
-
name: 'u-keyboard'
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* keyboard 键盘
|
|
44
|
-
* @description 此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。
|
|
45
|
-
* @tutorial https://uviewpro.cn/zh/components/keyboard.html
|
|
46
|
-
* @property {String} mode 键盘类型,见官网基本使用的说明(默认number)
|
|
47
|
-
* @property {Boolean} dot-enabled 是否显示"."按键,只在mode=number时有效(默认true)
|
|
48
|
-
* @property {Boolean} tooltip 是否显示键盘顶部工具条(默认true)
|
|
49
|
-
* @property {String} tips 工具条中间的提示文字,见上方基本使用的说明,如不需要,请传""空字符
|
|
50
|
-
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true)
|
|
51
|
-
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true)
|
|
52
|
-
* @property {Boolean} mask 是否显示遮罩(默认true)
|
|
53
|
-
* @property {String} confirm-text 确认按钮的文字
|
|
54
|
-
* @property {String} cancel-text 取消按钮的文字
|
|
55
|
-
* @property {Number String} z-index 弹出键盘的z-index值(默认1075)
|
|
56
|
-
* @property {Boolean} random 是否打乱键盘按键的顺序(默认false)
|
|
57
|
-
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
|
|
58
|
-
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘(默认true)
|
|
59
|
-
* @event {Function} change 按键被点击(不包含退格键被点击)
|
|
60
|
-
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
|
|
61
|
-
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
|
|
62
|
-
* @event {Function} backspace 键盘退格键被点击
|
|
63
|
-
* @example <u-keyboard mode="number" v-model="show"></u-keyboard>
|
|
64
|
-
*/
|
|
65
|
-
|
|
66
|
-
const props = defineProps(KeyboardProps);
|
|
67
|
-
const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
|
|
68
|
-
|
|
69
|
-
const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
|
|
70
|
-
|
|
71
|
-
const popupValue = computed({
|
|
72
|
-
get: () => props.modelValue,
|
|
73
|
-
set: (val: boolean) => emit('update:modelValue', val)
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* 按键被点击(不包含退格键被点击)
|
|
78
|
-
*/
|
|
79
|
-
function change(e: any) {
|
|
80
|
-
emit('change', e);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* 键盘关闭
|
|
85
|
-
*/
|
|
86
|
-
function popupClose() {
|
|
87
|
-
emit('update:modelValue', false);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* 输入完成
|
|
92
|
-
*/
|
|
93
|
-
function onConfirm() {
|
|
94
|
-
popupClose();
|
|
95
|
-
emit('confirm');
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* 取消输入
|
|
100
|
-
*/
|
|
101
|
-
function onCancel() {
|
|
102
|
-
popupClose();
|
|
103
|
-
emit('cancel');
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* 退格键
|
|
108
|
-
*/
|
|
109
|
-
function backspace() {
|
|
110
|
-
emit('backspace');
|
|
111
|
-
}
|
|
112
|
-
</script>
|
|
113
|
-
|
|
114
|
-
<style lang="scss" scoped>
|
|
115
|
-
@import '../../libs/css/style.components.scss';
|
|
116
|
-
|
|
117
|
-
.u-keyboard {
|
|
118
|
-
position: relative;
|
|
119
|
-
z-index: 1003;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.u-tooltip {
|
|
123
|
-
@include vue-flex;
|
|
124
|
-
justify-content: space-between;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.u-tooltip-item {
|
|
128
|
-
color: #333333;
|
|
129
|
-
flex: 0 0 33.333333%;
|
|
130
|
-
text-align: center;
|
|
131
|
-
padding: 20rpx 10rpx;
|
|
132
|
-
font-size: 28rpx;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.u-tooltips-submit {
|
|
136
|
-
text-align: right;
|
|
137
|
-
flex-grow: 1;
|
|
138
|
-
flex-wrap: 0;
|
|
139
|
-
padding-right: 40rpx;
|
|
140
|
-
color: $u-type-primary;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.u-tooltip-cancel {
|
|
144
|
-
text-align: left;
|
|
145
|
-
flex-grow: 1;
|
|
146
|
-
flex-wrap: 0;
|
|
147
|
-
padding-left: 40rpx;
|
|
148
|
-
color: #888888;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.u-tooltips-submit-hover {
|
|
152
|
-
color: $u-type-success;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.u-tooltip-cancel-hover {
|
|
156
|
-
color: #333333;
|
|
157
|
-
}
|
|
158
|
-
</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 v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
|
|
22
|
+
{{ confirmBtn ? confirmText : '' }}
|
|
23
|
+
</view>
|
|
24
|
+
</view>
|
|
25
|
+
<block v-if="mode == 'number' || mode == 'card'">
|
|
26
|
+
<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
|
|
27
|
+
</block>
|
|
28
|
+
<block v-else>
|
|
29
|
+
<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
|
|
30
|
+
</block>
|
|
31
|
+
</u-popup>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { KeyboardProps } from './types';
|
|
36
|
+
import { computed } from 'vue';
|
|
37
|
+
|
|
38
|
+
defineOptions({
|
|
39
|
+
name: 'u-keyboard'
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* keyboard 键盘
|
|
44
|
+
* @description 此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。
|
|
45
|
+
* @tutorial https://uviewpro.cn/zh/components/keyboard.html
|
|
46
|
+
* @property {String} mode 键盘类型,见官网基本使用的说明(默认number)
|
|
47
|
+
* @property {Boolean} dot-enabled 是否显示"."按键,只在mode=number时有效(默认true)
|
|
48
|
+
* @property {Boolean} tooltip 是否显示键盘顶部工具条(默认true)
|
|
49
|
+
* @property {String} tips 工具条中间的提示文字,见上方基本使用的说明,如不需要,请传""空字符
|
|
50
|
+
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true)
|
|
51
|
+
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true)
|
|
52
|
+
* @property {Boolean} mask 是否显示遮罩(默认true)
|
|
53
|
+
* @property {String} confirm-text 确认按钮的文字
|
|
54
|
+
* @property {String} cancel-text 取消按钮的文字
|
|
55
|
+
* @property {Number String} z-index 弹出键盘的z-index值(默认1075)
|
|
56
|
+
* @property {Boolean} random 是否打乱键盘按键的顺序(默认false)
|
|
57
|
+
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
|
|
58
|
+
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘(默认true)
|
|
59
|
+
* @event {Function} change 按键被点击(不包含退格键被点击)
|
|
60
|
+
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
|
|
61
|
+
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
|
|
62
|
+
* @event {Function} backspace 键盘退格键被点击
|
|
63
|
+
* @example <u-keyboard mode="number" v-model="show"></u-keyboard>
|
|
64
|
+
*/
|
|
65
|
+
|
|
66
|
+
const props = defineProps(KeyboardProps);
|
|
67
|
+
const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
|
|
68
|
+
|
|
69
|
+
const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
|
|
70
|
+
|
|
71
|
+
const popupValue = computed({
|
|
72
|
+
get: () => props.modelValue,
|
|
73
|
+
set: (val: boolean) => emit('update:modelValue', val)
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* 按键被点击(不包含退格键被点击)
|
|
78
|
+
*/
|
|
79
|
+
function change(e: any) {
|
|
80
|
+
emit('change', e);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* 键盘关闭
|
|
85
|
+
*/
|
|
86
|
+
function popupClose() {
|
|
87
|
+
emit('update:modelValue', false);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* 输入完成
|
|
92
|
+
*/
|
|
93
|
+
function onConfirm() {
|
|
94
|
+
popupClose();
|
|
95
|
+
emit('confirm');
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* 取消输入
|
|
100
|
+
*/
|
|
101
|
+
function onCancel() {
|
|
102
|
+
popupClose();
|
|
103
|
+
emit('cancel');
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* 退格键
|
|
108
|
+
*/
|
|
109
|
+
function backspace() {
|
|
110
|
+
emit('backspace');
|
|
111
|
+
}
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
<style lang="scss" scoped>
|
|
115
|
+
@import '../../libs/css/style.components.scss';
|
|
116
|
+
|
|
117
|
+
.u-keyboard {
|
|
118
|
+
position: relative;
|
|
119
|
+
z-index: 1003;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.u-tooltip {
|
|
123
|
+
@include vue-flex;
|
|
124
|
+
justify-content: space-between;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.u-tooltip-item {
|
|
128
|
+
color: #333333;
|
|
129
|
+
flex: 0 0 33.333333%;
|
|
130
|
+
text-align: center;
|
|
131
|
+
padding: 20rpx 10rpx;
|
|
132
|
+
font-size: 28rpx;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.u-tooltips-submit {
|
|
136
|
+
text-align: right;
|
|
137
|
+
flex-grow: 1;
|
|
138
|
+
flex-wrap: 0;
|
|
139
|
+
padding-right: 40rpx;
|
|
140
|
+
color: $u-type-primary;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.u-tooltip-cancel {
|
|
144
|
+
text-align: left;
|
|
145
|
+
flex-grow: 1;
|
|
146
|
+
flex-wrap: 0;
|
|
147
|
+
padding-left: 40rpx;
|
|
148
|
+
color: #888888;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.u-tooltips-submit-hover {
|
|
152
|
+
color: $u-type-success;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.u-tooltip-cancel-hover {
|
|
156
|
+
color: #333333;
|
|
157
|
+
}
|
|
158
|
+
</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>;
|