first
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,19 @@
|
||||
export default {
|
||||
props: {
|
||||
// 键盘的类型,number-数字键盘,card-身份证键盘
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'number'
|
||||
},
|
||||
// 是否显示键盘的"."符号
|
||||
dotDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否打乱键盘按键的顺序
|
||||
random: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user