uniapp+vue3实现数字键盘
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.首先第一步需要定义变量
let numbers = reactive([
{
text: '1',
class: 'oner',
background: '#ffffff'
},
{
text: '2',
class: 'oner',
background: '#ffffff'
},
{
text: '3',
class: 'oner',
background: '#ffffff'
},
{
text: '4',
class: 'oner',
background: '#ffffff'
},
{
text: '5',
class: 'oner',
background: '#ffffff'
},
{
text: '6',
class: 'oner',
background: '#ffffff'
},
{
text: '7',
class: 'oner',
background: '#ffffff'
},
{
text: '8',
class: 'oner',
background: '#ffffff'
},
{
text: '9',
class: 'oner',
background: '#ffffff'
},
{
text: '0',
class: 'big',
background: '#ffffff'
},
{
text: '.',
class: 'oner',
background: '#ffffff'
},
])
// 确认的样式
let active = reactive({
background: ' #f2f2f2',
color: '#d4d4d4'
})
let styleDelete= reactive({
background: '#ffffff'
})
let stylelv = reactive({
background: '#3bab6f'
})
let nums = ref('')
let isimit = ref(false)
let showBox = ref(false)
let activeIndex = ref(0) //默认选中索引
let sumindex = ref(-1) //数字键盘索引
let valuemark = ref()
let preinput = ref('请输入付款金额')2.渲染页面
<view class="keyboard">
<view class="numbers">
<view
style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
v-for="(item,index) in numbers">
{{item.text}}
</view>
</view>
<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
<view @click="handleDelete()" class="oner" :style="styleDelete">
<image src="../../static/chahao.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<view class="onerplus" @click="handlePayment" :style="stylelv">
支付
</view>
</view>
</view>3.设置css样式
// 键盘样式
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 20rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-self: flex-start;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #c7c7c7;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f7f7f7;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expendituretime {
width: auto;
color: black;
display: flex;
height: 60rpx;
font-size: 30rpx;
line-height: 60rpx;
margin-left: 32rpx;
align-items: center;
border-radius: 10rpx;
background-color: #f7f7f7;
justify-content: space-evenly;
padding: 0rpx 15rpx 0rpx 20rpx;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.money-input {
width: 100%;
height: 150rpx;
// padding: 0 40rpx 0 40rpx;
}
.Type {
width: 100%;
height: 154px;
display: flex;
margin-top: 20rpx;
align-items: center;
flex-flow: row wrap;
justify-content: flex-start;
overflow-y: auto;
}
.Type-box {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
}
.Typeboxactive {
display: flex;
width: 120rpx;
height: 140rpx;
align-items: center;
flex-flow: column wrap;
justify-content: center;
margin: 0 0rpx 10rpx 5rpx;
background-color: #cbcbcb;
}
.inctiveclass {
width: 80rpx;
display: flex;
height: 80rpx;
font-size: 22rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #e7e7e7;
}
.activeclass {
width: 80rpx;
display: flex;
height: 80rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #3eb575;
}
.keyboard {
position: absolute;
bottom: 0rpx;
}
.numbers {
width: 100%;
display: flex;
height: 480rpx;
margin-top: 10rpx;
background-color: #fafafa;
justify-content: flex-start;
}
.remark {
width: 100%;
color: #50648a;
height: 100rpx;
font-size: 32rpx;
padding: 20rpx 0 0 30rpx;
}
.oner {
display: flex;
width: 165rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #ffffff;
}
.onerplus {
display: flex;
width: 165rpx;
color: #ffffff;
height: 338rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
justify-content: center;
margin: 15rpx auto 5rpx;
background-color: #9cd7b7;
}
.big {
display: flex;
width: 342rpx;
height: 100rpx;
font-size: 34rpx;
font-weight: bold;
align-items: center;
border-radius: 10rpx;
margin: 15rpx auto 5rpx;
justify-content: center;
background-color: #ffffff;
}
.input-container {
position: relative;
width: 100%;
height: 156rpx;
display: flex;
}
.input-wrapper {
position: relative;
width: 100%;
height: 100%;
// border-bottom: 1px solid #ccc;
// padding: 0 20rpx;
// padding: 20rpx 20rpx 0rpx 20rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
.input-icon {
height: 106rpx;
width: 5rpx;
background-color: #cbcbcb;
display: none;
}
.active {
display: block;
animation: blink 1s infinite; //点击后|出现
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.input-iconone {
position: absolute;
top: 50%;
left: 2rpx;
transform: translateY(-50%);
color: #666;
}
.input-field {
width: 100%;
height: 100%;
line-height: 156rpx;
padding-left: 80rpx;
font-size: 80rpx;
color: #333;
}
.remarks {
width: 68px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-text {
display: flex;
justify-content: center;
color: #c7c7c7;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.box-ative {
display: flex;
justify-content: center;
color: #000000;
align-items: center;
width: 100%;
margin-top: 10rpx;
height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.center {
position: relative;
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
border: 1rpx solid #f2f2f2;
}
.Record-remarks-number-of-words {
position: absolute;
left: 30rpx;
bottom: -20rpx;
color: #d4d4d4;
}4.这一步就到了该写方法的时候了
const comfors = () => {
if (valuemark) {
active.background = "#33955f"
setTimeout(() => {
active.background = "#3eb575"
showremark.value = false
}, 150)
}
}
const input = (e) => {
console.log('输入内容：', e);
// console.log('this.index.lenth', this.value.length)
valuemark.value = e
if (valuemark) {
active.background = '#3eb575'
active.color = '#ffffff'
} else {
active.background = '#f2f2f2'
active.color = '#d4d4d4'
}
}
const handleDelete= () => {
styleDelete.background = '#f7f7f7'
setTimeout(() => {
styleDelete.background = '#ffffff'
}, 150)
if (nums) {
nums.value = nums.value.substring(0, nums.value.length - 1)
}
}
const changeNums = (item, index) => {
console.log('asdsa', item, index);
numbers.forEach((item, idx) => {
if (idx === index) {
item.background = '#f7f7f7';
setTimeout(() => {
item.background = '#ffffff';
}, 150)
}
});
sumindex.value = index
console.log('this.sumindex', sumindex.value)
if (item.text == '.') {
console.log(nums.value.indexOf(".") != -1)
if (nums.value.indexOf(".") != -1 || nums.value.length == 0) {
return false
}
}
if (nums.value.split('.') && nums.value.split('.')[1]) {
if (nums.value.split('.')[1].length >= 2) {
return false
}
}
// this.nums.length
console.log('this.nums.length', nums.value.length)
nums.value = nums.value + item.text
if (nums.value.length > 6) {
nums.value = nums.value.slice(0, 6)
uni.showToast({
title: '最多只能输入6位数哦',
icon: 'none'
});
return;
}
}
const getListitemstyle = (index) => {
return {
background: numbers[index].background
};
}
希望可以帮助到漂泊在外的程序员们！！！
GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：18 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)