From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-keyboard/u-keyboard.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 164 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-keyboard/u-keyboard.vue b/uni_modules/uview-ui/components/u-keyboard/u-keyboard.vue new file mode 100644 index 0000000..14228cb --- /dev/null +++ b/uni_modules/uview-ui/components/u-keyboard/u-keyboard.vue @@ -0,0 +1,164 @@ +<template> + <u-popup + :overlay="overlay" + :closeOnClickOverlay="closeOnClickOverlay" + mode="bottom" + :popup="false" + :show="show" + :safeAreaInsetBottom="safeAreaInsetBottom" + @close="popupClose" + :zIndex="zIndex" + :customStyle="{ + backgroundColor: 'rgb(214, 218, 220)' + }" + > + <view class="u-keyboard"> + <slot /> + <view + class="u-keyboard__tooltip" + v-if="tooltip" + > + <view + hover-class="u-hover-class" + :hover-stay-time="100" + > + <text + class="u-keyboard__tooltip__item u-keyboard__tooltip__cancel" + v-if="showCancel" + @tap="onCancel" + >{{showCancel && cancelText}}</text> + </view> + <view> + <text + v-if="showTips" + class="u-keyboard__tooltip__item u-keyboard__tooltip__tips" + >{{tips ? tips : mode == 'number' ? '鏁板瓧閿洏' : mode == 'card' ? '韬唤璇侀敭鐩�' : '杞︾墝鍙烽敭鐩�'}}</text> + </view> + <view + hover-class="u-hover-class" + :hover-stay-time="100" + > + <text + v-if="showConfirm" + @tap="onConfirm" + class="u-keyboard__tooltip__item u-keyboard__tooltip__submit" + hover-class="u-hover-class" + >{{showConfirm && confirmText}}</text> + </view> + </view> + <template v-if="mode == 'number' || mode == 'card'"> + <u-number-keyboard + :random="random" + @backspace="backspace" + @change="change" + :mode="mode" + :dotDisabled="dotDisabled" + ></u-number-keyboard> + </template> + <template v-else> + <u-car-keyboard + :random="random" + :autoChange="autoChange" + @backspace="backspace" + @change="change" + ></u-car-keyboard> + </template> + </view> + </u-popup> +</template> + +<script> + import props from './props.js'; + + /** + * keyboard 閿洏 + * @description 姝や负uViw鑷畾涔夌殑閿洏闈㈡澘锛屽唴鍚簡鏁板瓧閿洏锛岃溅鐗屽彿閿紝韬唤璇佸彿閿洏3涓ā寮忥紝閮芥湁鍙互鎵撲贡鎸夐敭椤哄簭鐨勯�夐」銆� + * @tutorial https://www.uviewui.com/components/keyboard.html + * @property {String} mode 閿洏绫诲瀷锛岃瀹樼綉鍩烘湰浣跨敤鐨勮鏄� 锛堥粯璁� 'number' 锛� + * @property {Boolean} dotDisabled 鏄惁鏄剧ず"."鎸夐敭锛屽彧鍦╩ode=number鏃舵湁鏁� 锛堥粯璁� false 锛� + * @property {Boolean} tooltip 鏄惁鏄剧ず閿洏椤堕儴宸ュ叿鏉� 锛堥粯璁� true 锛� + * @property {Boolean} showTips 鏄惁鏄剧ず宸ュ叿鏉′腑闂寸殑鎻愮ず 锛堥粯璁� true 锛� + * @property {String} tips 宸ュ叿鏉′腑闂寸殑鎻愮ず鏂囧瓧锛岃涓婃柟鍩烘湰浣跨敤鐨勮鏄庯紝濡備笉闇�瑕侊紝璇蜂紶""绌哄瓧绗� + * @property {Boolean} showCancel 鏄惁鏄剧ず宸ュ叿鏉″乏杈圭殑"鍙栨秷"鎸夐挳 锛堥粯璁� true 锛� + * @property {Boolean} showConfirm 鏄惁鏄剧ず宸ュ叿鏉″彸杈圭殑"瀹屾垚"鎸夐挳锛� 榛樿 true 锛� + * @property {Boolean} random 鏄惁鎵撲贡閿洏鎸夐敭鐨勯『搴� 锛堥粯璁� false 锛� + * @property {Boolean} safeAreaInsetBottom 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯閫傞厤 锛堥粯璁� true 锛� + * @property {Boolean} closeOnClickOverlay 鏄惁鍏佽鐐瑰嚮閬僵鏀惰捣閿洏 锛堥粯璁� true 锛� + * @property {Boolean} show 鎺у埗閿洏鐨勫脊鍑轰笌鏀惰捣锛堥粯璁� false 锛� + * @property {Boolean} overlay 鏄惁鏄剧ず閬僵 锛堥粯璁� true 锛� + * @property {String | Number} zIndex 寮瑰嚭閿洏鐨剒-index鍊� 锛堥粯璁� 1075 锛� + * @property {String} cancelText 鍙栨秷鎸夐挳鐨勬枃瀛� 锛堥粯璁� '鍙栨秷' 锛� + * @property {String} confirmText 纭鎸夐挳鐨勬枃瀛� 锛堥粯璁� '纭' 锛� + * @property {Object} customStyle 鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡 + * @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", + data() { + return { + + } + }, + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + methods: { + change(e) { + this.$emit('change', e); + }, + // 閿洏鍏抽棴 + popupClose() { + this.$emit('close'); + }, + // 杈撳叆瀹屾垚 + onConfirm() { + this.$emit('confirm'); + }, + // 鍙栨秷杈撳叆 + onCancel() { + this.$emit('cancel'); + }, + // 閫�鏍奸敭 + backspace() { + this.$emit('backspace'); + } + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-keyboard { + + &__tooltip { + @include flex; + justify-content: space-between; + background-color: #FFFFFF; + padding: 14px 12px; + + &__item { + color: #333333; + flex: 1; + text-align: center; + font-size: 15px; + } + + &__submit { + text-align: right; + color: $u-primary; + } + + &__cancel { + text-align: left; + color: #888888; + } + + &__tips { + color: $u-tips-color; + } + } + } +</style> -- Gitblit v1.9.3