由于比较简单，直接上代码
<template>
<div class="key">
<el-input placeholder="请输入密码" v-model="password"></el-input>
<div style="height: 120px"></div>
<div class="key-contain">
<el-row :gutter="2">
<el-col :span="8">
<div style="border-top-left-radius: 8px" @click="keyEnter('1')">
1
</div></el-col
>
<el-col :span="8"> <div @click="keyEnter('2')">2</div></el-col>
<el-col :span="8">
<div style="border-top-right-radius: 8px" @click="keyEnter('3')">
3
</div></el-col
>
</el-row>
<div style="height: 1px"></div>
<el-row :gutter="2">
<el-col :span="8"> <div @click="keyEnter('4')">4</div></el-col>
<el-col :span="8"> <div @click="keyEnter('5')">5</div></el-col>
<el-col :span="8"> <div @click="keyEnter('6')">6</div></el-col>
</el-row>
<div style="height: 1px"></div>
<el-row :gutter="2">
<el-col :span="8"> <div @click="keyEnter('7')">7</div></el-col>
<el-col :span="8"> <div @click="keyEnter('8')">8</div></el-col>
<el-col :span="8"> <div @click="keyEnter('9')">9</div></el-col>
</el-row>
<div style="height: 1px"></div>
<el-row :gutter="2">
<el-col :span="8">
<div @click="comfirm" style="border-bottom-left-radius: 8px">
确定
</div></el-col
>
<el-col :span="8"> <div @click="keyEnter('0')">0</div></el-col>
<el-col :span="8">
<div style="border-bottom-right-radius: 8px" @click="handleDelete">
<i class="el-icon-delete"></i></div
></el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
password: "",
};
},
methods: {
keyEnter(val) {
console.log(val);
this.password += val;
},
comfirm() {
this.$emit("keyComfirm");
},
handleDelete() {
const str = this.password;
this.password = str.substring(0, str.length - 1);
console.log("this.password", this.password);
},
},
};
</script>
<style lang="scss">
.key {
width: 768px;
display: flex;
flex-direction: column;
align-items: center;
.key-contain {
width: 668px;
height: 578px;
background: #b7b9be;
border-radius: 8px;
.el-col > div {
height: 144px;
line-height: 144px;
text-align: center;
background: #d8dadf;
}
}
}
</style>
网友评论