Table of contents
Chapter 2 Core Implementation Ideas
Chapter 3 Encapsulation component code implementation
Chapter 1 Achieving Effects
- In order to facilitate the parent component of the editor, I just found a page for demonstration.
- By clicking the button, the input box for password input of the sub-component is displayed.
- Get focus by clicking on the sub-component input box, and then enter the verification code number.
- The OK button of the subcomponent is to verify whether the entered verification code is correct.
- Tools used: element-ui component + native Html + Css (of course you can also use other components/native input, the implementation ideas are similar)
Chapter 2 Core Implementation Ideas
- Look at the picture to understand the requirements: We need 6 cells, but the cells have no input function. Think of the input element, but if each cell represents an input, compare It’s cumbersome, and you also need to modify the input style
- Editor's implementation ideas:
—Create 6 small square divs as cells for each input
- Just use one input element and cover it on 6 divs, so there is no need for 6 input boxes
- Then set the input to be transparent (hide the input), which is equivalent to entering numbers in the input box, but you can't see it.
- Finally, map each entered value to a grid of 6 divs
Chapter 3 Encapsulation component code implementation
- parent component
<template>
<div>
// 使用自定义子组件
<inputComponent ref="inputPsdComponent"></inputComponent>
</div>
</template>
<script>
// 引入自定义封装的子组件
import inputComponent from './component/inputComponent.vue'
export default {
data () {
return {
}
},
components: {
inputComponent // 祖册自定义子组件
},
methods: {
showInput () {
this.$refs.inputPsdComponent.init() // 调用子组件的init方法
}
},
}
</script>- Subcomponents: Detailed description in code
<template>
<el-dialog :title="title" :visible.sync="visible">
<div class="input_box flexbox">
<!-- 单元格页面 -->
<div class="codes">
<!-- 通过长度与获取焦点标签控制单元格是否高亮 -->
<div
class="code_item"
:class="codeValue.length == 0 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[0] }}
</div>
<div
class="code_item"
:class="codeValue.length == 1 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[1] }}
</div>
<div
class="code_item"
:class="codeValue.length == 2 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[2] }}
</div>
<div
class="code_item"
:class="codeValue.length == 3 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[3] }}
</div>
<div
class="code_item"
:class="codeValue.length == 4 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[4] }}
</div>
<div
class="code_item"
:class="codeValue.length == 5 && inputFocus ? 'code_item_active' : ''"
>
{
{ codeValue[5] }}
</div>
</div>
<!-- input框：控制长度 -->
<el-input
class="input_code"
:value="codeValue"
:maxlength="6"
@blur="codeInputBlur"
@focus="codeInputFocus"
@input="codeInputChange"
>
</el-input>
<div class="btn">
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
inputFocus: false,
codeValue: '',
title: '密码输入'
}
},
props:{
},
methods: {
init () {
this.visible = true
},
// 校验输入的验证码/密码
confirm () {
if (this.codeValue.length === 6) {
this.$message({
showClose: true,
message: '验证成功！',
type: 'success'
})
this.codeValue = ''
this.visible = false
} else {
this.$message({
showClose: true,
message: '验证码不正确！',
type: 'error'
})
}
},
// 验证码输入框
codeInputChange (e) {
// 判断是否输入值
if (e) {
// 正则判断是否都是数字，如果都是数字则赋值,否则
if ((/^\+?[0-9][0-9]*$/).test(e)) {
this.codeValue = e
}
} else {
this.codeValue = ''
}
},
// 验证码输入框失去焦点
codeInputBlur () {
this.inputFocus = false
},
// 验证码输入框获取到焦点
codeInputFocus () {
this.inputFocus = true
},
}
}
</script>
<style lang="less" scoped>
.input_box {
margin-top: 20px;
height: 100px;
position: relative;
}
.input_code {
position: absolute;
top: 0;
left: 0;
}
.btn{
position: absolute;
top: 70px;
left: 0;
}
.codes{
position: absolute;
top: 0;
display: flex;
justify-content: flex-start;
.code_item {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid #f0f0f0;
margin-right: 10px;
}
}
.code_item_active {
border: 1px solid #F23026 !important;
// box-sizing: border-box;
}
// 隐藏input
.input_box {
::v-deep .el-input__inner {
width: 100%;
height: 50px !important;
background-color: transparent;
border: none;
color: transparent;
}
}
::v-deep .el-dialog {
min-height: 100px;
}
</style>