Vue組件封裝之input輸入框?qū)崙?zhàn)記錄
實(shí)戰(zhàn)目的
封裝一個自定義的input組件,只適用于 input元素type屬性為text或password.
實(shí)戰(zhàn)效果

核心思想
準(zhǔn)備: 需要兩個文件,分別為 register.vue(父組件), input.vue(子組件)
register.vue 引入 input.vue
import inputstyle from '@/components/input.vue'
export default {
components: {inputstyle},
}
一 格式規(guī)范
在 register.vue 中對輸入框的信息進(jìn)行設(shè)置, 并傳給子組件 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位數(shù)小于16位數(shù)的字母或數(shù)字!']
}
],
}state 代表輸入的value值是否符合規(guī)范
reg 為value值得正則表達(dá)式
input.vue 接收數(shù)據(jù), 每當(dāng)輸入框失去焦點(diǎn)時對內(nèi)容進(jìn)行檢驗(yàn).
<template>
<input :type="input_data.type" :placeholder="input_data.placeholder" @blur="style($event)">
</template>
二 給父組件傳遞value值
register.vue
在子組件內(nèi)添加 :*changeData*.*sync*="formData.email"
input.vue
為input綁定事件 @input="changeData($event)"
這里我給密碼進(jìn)行了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())
}
}
三 錯誤提示
在父組件中添加一個錯誤提示條.

設(shè)置一個變量 error_message
message: {
// 錯誤信息提示
error_message: '',
// 錯誤提示條的透明度
opacity: 0,
// 控制提交按鈕
go: false
},
register.vue
對子組件綁定事件
:*error_message*.*sync*="message.error_message"
對 error_message 進(jìn)行數(shù)據(jù)監(jiān)視, 每當(dāng)error_message發(fā)生改變時,就進(jìn)行一次提示
watch: {
'message.error_message': {
handler(){
this.alertmessage()
}
}
}
input.vue
input每次觸發(fā) @blur="style($event)" 的時候, 根據(jù) input_data.error_type 的值, 觸發(fā) update:error_message 事件, input_data.message[error_type]為參數(shù),以改變error_message的值
即: this.$emit('update:error_message', this.input_data.message[0])
四 格式檢驗(yàn)
根據(jù)父組件傳過來的數(shù)據(jù) input_data 中的 reg對value值進(jìn)行檢驗(yàn)
將檢驗(yàn)的結(jié)果反映給 register.vue(父組件)
檢驗(yàn)分為兩種情況:
? 格式無誤: 將 input_data 中的state修改為true.
? 格式有誤: 判斷錯誤類型, 修改 error_type
我們不能直接在 input.vue 中修改 input_data 的數(shù)據(jù).
單向數(shù)據(jù)流
所有的 props 都遵循著單向綁定原則,props 因父組件的更新而變化,自然地將新的狀態(tài)向下流往子組件,而不會逆向傳遞。
我們需要在 register.vue 中為 input.vue 綁定自定義事件, 子組件將數(shù)據(jù)以參數(shù)的形式傳給父組件,并觸發(fā)($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: {
// 根據(jù) is_format判斷數(shù)據(jù)格式是否正確,并將檢驗(yàn)的信息傳給父組件
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框的檢驗(yàn)
檢驗(yàn)input_data中是否有state為false的對象.
有就根據(jù)error_type進(jìn)行錯誤提示
go變量控制是否觸發(fā)提交表單.
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
}
寫在最后
到此這篇關(guān)于Vue組件封裝之input輸入框的文章就介紹到這了,更多相關(guān)Vue組件封裝input輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁
這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05
將VUE項(xiàng)目部署到服務(wù)器的詳細(xì)步驟
經(jīng)過一段時間的探索,前端后端都有大致的樣子了,下面就是部署到服務(wù)器,這篇文章主要給大家介紹了關(guān)于將VUE項(xiàng)目部署到服務(wù)器的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04

