init
This commit is contained in:
唐明明
311
components/custom-digitKeyboard/custom-digitKeyboard.vue
Normal file
311
components/custom-digitKeyboard/custom-digitKeyboard.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view
|
||||
class="modal"
|
||||
:animation="animationData1"
|
||||
@touchmove.stop.prevent
|
||||
>
|
||||
<view
|
||||
class=" content-wrap"
|
||||
:animation="animationData2"
|
||||
>
|
||||
<view class="content-header">
|
||||
<view
|
||||
class="cancel-btn"
|
||||
@click="close"
|
||||
>取消</view>
|
||||
<view class="input-contant">{{ inputValue.join("") }}</view>
|
||||
<view
|
||||
class="confirm-btn"
|
||||
@click="confirm"
|
||||
>完成</view>
|
||||
</view>
|
||||
<view class="key-box">
|
||||
<view
|
||||
:class="{
|
||||
'handel-btn': ['.', '删除', ''].includes(item),
|
||||
'active-btn': activeKey === item,
|
||||
'active-handel-btn':
|
||||
activeKey === item && ['.', '删除'].includes(item),
|
||||
}"
|
||||
v-for="(item, index) in keyboardList"
|
||||
:key="index"
|
||||
@click="setValue(item)"
|
||||
>{{ item }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
animationData1: {},
|
||||
animationData2: {},
|
||||
activeKey: "",
|
||||
inputValue: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//是否为带小数的数字键盘
|
||||
decimals: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
//小数点前整数的位数
|
||||
maxLength: {
|
||||
type: [Number, String],
|
||||
default: 9,
|
||||
},
|
||||
//小数点后的位数
|
||||
pointLength: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
//最大的值
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 999999999,
|
||||
},
|
||||
//最小的值
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
keyboardList() {
|
||||
return this.decimals
|
||||
? [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
".",
|
||||
"0",
|
||||
"删除",
|
||||
]
|
||||
: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"",
|
||||
"0",
|
||||
"删除",
|
||||
];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.inputValue = [];
|
||||
if (val) this.enterAnimate();
|
||||
else this.leaveAnimate();
|
||||
},
|
||||
inputValue(value) {
|
||||
this.confirm();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setValue(data) {
|
||||
this.activeKey = data;
|
||||
// let timer = setTimeout(() => {
|
||||
|
||||
// clearTimeout(timer);
|
||||
// }, 100);
|
||||
this.activeKey = "-";
|
||||
|
||||
if (
|
||||
!data ||
|
||||
(data !== "删除" &&
|
||||
this.inputValue.includes(".") &&
|
||||
this.inputValue.join("").split(".")[1].length ===
|
||||
this.pointLength)
|
||||
)
|
||||
return false;
|
||||
|
||||
if (
|
||||
this.inputValue.length === 1 &&
|
||||
this.inputValue[0] === "0" &&
|
||||
!["删除", "."].includes(data)
|
||||
) {
|
||||
return (this.inputValue = [data]);
|
||||
}
|
||||
|
||||
if (data !== "删除") {
|
||||
if (this.inputValue.includes(".")) {
|
||||
if (
|
||||
this.inputValue.join("").split(".")[0].length ===
|
||||
this.maxLength
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
} else if (this.inputValue.length === this.maxLength) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (data === "删除") {
|
||||
return this.inputValue.length && this.inputValue.pop();
|
||||
}
|
||||
if (data === ".") {
|
||||
if (!this.inputValue.length || this.inputValue.includes("."))
|
||||
return false;
|
||||
}
|
||||
this.inputValue.push(data);
|
||||
},
|
||||
close() {
|
||||
this.$emit("update:visible", false);
|
||||
this.$emit("close");
|
||||
},
|
||||
confirm() {
|
||||
let result = Number(this.inputValue.join(""));
|
||||
if (result < this.min) {
|
||||
uni.showToast({
|
||||
title: `最小值为${this.min}`,
|
||||
duration: 1500,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
} else if (result > this.max) {
|
||||
uni.showToast({
|
||||
title: `最大值为${this.max}`,
|
||||
duration: 1500,
|
||||
icon: "none",
|
||||
});
|
||||
this.inputValue = [9, 9, 9];
|
||||
return;
|
||||
}
|
||||
this.$emit("confirm", result);
|
||||
this.close();
|
||||
},
|
||||
enterAnimate() {
|
||||
this.animation1 = uni.createAnimation();
|
||||
this.animation2 = uni.createAnimation();
|
||||
this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
|
||||
duration: 500,
|
||||
timingFunction: "ease",
|
||||
});
|
||||
this.animation2.translateY(0).step({
|
||||
timingFunction: "ease-out",
|
||||
duration: 500,
|
||||
});
|
||||
this.animationData1 = this.animation1.export();
|
||||
this.animationData2 = this.animation2.export();
|
||||
},
|
||||
leaveAnimate() {
|
||||
this.animation1 = uni.createAnimation();
|
||||
this.animation2 = uni.createAnimation();
|
||||
this.animation1.backgroundColor("rgba(0,0,0,0)").step({
|
||||
duration: 500,
|
||||
timingFunction: "ease",
|
||||
});
|
||||
this.animation2.translateY(500).step({
|
||||
timingFunction: "ease-out",
|
||||
duration: 500,
|
||||
});
|
||||
this.animationData1 = this.animation1.export();
|
||||
this.animationData2 = this.animation2.export();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 9999;
|
||||
|
||||
.content-wrap {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
// transform: translateY(100%);
|
||||
|
||||
.content-header {
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
float: right;
|
||||
|
||||
.input-contant {
|
||||
text-align: center;
|
||||
line-height: 80upx;
|
||||
font-size: 40upx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding-left: 30upx;
|
||||
color: #147ff2;
|
||||
line-height: 80upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
padding-right: 30upx;
|
||||
color: #147ff2;
|
||||
line-height: 80upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.key-box {
|
||||
margin-top: 60upx;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
width: 100%;
|
||||
|
||||
view {
|
||||
width: 251upx;
|
||||
height: 100upx;
|
||||
border: 1upx solid rgb(235, 237, 240);
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 100upx;
|
||||
font-size: 40upx;
|
||||
font-weight: bold;
|
||||
margin: 0 -1upx -1upx 0;
|
||||
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
border: 1upx solid rgb(235, 237, 240);
|
||||
}
|
||||
}
|
||||
|
||||
.handel-btn {
|
||||
background: rgb(235, 237, 240);
|
||||
font-size: 30upx;
|
||||
}
|
||||
.active-btn {
|
||||
background: rgb(235, 237, 240);
|
||||
}
|
||||
.active-handel-btn {
|
||||
background: rgb(252, 252, 252);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user