shuolol/kccharge-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
dev
2025-10-28 09:25:46 +08:00
commit 9431e325df
1089 changed files with 143917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uv-keyboard/changelog.md
+17
View File
@@ -0,0 +1,17 @@
## 1.0.5（2023-10-12）
1. 增加disKeys参数，mode = "car"下，被禁用的键，如：['I','O']
2. 增加customabc参数，mode = "car"下，是否启用自定义中英文切换内容模式，为了兼容支付宝等小程序不兼容嵌套插槽，导致同时显示自定义内容和原始内容
3. 增加ref方法changeCarMode，mode = "car"下， 调用此方法可以切换中英文模式
4. 增加@changeCarInputMode，mode = "car"下，调用此方法可以进行切换中英文
5. 增加插槽abc，mode = "car"下，自定义中英文切换内容，具体参考[车牌键盘自定义中英文切换及禁用键等设置](https://www.uvui.cn/components/keyboard.html#车牌键盘自定义中英文切换及禁用键等设置)
## 1.0.4（2023-09-04）
1. 优化，修改文件名称
## 1.0.3（2023-09-04）
1. 修复键盘change回调事件产生冲突的BUG
## 1.0.2（2023-07-02）
uv-keyboard 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/keyboard.html
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-keyboard 键盘
uni_modules/uv-keyboard/components/uv-keyboard-car/props.js
+24
View File
@@ -0,0 +1,24 @@
export default {
props: {
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
},
// 输入一个中文后，是否自动切换到英文
autoChange: {
type: Boolean,
default: false
},
// 被禁用的键
disKeys: {
type: Array,
default: ()=>[]
},
// 是否自定义abc
customabc: {
type: Boolean,
default: false
}
}
}
uni_modules/uv-keyboard/components/uv-keyboard-car/uv-keyboard-car.vue
+347
View File
@@ -0,0 +1,347 @@
<template>
<view
class="uv-keyboard"
@touchmove.stop.prevent="noop"
>
<view
v-for="(group, i) in abc ? engKeyBoardList : areaList"
:key="i"
class="uv-keyboard__button"
:index="i"
:class="[i + 1 === 4 && 'uv-keyboard__button--center']"
>
<view
v-if="i === 3"
class="uv-keyboard__button__inner-wrapper"
>
<view
class="uv-keyboard__button__inner-wrapper__left"
hover-class="uv-hover-class"
:hover-stay-time="200"
@tap="changeCarInputMode"
>
<slot>
<template v-if="!customabc">
<text
class="uv-keyboard__button__inner-wrapper__left__lang"
:class="[!abc && 'uv-keyboard__button__inner-wrapper__left__lang--active']"
>中</text>
<text class="uv-keyboard__button__inner-wrapper__left__line">/</text>
<text
class="uv-keyboard__button__inner-wrapper__left__lang"
:class="[abc && 'uv-keyboard__button__inner-wrapper__left__lang--active']"
>英</text>
</template>
</slot>
</view>
</view>
<view
class="uv-keyboard__button__inner-wrapper"
v-for="(item, j) in group"
:key="j"
>
<view
:class="['uv-keyboard__button__inner-wrapper__inner',{'uv-keyboard__button__inner-wrapper__inner--disabled': isDisabled(i,j)}]"
:hover-stay-time="200"
@tap="carInputClick(i, j)"
:hover-class="isDisabled(i,j)?'none':'uv-hover-class'"
>
<text class="uv-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
</view>
<view class="uv-keyboard__button__inner-wrapper__disabled--mask" v-if="isDisabled(i,j)"></view>
</view>
<view
v-if="i === 3"
@touchstart="backspaceClick"
@touchend="clearTimer"
class="uv-keyboard__button__inner-wrapper"
>
<view
class="uv-keyboard__button__inner-wrapper__right"
hover-class="uv-hover-class"
:hover-stay-time="200"
>
<uv-icon
size="28"
name="backspace"
color="#303133"
></uv-icon>
</view>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* keyboard 键盘组件
* @description 此为uvui自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
* @tutorial https://www.uvui.cn/components/keyboard.html
* @property {Boolean} random 是否打乱键盘的顺序
* @event {Function} change 点击键盘触发
* @event {Function} backspace 点击退格键触发
* @example <uv-keyboard ref="uKeyboard" mode="car" v-model="show"></uv-keyboard>
*/
export default {
name: "uv-keyboard",
mixins: [mpMixin, mixin, props],
emits: ['backspace','change','changeCarInputMode'],
data() {
return {
// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
abc: false
};
},
computed: {
areaList() {
let data = [
'京',
'沪',
'粤',
'津',
'冀',
'豫',
'云',
'辽',
'黑',
'湘',
'皖',
'鲁',
'苏',
'浙',
'赣',
'鄂',
'桂',
'甘',
'晋',
'陕',
'蒙',
'吉',
'闽',
'贵',
'渝',
'川',
'青',
'琼',
'宁',
'挂',
'藏',
'港',
'澳',
'新',
'使',
'学'
];
let tmp = [];
// 打乱顺序
if (this.random) data = this.$uv.randomArray(data);
// 切割成二维数组
tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20);
tmp[2] = data.slice(20, 30);
tmp[3] = data.slice(30, 36);
return tmp;
},
engKeyBoardList() {
let data = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
0,
'Q',
'W',
'E',
'R',
'T',
'Y',
'U',
'I',
'O',
'P',
'A',
'S',
'D',
'F',
'G',
'H',
'J',
'K',
'L',
'Z',
'X',
'C',
'V',
'B',
'N',
'M'
];
let tmp = [];
if (this.random) data = this.$uv.randomArray(data);
tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20);
tmp[2] = data.slice(20, 30);
tmp[3] = data.slice(30, 36);
return tmp;
},
isDisabled(i,j) {
return (i,j)=>{
let value = '';
if (this.abc) value = this.engKeyBoardList[i][j];
else value = this.areaList[i][j];
return this.disKeys.indexOf(value) > -1;
}
}
},
methods: {
// 点击键盘按钮
carInputClick(i, j) {
if(this.isDisabled(i,j)) return;
let value = '';
// 不同模式，获取不同数组的值
if (this.abc) value = this.engKeyBoardList[i][j];
else value = this.areaList[i][j];
// 如果允许自动切换，则将中文状态切换为英文
if (!this.abc && this.autoChange) this.$uv.sleep(200).then(() => this.abc = true)
this.$emit('change', value);
},
// 修改汽车牌键盘的输入模式，中文|英文
changeCarInputMode() {
this.abc = !this.abc;
this.$emit('changeCarInputMode',this.abc);
},
// 点击退格键
backspaceClick() {
this.$emit('backspace');
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = null;
this.timer = setInterval(() => {
this.$emit('backspace');
}, 250);
},
clearTimer() {
clearInterval(this.timer);
this.timer = null;
},
}
};
</script>
<style lang="scss" scoped>
$show-hover: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-car-keyboard-background-color: rgb(224, 228, 230) !default;
$uv-car-keyboard-padding:6px 0 6px !default;
$uv-car-keyboard-button-inner-width:64rpx !default;
$uv-car-keyboard-button-inner-background-color:#FFFFFF !default;
$uv-car-keyboard-button-height:80rpx !default;
$uv-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
$uv-car-keyboard-button-border-radius:4px !default;
$uv-car-keyboard-button-inner-margin:8rpx 5rpx !default;
$uv-car-keyboard-button-text-font-size:16px !default;
$uv-car-keyboard-button-text-color:$uv-main-color !default;
$uv-car-keyboard-center-inner-margin: 0 4rpx !default;
$uv-car-keyboard-special-button-width:134rpx !default;
$uv-car-keyboard-lang-font-size:16px !default;
$uv-car-keyboard-lang-color:$uv-main-color !default;
$uv-car-keyboard-active-color:$uv-primary !default;
$uv-car-keyboard-line-font-size:15px !default;
$uv-car-keyboard-line-color:$uv-main-color !default;
$uv-car-keyboard-line-margin:0 1px !default;
$uv-car-keyboard-uv-hover-class-background-color:#BBBCC6 !default;
.uv-keyboard {
@include flex(column);
justify-content: space-around;
background-color: $uv-car-keyboard-background-color;
align-items: stretch;
padding: $uv-car-keyboard-padding;
&__button {
@include flex;
justify-content: center;
flex: 1;
/* #ifndef APP-NVUE */
/* #endif */
&__inner-wrapper {
position: relative;
box-shadow: $uv-car-keyboard-button-inner-box-shadow;
margin: $uv-car-keyboard-button-inner-margin;
border-radius: $uv-car-keyboard-button-border-radius;
&__disabled--mask {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: $uv-car-keyboard-button-inner-width;
height: $uv-car-keyboard-button-height;
}
&__inner {
@include flex;
justify-content: center;
align-items: center;
width: $uv-car-keyboard-button-inner-width;
background-color: $uv-car-keyboard-button-inner-background-color;
height: $uv-car-keyboard-button-height;
border-radius: $uv-car-keyboard-button-border-radius;
&--disabled {
opacity: 0.5;
}
&__text {
font-size: $uv-car-keyboard-button-text-font-size;
color: $uv-car-keyboard-button-text-color;
}
}
&__left,
&__right {
border-radius: $uv-car-keyboard-button-border-radius;
width: $uv-car-keyboard-special-button-width;
height: $uv-car-keyboard-button-height;
background-color: $uv-car-keyboard-uv-hover-class-background-color;
@include flex;
justify-content: center;
align-items: center;
box-shadow: $uv-car-keyboard-button-inner-box-shadow;
}
&__left {
&__line {
font-size: $uv-car-keyboard-line-font-size;
color: $uv-car-keyboard-line-color;
margin: $uv-car-keyboard-line-margin;
}
&__lang {
font-size: $uv-car-keyboard-lang-font-size;
color: $uv-car-keyboard-lang-color;
&--active {
color: $uv-car-keyboard-active-color;
}
}
}
}
}
}
.uv-hover-class {
background-color: $uv-car-keyboard-uv-hover-class-background-color;
}
</style>
uni_modules/uv-keyboard/components/uv-keyboard-number/props.js
+19
View File
@@ -0,0 +1,19 @@
export default {
props: {
// 键盘的类型，number-数字键盘，card-身份证键盘
mode: {
type: String,
default: 'number'
},
// 是否显示键盘的"."符号
dotDisabled: {
type: Boolean,
default: false
},
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
}
}
}
uni_modules/uv-keyboard/components/uv-keyboard-number/uv-keyboard-number.vue
+201
View File
@@ -0,0 +1,201 @@
<template>
<view
class="uv-keyboard"
@touchmove.stop.prevent="noop"
>
<view
class="uv-keyboard__button-wrapper"
v-for="(item, index) in numList"
:key="index"
>
<view
class="uv-keyboard__button-wrapper__button"
:style="[itemStyle(index)]"
@tap="keyboardClick(item)"
hover-class="uv-hover-class"
:hover-stay-time="200"
>
<text class="uv-keyboard__button-wrapper__button__text">{{ item }}</text>
</view>
</view>
<view
class="uv-keyboard__button-wrapper"
>
<view
class="uv-keyboard__button-wrapper__button uv-keyboard__button-wrapper__button--gray"
hover-class="uv-hover-class"
:hover-stay-time="200"
@touchstart.stop="backspaceClick"
@touchend="clearTimer"
>
<uv-icon
name="backspace"
color="#303133"
size="28"
></uv-icon>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* keyboard 键盘组件
* @description
* @tutorial
* @property {String} mode 键盘的类型，number-数字键盘，card-身份证键盘
* @property {Boolean} dotDisabled 是否显示键盘的"."符号
* @property {Boolean} random 是否打乱键盘按键的顺序
* @event {Function} change 点击键盘触发
* @event {Function} backspace 点击退格键触发
* @example
*/
export default {
mixins: [mpMixin, mixin, props],
emits: ['backspace','change'],
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 this.$uv.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 this.$uv.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 this.$uv.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>
$show-hover: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-number-keyboard-background-color:rgb(224, 228, 230) !default;
$uv-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
$uv-number-keyboard-button-width:222rpx !default;
$uv-number-keyboard-button-margin:4px 6rpx !default;
$uv-number-keyboard-button-border-top-left-radius:4px !default;
$uv-number-keyboard-button-border-top-right-radius:4px !default;
$uv-number-keyboard-button-border-bottom-left-radius:4px !default;
$uv-number-keyboard-button-border-bottom-right-radius:4px !default;
$uv-number-keyboard-button-height: 90rpx!default;
$uv-number-keyboard-button-background-color:#FFFFFF !default;
$uv-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
$uv-number-keyboard-text-font-size:20px !default;
$uv-number-keyboard-text-font-weight:500 !default;
$uv-number-keyboard-text-color:$uv-main-color !default;
$uv-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
$uv-number-keyboard-uv-hover-class-background-color: #BBBCC6 !default;
.uv-keyboard {
@include flex;
flex-direction: row;
justify-content: space-around;
background-color: $uv-number-keyboard-background-color;
flex-wrap: wrap;
padding: $uv-number-keyboard-padding;
&__button-wrapper {
box-shadow: $uv-number-keyboard-button-box-shadow;
margin: $uv-number-keyboard-button-margin;
border-top-left-radius: $uv-number-keyboard-button-border-top-left-radius;
border-top-right-radius: $uv-number-keyboard-button-border-top-right-radius;
border-bottom-left-radius: $uv-number-keyboard-button-border-bottom-left-radius;
border-bottom-right-radius: $uv-number-keyboard-button-border-bottom-right-radius;
&__button {
width: $uv-number-keyboard-button-width;
height: $uv-number-keyboard-button-height;
background-color: $uv-number-keyboard-button-background-color;
@include flex;
justify-content: center;
align-items: center;
border-top-left-radius: $uv-number-keyboard-button-border-top-left-radius;
border-top-right-radius: $uv-number-keyboard-button-border-top-right-radius;
border-bottom-left-radius: $uv-number-keyboard-button-border-bottom-left-radius;
border-bottom-right-radius: $uv-number-keyboard-button-border-bottom-right-radius;
&__text {
font-size: $uv-number-keyboard-text-font-size;
font-weight: $uv-number-keyboard-text-font-weight;
color: $uv-number-keyboard-text-color;
}
&--gray {
background-color: $uv-number-keyboard-gray-background-color;
}
}
}
}
.uv-hover-class {
background-color: $uv-number-keyboard-uv-hover-class-background-color;
}
</style>
uni_modules/uv-keyboard/components/uv-keyboard/props.js
+95
View File
@@ -0,0 +1,95 @@
export default {
props: {
// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
mode: {
type: String,
default: 'number'
},
// 是否显示键盘的"."符号
dotDisabled: {
type: Boolean,
default: false
},
// 是否显示顶部工具条
tooltip: {
type: Boolean,
default: true
},
// 是否显示工具条中间的提示
showTips: {
type: Boolean,
default: true
},
// 工具条中间的提示文字
tips: {
type: String,
default: ''
},
// 是否显示工具条左边的"取消"按钮
showCancel: {
type: Boolean,
default: true
},
// 是否显示工具条右边的"完成"按钮
showConfirm: {
type: Boolean,
default: true
},
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
},
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: {
type: Boolean,
default: true
},
// 是否允许通过点击遮罩关闭键盘
closeOnClickOverlay: {
type: Boolean,
default: true
},
// 是否允许点击确认按钮关闭组件
closeOnClickConfirm: {
type: Boolean,
default: true
},
// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
overlay: {
type: Boolean,
default: true
},
// z-index值
zIndex: {
type: [String, Number],
default: 10075
},
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮的文字
confirmText: {
type: String,
default: '确定'
},
// 输入一个中文后，是否自动切换到英文
autoChange: {
type: Boolean,
default: false
},
// 被禁用的键
disKeys: {
type: Array,
default: ()=>[]
},
// 是否自定义abc
customabc: {
type: Boolean,
default: false
},
...uni.$uv?.props?.keyboard
}
}
uni_modules/uv-keyboard/components/uv-keyboard/uv-keyboard.vue
+180
View File
@@ -0,0 +1,180 @@
<template>
<uv-popup
ref="keyboardPopup"
mode="bottom"
:overlay="overlay"
:closeOnClickOverlay="closeOnClickOverlay"
:safeAreaInsetBottom="safeAreaInsetBottom"
:zIndex="zIndex"
:customStyle="{ backgroundColor: 'rgb(214, 218, 220)' }"
@change="popupChange"
>
<view class="uv-keyboard">
<slot />
<view
class="uv-keyboard__tooltip"
v-if="tooltip"
>
<view
hover-class="uv-hover-class"
:hover-stay-time="100"
>
<text
class="uv-keyboard__tooltip__item uv-keyboard__tooltip__cancel"
v-if="showCancel"
@tap="onCancel"
>{{showCancel && cancelText}}</text>
</view>
<view>
<text
v-if="showTips"
class="uv-keyboard__tooltip__item uv-keyboard__tooltip__tips"
>{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
</view>
<view
hover-class="uv-hover-class"
:hover-stay-time="100"
>
<text
v-if="showConfirm"
@tap="onConfirm"
class="uv-keyboard__tooltip__item uv-keyboard__tooltip__submit"
hover-class="uv-hover-class"
>{{showConfirm && confirmText}}</text>
</view>
</view>
<template v-if="mode == 'number' || mode == 'card'">
<uv-keyboard-number
:random="random"
@backspace="backspace"
@change="change"
:mode="mode"
:dotDisabled="dotDisabled"
></uv-keyboard-number>
</template>
<template v-else>
<uv-keyboard-car
ref="uvKeyboardCarRef"
:random="random"
:autoChange="autoChange"
:disKeys="disKeys"
:customabc="customabc"
@backspace="backspace"
@change="change"
@changeCarInputMode="changeCarInputMode"
>
<slot name="abc"></slot>
</uv-keyboard-car>
</template>
</view>
</uv-popup>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* keyboard 键盘
* @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
* @tutorial https://www.uvui.cn/components/keyboard.html
* @property {String} mode 键盘类型，见官网基本使用的说明 （默认 'number' ）
* @property {Boolean} dotDisabled 是否显示"."按键，只在mode=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 弹出键盘的z-index值 （默认 1075 ）
* @property {String} cancelText 取消按钮的文字 （默认 '取消' ）
* @property {String} confirmText 确认按钮的文字 （默认 '确认' ）
* @property {Object} customStyle 自定义样式，对象形式
* @event {Function} change 按键被点击(不包含退格键被点击)
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
* @event {Function} backspace 键盘退格键被点击
* @example <uv-keyboard mode="number" v-model="show"></uv-keyboard>
*/
export default {
name: "uv-keyboard",
mixins: [mpMixin, mixin, props],
emits: ['close','change','confirm','cancel','backspace','changeCarInputMode'],
methods: {
open() {
this.$refs.keyboardPopup.open();
},
close() {
this.$refs.keyboardPopup.close();
},
popupChange(e) {
if(!e.show) this.$emit('close');
},
change(e) {
this.$emit('change', e);
},
// 输入完成
onConfirm() {
this.$emit('confirm');
if(this.closeOnClickConfirm) this.close();
},
// 取消输入
onCancel() {
this.$emit('cancel');
this.close();
},
// 退格键
backspace() {
this.$emit('backspace');
},
// car模式切换中文|英文方法
changeCarInputMode(e) {
this.$emit('changeCarInputMode',e);
},
changeCarMode() {
this.$refs.uvKeyboardCarRef && this.$refs.uvKeyboardCarRef.changeCarInputMode();
}
}
}
</script>
<style lang="scss" scoped>
$show-hover: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-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: $uv-primary;
}
&__cancel {
text-align: left;
color: #888888;
}
&__tips {
color: $uv-tips-color;
}
}
}
</style>
uni_modules/uv-keyboard/package.json
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-keyboard",
"displayName": "uv-keyboard 键盘 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.5",
"description": "uv-keyboard 该组件为自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。",
"keywords": [
"uv-keyboard",
"uvui",
"uv-ui",
"keyboard",
"键盘"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-popup",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
uni_modules/uv-keyboard/readme.md
+19
View File
@@ -0,0 +1,19 @@
## Keyboard 键盘
> **组件名：uv-keyboard**
该组件为自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
# <a href="https://www.uvui.cn/components/keyboard.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>