From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-keyboard/u-keyboard.vue | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 217 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-keyboard/u-keyboard.vue b/uview-ui/components/u-keyboard/u-keyboard.vue
new file mode 100644
index 0000000..1904a2b
--- /dev/null
+++ b/uview-ui/components/u-keyboard/u-keyboard.vue
@@ -0,0 +1,217 @@
+<template>
+ <u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
+ :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :zIndex="uZIndex">
+ <slot />
+ <view class="u-tooltip" v-if="tooltip">
+ <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
+ {{cancelBtn ? cancelText : ''}}
+ </view>
+ <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
+ {{tips ? tips : mode == 'number' ? '鏁板瓧閿洏' : mode == 'card' ? '韬唤璇侀敭鐩�' : '杞︾墝鍙烽敭鐩�'}}
+ </view>
+ <view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
+ {{confirmBtn ? confirmText : ''}}
+ </view>
+ </view>
+ <block v-if="mode == 'number' || mode == 'card'">
+ <u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
+ </block>
+ <block v-else>
+ <u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
+ </block>
+ </u-popup>
+</template>
+
+<script>
+ /**
+ * keyboard 閿洏
+ * @description 姝や负uViw鑷畾涔夌殑閿洏闈㈡澘锛屽唴鍚簡鏁板瓧閿洏锛岃溅鐗屽彿閿紝韬唤璇佸彿閿洏3涓ā寮忥紝閮芥湁鍙互鎵撲贡鎸夐敭椤哄簭鐨勯�夐」銆�
+ * @tutorial https://www.uviewui.com/components/keyboard.html
+ * @property {String} mode 閿洏绫诲瀷锛岃瀹樼綉鍩烘湰浣跨敤鐨勮鏄庯紙榛樿number锛�
+ * @property {Boolean} dot-enabled 鏄惁鏄剧ず"."鎸夐敭锛屽彧鍦╩ode=number鏃舵湁鏁堬紙榛樿true锛�
+ * @property {Boolean} tooltip 鏄惁鏄剧ず閿洏椤堕儴宸ュ叿鏉★紙榛樿true锛�
+ * @property {String} tips 宸ュ叿鏉′腑闂寸殑鎻愮ず鏂囧瓧锛岃涓婃柟鍩烘湰浣跨敤鐨勮鏄庯紝濡備笉闇�瑕侊紝璇蜂紶""绌哄瓧绗�
+ * @property {Boolean} cancel-btn 鏄惁鏄剧ず宸ュ叿鏉″乏杈圭殑"鍙栨秷"鎸夐挳锛堥粯璁rue锛�
+ * @property {Boolean} confirm-btn 鏄惁鏄剧ず宸ュ叿鏉″彸杈圭殑"瀹屾垚"鎸夐挳锛堥粯璁rue锛�
+ * @property {Boolean} mask 鏄惁鏄剧ず閬僵锛堥粯璁rue锛�
+ * @property {String} confirm-text 纭鎸夐挳鐨勬枃瀛�
+ * @property {String} cancel-text 鍙栨秷鎸夐挳鐨勬枃瀛�
+ * @property {Number String} z-index 寮瑰嚭閿洏鐨剒-index鍊硷紙榛樿1075锛�
+ * @property {Boolean} random 鏄惁鎵撲贡閿洏鎸夐敭鐨勯『搴忥紙榛樿false锛�
+ * @property {Boolean} safe-area-inset-bottom 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯閫傞厤锛堥粯璁alse锛�
+ * @property {Boolean} mask-close-able 鏄惁鍏佽鐐瑰嚮閬僵鏀惰捣閿洏锛堥粯璁rue锛�
+ * @event {Function} change 鎸夐敭琚偣鍑�(涓嶅寘鍚��鏍奸敭琚偣鍑�)
+ * @event {Function} cancel 閿洏椤堕儴宸ュ叿鏉″乏杈圭殑"鍙栨秷"鎸夐挳琚偣鍑�
+ * @event {Function} confirm 閿洏椤堕儴宸ュ叿鏉″彸杈圭殑"瀹屾垚"鎸夐挳琚偣鍑�
+ * @event {Function} backspace 閿洏閫�鏍奸敭琚偣鍑�
+ * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
+ */
+ export default {
+ name: "u-keyboard",
+ props: {
+ // 閿洏鐨勭被鍨嬶紝number-鏁板瓧閿洏锛宑ard-韬唤璇侀敭鐩橈紝car-杞︾墝鍙烽敭鐩�
+ mode: {
+ type: String,
+ default: 'number'
+ },
+ // 鏄惁鏄剧ず閿洏鐨�"."绗﹀彿
+ dotEnabled: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず椤堕儴宸ュ叿鏉�
+ tooltip: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず宸ュ叿鏉′腑闂寸殑鎻愮ず
+ showTips: {
+ type: Boolean,
+ default: true
+ },
+ // 宸ュ叿鏉′腑闂寸殑鎻愮ず鏂囧瓧
+ tips: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず宸ュ叿鏉″乏杈圭殑"鍙栨秷"鎸夐挳
+ cancelBtn: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず宸ュ叿鏉″彸杈圭殑"瀹屾垚"鎸夐挳
+ confirmBtn: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鎵撲贡閿洏鎸夐敭鐨勯『搴�
+ random: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯閫傞厤锛屽紑鍚殑璇濓紝浼氬湪iPhoneX鏈哄瀷搴曢儴娣诲姞涓�瀹氱殑鍐呰竟璺�
+ safeAreaInsetBottom: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鍏佽閫氳繃鐐瑰嚮閬僵鍏抽棴閿洏
+ maskCloseAble: {
+ type: Boolean,
+ default: true
+ },
+ // 閫氳繃鍙屽悜缁戝畾鎺у埗閿洏鐨勫脊鍑轰笌鏀惰捣
+ value: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鏄剧ず閬僵锛屾煇浜涙椂鍊欐暟瀛楅敭鐩樻椂锛岀敤鎴峰笇鏈涚湅鍒拌嚜宸辩殑鏁板�硷紝鎵�浠ュ彲鑳戒笉鎯宠閬僵
+ mask: {
+ type: Boolean,
+ default: true
+ },
+ // z-index鍊�
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ },
+ // 鍙栨秷鎸夐挳鐨勬枃瀛�
+ cancelText: {
+ type: String,
+ default: '鍙栨秷'
+ },
+ // 纭鎸夐挳鐨勬枃瀛�
+ confirmText: {
+ type: String,
+ default: '纭'
+ }
+ },
+ data() {
+ return {
+ //show: false
+ }
+ },
+ computed: {
+ uZIndex() {
+ return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+ }
+ },
+ methods: {
+ change(e) {
+ this.$emit('change', e);
+ },
+ // 閿洏鍏抽棴
+ popupClose() {
+ // 閫氳繃鍙戦�乮nput杩欎釜鐗规畩鐨勪簨浠跺悕锛屽彲浠ヤ慨鏀圭埗缁勪欢浼犵粰props鐨剉alue鐨勫彉閲忥紝涔熷嵆鍙屽悜缁戝畾
+ this.$emit('input', false);
+ },
+ // 杈撳叆瀹屾垚
+ onConfirm() {
+ this.popupClose();
+ this.$emit('confirm');
+ },
+ // 鍙栨秷杈撳叆
+ onCancel() {
+ this.popupClose();
+ this.$emit('cancel');
+ },
+ // 閫�鏍奸敭
+ backspace() {
+ this.$emit('backspace');
+ },
+ // 鍏抽棴閿洏
+ // close() {
+ // this.show = false;
+ // },
+ // // 鎵撳紑閿洏
+ // open() {
+ // this.show = true;
+ // }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-keyboard {
+ position: relative;
+ z-index: 1003;
+ }
+
+ .u-tooltip {
+ @include vue-flex;
+ justify-content: space-between;
+ }
+
+ .u-tooltip-item {
+ color: #333333;
+ flex: 0 0 33.333333%;
+ text-align: center;
+ padding: 20rpx 10rpx;
+ font-size: 28rpx;
+ }
+
+ .u-tooltips-submit {
+ text-align: right;
+ flex-grow: 1;
+ flex-wrap: 0;
+ padding-right: 40rpx;
+ color: $u-type-primary;
+ }
+
+ .u-tooltip-cancel {
+ text-align: left;
+ flex-grow: 1;
+ flex-wrap: 0;
+ padding-left: 40rpx;
+ color: #888888;
+ }
+
+ .u-tooltips-submit-hover {
+ color: $u-type-success;
+ }
+
+ .u-tooltip-cancel-hover {
+ color: #333333;
+ }
+</style>
--
Gitblit v1.9.3