123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <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';
-
- 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>
|