312 lines
8.5 KiB
Vue
312 lines
8.5 KiB
Vue
<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>
|