Vue组件封装之input输入框实战记录
作者:阿选不出来 发布时间:2024-05-29 22:25:24
实战目的
封装一个自定义的input组件,只适用于 input元素type属性为text或password.
实战效果
核心思想
准备: 需要两个文件,分别为 register.vue(父组件), input.vue(子组件)
register.vue 引入 input.vue
import inputstyle from '@/components/input.vue'
export default {
components: {inputstyle},
}
一 格式规范
在 register.vue 中对输入框的信息进行设置, 并传给子组件 input.vue.
<inputstyle :input_data="input_data[0]"></inputstyle>
export default {
...
input_data: [
{
type: 'text',
name: 'email',
placeholder: '请输入邮箱',
state: 0,
reg: '^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$',
error_type: '',
message: ['邮箱不能为空哦', '邮箱格式有误']
},
{
type: 'password',
name: 'pwd',
placeholder: '请输入密码',
state: 0,
reg: '[a-z0-9]{8,16}',
error_type: '',
message: ['密码不能为空哦!','请输入大于8位数小于16位数的字母或数字!']
}
],
}
state 代表输入的value值是否符合规范
reg 为value值得正则表达式
input.vue 接收数据, 每当输入框失去焦点时对内容进行检验.
<template>
<input :type="input_data.type" :placeholder="input_data.placeholder" @blur="style($event)">
</template>
二 给父组件传递value值
register.vue
在子组件内添加 :*changeData*.*sync*="formData.email"
input.vue
为input绑定事件 @input="changeData($event)"
这里我给密码进行了md5加密
changeData(e){
// 密码类型用md5加密
if(this.input_data.type = 'password') {
this.$emit('update:changeData', md5(e.target.value.trim()))
}else {
this.$emit('update:changeData', e.target.value.trim())
}
}
三 错误提示
在父组件中添加一个错误提示条.
设置一个变量 error_message
message: {
// 错误信息提示
error_message: '',
// 错误提示条的透明度
opacity: 0,
// 控制提交按钮
go: false
},
register.vue
对子组件绑定事件
:*error_message*.*sync*="message.error_message"
对 error_message 进行数据监视, 每当error_message发生改变时,就进行一次提示
watch: {
'message.error_message': {
handler(){
this.alertmessage()
}
}
}
input.vue
input每次触发 @blur="style($event)"
的时候, 根据 input_data.error_type
的值, 触发 update:error_message
事件, input_data.message[error_type]
为参数,以改变error_message的值
即: this.$emit('update:error_message', this.input_data.message[0])
四 格式检验
根据父组件传过来的数据 input_data
中的 reg
对value
值进行检验
将检验的结果反映给 register.vue(父组件)
检验分为两种情况:
? 格式无误: 将 input_data 中的state修改为true.
? 格式有误: 判断错误类型, 修改 error_type
我们不能直接在 input.vue 中修改 input_data
的数据.
单向数据流
所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。
我们需要在 register.vue 中为 input.vue 绑定自定义事件, 子组件将数据以参数的形式传给父组件,并触发($emit)
该事件.
register.vue
为子组件绑定以下事件:
这里我用了 .sync
修饰符, 不了解的可以去查查
:statechange.sync="input_data[0].state"
:error_typechange.sync="input_data[0].error_type"
input.vue
export default {
props:['input_data']
methods: {
// 根据 is_format判断数据格式是否正确,并将检验的信息传给父组件
style(e) {
let reg = null
reg = eval(`/${this.input_data.reg}/`)
let state = reg.test(e.target.value)
if(!state) {
this.$emit('update:statechange', false)
if(e.target.value) {
this.$emit('update:error_typechange', 1)
// 下文有讲
this.$emit('update:error_message', this.input_data.message[1])
}else {
this.$emit('update:error_typechange', 0)
this.$emit('update:error_message', this.input_data.message[0])
}
}else {
this.$emit('update:statechange', true)
}
},
}
}
五 多个input框的检验
检验input_data中是否有state为false的对象.
有就根据error_type进行错误提示
go变量控制是否触发提交表单.
for(let i = 0; i < this.is_format.length; i ++) {
if(!this.is_format[i].style) {
this.errormessage=this.is_format[i].message[this.is_format[i].error_type]
this.alertmessage()
this.go = false
break;
}
this.go = true
}
写在最后
来源:https://blog.csdn.net/m0_63300737/article/details/127290788
猜你喜欢
- 一、前言Celery是一个基于python开发的分布式任务队列,而做python WEB开发最为流行的框架莫属Django,但是Django
- Scrapy是一个用Python实现的为了爬取网站数据、提取数据的应用框架。我们对于爬取到的数据存储到本地或数据库是经常要用到的操作。主要讲
- 1 引言在进行图像处理过程中,我们经常会遇到一些和物体轮廓相关的操作,比如求目标轮廓的周长面积等,我们直接使用Opencv的findCont
- XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能,这使XML从根本
- my.ini在参考https://www.jb51.net/article/100284.htm之后执行mysqld --initializ
- 阅读上一篇:网马解密大讲堂——网马解密初级篇今天主要讲解的内容是Freshow工具的使用方法,工欲善其事,必先利其器,首先要学会如何使用解密
- 1、查看数据类型In [11]: arr = np.array([1,2,3,4,5])In [12]: arrOut[12]: array
- 作为一种常见的数据结构,缓冲区(Buffer)在计算机科学中有着广泛的应用。Go 语言标准库中提供了一个名为 bytes.Buffer 的缓
- range(x)range(9) 代表着0、1、2、3、4、5、6、7、8 这九个顺序数字的集合。也就是 range(9) => ra
- 本文实例讲述了python中xrange用法。分享给大家供大家参考。具体如下:先来看如下示例:>>> x=xrange(0
- 本文实例讲述了Linux下安装Memcached服务器和客户端与php使用。分享给大家供大家参考,具体如下:Memcached是高性能的分布
- 虽然有些人认为区块链是一个早晚会出现问题的解决方案,但是毫无疑问,这个创新技术是一个计算机技术上的奇迹。那么,究竟什么是区块链呢?区块链以比
- 在网上查了部分资料但是发现粘上去的代码都存在问题,无奈只好自己修改了一下,代码如下: 如下代码能正常运行,都是网上查找资料最后拼凑总结出来的
- 0.前言最近学习的python第一个项目实战,《外星人入侵》,成功实现所有功能,给大家提供源代码环境安装:python 3.7+ pygam
- 步骤一:申请百度地图密钥;JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak)
- 在生产环境下,有时公司客服反映网页半天打不到,除了在浏览器按F12的Network响应来排查,确定web服务器无故障后。就需要检
- 本文实例讲述了Python使用sklearn库实现的各种分类算法简单应用。分享给大家供大家参考,具体如下:KNNfrom sklearn.n
- 前言最近空闲的时候看到了之前就关注的一个小站http://teahour.fm/,一直想把这里的音频都听一遍,可转眼间怎么着也有两年了,却什
- 今年4月,我在宿舍憋出一个拖拽翻页效果原本是为自己的博客网站设计的,周二产生的灵感,周三周四逃课两天算坐标,周五回家,到傍晚才算写出了第一版
- 8. 使用DECODE函数来减少处理时间使用DECODE函数可以避免重复扫描相同记录或重复连接相同的表. 例如: SELECT COUNT(