From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期一, 16 十月 2023 09:22:23 +0800 Subject: [PATCH] 小程序 --- minipro_standard/uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue | 196 ------------------------------------------------- 1 files changed, 0 insertions(+), 196 deletions(-) diff --git a/minipro_standard/uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue b/minipro_standard/uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue index 4f505c6..e69de29 100644 --- a/minipro_standard/uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue +++ b/minipro_standard/uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue @@ -1,196 +0,0 @@ -<template> - <view - class="u-keyboard" - @touchmove.stop.prevent="noop" - > - <view - class="u-keyboard__button-wrapper" - v-for="(item, index) in numList" - :key="index" - > - <view - class="u-keyboard__button-wrapper__button" - :style="[itemStyle(index)]" - @tap="keyboardClick(item)" - hover-class="u-hover-class" - :hover-stay-time="200" - > - <text class="u-keyboard__button-wrapper__button__text">{{ item }}</text> - </view> - </view> - <view - class="u-keyboard__button-wrapper" - > - <view - class="u-keyboard__button-wrapper__button u-keyboard__button-wrapper__button--gray" - hover-class="u-hover-class" - :hover-stay-time="200" - @touchstart.stop="backspaceClick" - @touchend="clearTimer" - > - <u-icon - name="backspace" - color="#303133" - size="28" - ></u-icon> - </view> - </view> - </view> -</template> - -<script> - import props from './props.js'; - - /** - * keyboard 閿洏缁勪欢 - * @description - * @tutorial - * @property {String} mode 閿洏鐨勭被鍨嬶紝number-鏁板瓧閿洏锛宑ard-韬唤璇侀敭鐩� - * @property {Boolean} dotDisabled 鏄惁鏄剧ず閿洏鐨�"."绗﹀彿 - * @property {Boolean} random 鏄惁鎵撲贡閿洏鎸夐敭鐨勯『搴� - * @event {Function} change 鐐瑰嚮閿洏瑙﹀彂 - * @event {Function} backspace 鐐瑰嚮閫�鏍奸敭瑙﹀彂 - * @example - */ - export default { - mixins: [uni.$u.mpMixin, uni.$u.mixin, props], - data() { - return { - backspace: 'backspace', // 閫�鏍奸敭鍐呭 - dot: '.', // 鐐� - timer: null, // 闀挎寜澶氭鍒犻櫎鐨勪簨浠剁洃鍚� - cardX: 'X' // 韬唤璇佺殑X绗﹀彿 - }; - }, - computed: { - // 閿洏闇�瑕佹樉绀虹殑鍐呭 - numList() { - let tmp = []; - if (this.dotDisabled && this.mode == 'number') { - if (!this.random) { - return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; - } else { - return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]); - } - } else if (!this.dotDisabled && this.mode == 'number') { - if (!this.random) { - return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]; - } else { - return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]); - } - } else if (this.mode == 'card') { - if (!this.random) { - return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]; - } else { - return uni.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]); - } - } - }, - // 鎸夐敭鐨勬牱寮忥紝鍦ㄩ潪涔卞簭&&鏁板瓧閿洏&&涓嶆樉绀虹偣鎸夐挳鏃讹紝index涓�9鏃讹紝鎸夐敭鍗犱綅涓や釜绌洪棿 - itemStyle() { - return index => { - let style = {}; - if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx'; - return style; - }; - }, - // 鏄惁璁╂寜閿樉绀虹伆鑹诧紝鍙湪闈炰贡搴�&&鏁板瓧閿洏&&涓斿厑璁哥偣鎸夐敭鐨勬椂鍊� - btnBgGray() { - return index => { - if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this - .dotDisabled))) return true; - else return false; - }; - }, - }, - created() { - - }, - methods: { - // 鐐瑰嚮閫�鏍奸敭 - backspaceClick() { - this.$emit('backspace'); - clearInterval(this.timer); //鍐嶆娓呯┖瀹氭椂鍣紝闃叉閲嶅娉ㄥ唽瀹氭椂鍣� - this.timer = null; - this.timer = setInterval(() => { - this.$emit('backspace'); - }, 250); - }, - clearTimer() { - clearInterval(this.timer); - this.timer = null; - }, - // 鑾峰彇閿洏鏄剧ず鐨勫唴瀹� - keyboardClick(val) { - // 鍏佽閿洏鏄剧ず鐐规ā寮忓拰瑙﹀彂闈炵偣鎸夐敭鏃讹紝灏嗗唴瀹硅浆涓烘暟瀛楃被鍨� - if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val); - this.$emit('change', val); - } - } - }; -</script> - -<style lang="scss" scoped> - @import "../../libs/css/components.scss"; - $u-number-keyboard-background-color:rgb(224, 228, 230) !default; - $u-number-keyboard-padding:8px 10rpx 8px 10rpx !default; - $u-number-keyboard-button-width:222rpx !default; - $u-number-keyboard-button-margin:4px 6rpx !default; - $u-number-keyboard-button-border-top-left-radius:4px !default; - $u-number-keyboard-button-border-top-right-radius:4px !default; - $u-number-keyboard-button-border-bottom-left-radius:4px !default; - $u-number-keyboard-button-border-bottom-right-radius:4px !default; - $u-number-keyboard-button-height: 90rpx!default; - $u-number-keyboard-button-background-color:#FFFFFF !default; - $u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default; - $u-number-keyboard-text-font-size:20px !default; - $u-number-keyboard-text-font-weight:500 !default; - $u-number-keyboard-text-color:$u-main-color !default; - $u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default; - $u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default; - - .u-keyboard { - @include flex; - flex-direction: row; - justify-content: space-around; - background-color: $u-number-keyboard-background-color; - flex-wrap: wrap; - padding: $u-number-keyboard-padding; - - &__button-wrapper { - box-shadow: $u-number-keyboard-button-box-shadow; - margin: $u-number-keyboard-button-margin; - border-top-left-radius: $u-number-keyboard-button-border-top-left-radius; - border-top-right-radius: $u-number-keyboard-button-border-top-right-radius; - border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius; - border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius; - - &__button { - width: $u-number-keyboard-button-width; - height: $u-number-keyboard-button-height; - background-color: $u-number-keyboard-button-background-color; - @include flex; - justify-content: center; - align-items: center; - border-top-left-radius: $u-number-keyboard-button-border-top-left-radius; - border-top-right-radius: $u-number-keyboard-button-border-top-right-radius; - border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius; - border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius; - - &__text { - font-size: $u-number-keyboard-text-font-size; - font-weight: $u-number-keyboard-text-font-weight; - color: $u-number-keyboard-text-color; - } - - &--gray { - background-color: $u-number-keyboard-gray-background-color; - } - } - } - } - - .u-hover-class { - background-color: $u-number-keyboard-u-hover-class-background-color; - } -</style> -- Gitblit v1.9.3