深圳网站建设销售前景,建筑市场网,机票旅游网站建设,郑州建设企业网站目录
第一章 实现效果
第二章 核心实现思路
第三章 封装组件代码实现 第一章 实现效果 为了方便小编的父组件随便找了个页面演示的通过点击按钮#xff0c;展示子组件密码输入的输入框通过点击子组件输入框获取焦点#xff0c;然后输入验证码数字即可子组件的确定按钮是验…目录
第一章 实现效果
第二章 核心实现思路
第三章 封装组件代码实现 第一章 实现效果 为了方便小编的父组件随便找了个页面演示的通过点击按钮展示子组件密码输入的输入框通过点击子组件输入框获取焦点然后输入验证码数字即可子组件的确定按钮是验证输入的验证码是否正确用到的工具element-ui组件 原生Html Css当然用别的组件/原生input也可实现思路大同小异 第二章 核心实现思路
看图了解需求我们需要6个单元格但是单元格没有输入功能想到input元素但是我们如果每一个单元格代表一个input又比较繁琐而且还需要修改input的样式小编的实现思路 -- 制作6个小的正方形div当做每一个input输入的单元格 -- 使用一个input元素即可将其覆盖在6个div上这样就不需要6个input框了 -- 然后给input设置透明隐藏掉input就相当于在input框输入数字只是看不到 -- 最后将输入的每一个值对应到6个div的格子上即可
第三章 封装组件代码实现
父组件
templatediv// 使用自定义子组件inputComponent refinputPsdComponent/inputComponent/div
/templatescript
// 引入自定义封装的子组件
import inputComponent from ./component/inputComponent.vue
export default {data () {return {}},components: {inputComponent // 祖册自定义子组件},methods: {showInput () {this.$refs.inputPsdComponent.init() // 调用子组件的init方法}},
}
/script
子组件:详细说明在代码中
templateel-dialog :titletitle :visible.syncvisiblediv classinput_box flexbox!-- 单元格页面 --div classcodes!-- 通过长度与获取焦点标签控制单元格是否高亮 --divclasscode_item:classcodeValue.length 0 inputFocus ? code_item_active : {{ codeValue[0] }}/divdivclasscode_item:classcodeValue.length 1 inputFocus ? code_item_active : {{ codeValue[1] }}/divdivclasscode_item:classcodeValue.length 2 inputFocus ? code_item_active : {{ codeValue[2] }}/divdivclasscode_item:classcodeValue.length 3 inputFocus ? code_item_active : {{ codeValue[3] }}/divdivclasscode_item:classcodeValue.length 4 inputFocus ? code_item_active : {{ codeValue[4] }}/divdivclasscode_item:classcodeValue.length 5 inputFocus ? code_item_active : {{ codeValue[5] }}/div/div!-- input框控制长度 --el-inputclassinput_code:valuecodeValue:maxlength6blurcodeInputBlurfocuscodeInputFocusinputcodeInputChange/el-inputdiv classbtnel-button typeprimary clickconfirm确定/el-button/div/div/el-dialog
/templatescript
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},}
}
/scriptstyle langless 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
