vue 自定義v-model 封裝地址選擇組件，并實現數據綁定和表單驗證
vue是雙向數據綁定的，v-model可以自動搜集數據，這在我們使用過程中可以說是非常方便。但是，在開發中，如果想把代碼寫的更精簡，提供更多的復用。那么我們就免不了想自己封裝一個用有v-model屬性的組件。（本人工作中，就迫切有這種需求，因為表單頁面太大，如果不做封裝精簡，就算用了element-ui這種已經封裝過的框架，頁面依然會很龐大！）
關于v-model
要實現自己的v-model，首先要了解到，v-model實際上是由兩部分組成的，即value和input事件，例如下面兩行代碼，是等價的
<input v-model="name">
<input :value="name" @input="name=$event.target.value">
知道了原理，我們就可以開干了。
下面以分裝一個三聯動地址選擇的小組件為例，使用的select基于element-ui
新建vue組件choose-address-form-item.vue
這里封裝一個表單中的地址選擇組件，所以默認認為他的父組件由<el-form>標簽
封裝組件
先上html部分代碼，代碼使用flex布局，樣式相關的類名可忽略。這里說明下 rowStart樣式：
.rowStart {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
<el-row>
<el-form-item :label="title" label-position="top" class="addressFormItemBox" :required="required" :prop="addressProp">
<div v-if="edit" class="rowStart">
<!--@change="changeProvince"-->
<el-select class="addressFormItem" :size="size" :value="address.provinceId" @input="changeProvince" placeholder="請選擇">
<el-option
v-for="item in provinceList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-select class="addressFormItem" :size="size" :value="address.cityId" @change="changeCity" placeholder="請選擇">
<el-option
v-for="item in cityList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-select class="addressFormItem" v-if="isNotTwoLevels" :size="size" :value="address.districtId" @change="changeDistrict" placeholder="請選擇">
<el-option
v-for="item in districtList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-input class="addressFormInput" v-if="showStreet" :style="{width:streetInputWidth}" :size="size" placeholder="請輸入" :value="address.street" @blur="streetBlur" @input="streetInput"></el-input>
</div>
<span v-else>{{fullAddress}}</span>
</el-form-item>
</el-row>
這里重點說下el-select和el-input的拆分。el-select本來的v-model被重新寫為 :value="address.provinceId" @input="changeProvince"
<el-select class="addressFormItem" :size="size" :value="address.provinceId" @input="changeProvince" placeholder="請選擇">
<el-option
v-for="item in provinceList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
由于地址里面有三個input標簽，為了方便處理，并且能實現表單驗證，所以統一用address來接收數據
address.provinceId是省，address.cityId是城市，address.districtId是縣
el-form-item上，:prop="addressProp"，指定prop用于設置prop屬性，便于表單驗證。
isNotTwoLevels 用于判斷是否是直轄市，直轄市只有兩級，隱藏縣級。
下面看看js部分
<script>
import {mapState} from 'vuex'
import {reqRegionInfo} from "../api/commonApi"
import {isNumber} from "../utils/validate";
export default {
name: 'addressFormItem',
props:{
required:{
type:Boolean,
default:true
},//是否必須
title:{
type:String,
default:'選擇地址'
},//標題
showStreet:{
type:Boolean,
default:true
},//是否顯示輸入詳情地址
defaultAddress:{
type:Object,
default:()=>{
return {}
}
},//默認地址
edit:{
type:Boolean,
default:true
},//是否可編輯
size:{
type:String,
default:'mini'
},//尺寸
inputWidth:{
type:[Number,String],
default:'auto'
},
addressProp:{
type:String,
default:'address'
}
},
data() {
return {
address:{},//地址
isNotTwoLevels:false,//是否直轄市
cityList:[],//市
districtList:[],//縣
fullAddress:'',//地址全部信息
projectAddress:[],//地址數組數據
streetInputWidth:'auto',//地址輸入框寬度
getDefault:false,//是否獲取了默認值
}
},
computed: {
...mapState(['provinceList'])
},
async mounted() {
let {inputWidth}=this
this.streetInputWidth=(typeof inputWidth==='number' || isNumber(inputWidth)) ? (inputWidth+'px') : inputWidth
this.address=this.defaultAddress
},
methods: {
// 獲取省市區信息 code 父級code 000000 省份 type類型 （province省份 city城市 district區域縣 ）
async getRegionInfo(code,type=0){
let result=await reqRegionInfo(code)
// //console.log(result)
this[['provinceList','cityList','districtList'][type]]=result
;(type===2) && (this.isNotTwoLevels=!!result.length)
// //console.log(this.isNotTwoLevels)
},
// 點擊切換省份
changeProvince(val){
this.$set(this.address,'provinceId',val)
this.$set(this.address,'cityId','')
this.$set(this.address,'districtId','')
this.$set(this.address,'street','')
this.districtList = []
this.cityList = []
this.getRegionInfo(val,1)
let thisProvince=this.provinceList.filter((item,index)=>item.regionCode===val)
// //console.log(thisProvince)
this.projectAddress[1]=this.projectAddress[2]=''
this.projectAddress[0]=[thisProvince[0].regionName]
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
// 點擊切換城市
changeCity(val){
this.districtList = []
this.getRegionInfo(val,2)
this.$set(this.address,'cityId',val)
this.$set(this.address,'districtId','')
// //console.log(this.cityList)
let thisCity=this.cityList.filter(item=>item.regionCode===val)
this.projectAddress[2]=''
this.projectAddress[1]=thisCity[0].regionName
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
// 點擊切換區縣
async changeDistrict(val){
let {districtList}=this
this.$set(this.address,'districtId',val)
// //console.log(this.address)
let thisdistrictList=districtList.filter(item=>item.regionCode===val)
this.projectAddress[2]=thisdistrictList[0].regionName
this.projectAddress[3] && this.getLonLat(this.projectAddress.join(''))
this.address.projectAddress= this.projectAddress
this.address.showStreet= this.showStreet
this.$emit('input',this.address)
},
//獲取經緯度
async getLonLat(data){
let lngLatArr = await this.$globalMethods.getLngLat(AMap,data)
// //console.log(lngLatArr)
let {projectAddress,isNotTwoLevels,showStreet}=this
this.address={...this.address,projectAddress,isNotTwoLevels,showStreet}
this.$emit('getLngLatInfo',{
longitude:lngLatArr[0].lng,
latitude:lngLatArr[0].lat,
})
// //console.log(this.address)
this.$emit('input',this.address)
},
//詳細地址改變
streetBlur(e){
this.projectAddress[3]=e.target.value
// //console.log(this.projectAddress.join(''))
;((this.isNotTwoLevels && this.projectAddress[1]) || this.projectAddress[2]) && this.getLonLat(this.projectAddress.join(''))
this.address.projectAddress= this.projectAddress
let {isNotTwoLevels,showStreet}=this
this.address={...this.address,projectAddress:this.projectAddress,isNotTwoLevels,showStreet}
this.$emit('input',this.address)
},
//
streetInput(value){
this.$set(this.address,'street',value)
this.$emit('input', this.address)
}
},
watch:{
defaultAddress:{
deep:true,
handler:async function (value) {
console.log(value)
let {cityId,provinceId,districtId ,street }=value
if(this.getDefault) return
if(provinceId && cityId){
let cityList = await reqRegionInfo(provinceId)
this.cityList=cityList
let districtList = await reqRegionInfo(cityId)
this.districtList=districtList
//console.log(districtList)
this.isNotTwoLevels=!!districtList.length
this.address={...value}
this.getDefault=true
let province=provinceId ? this.provinceList.filter(item=>item.regionCode===provinceId)[0].regionName : ''
let city=cityId ? cityList.filter(item=>item.regionCode===cityId)[0].regionName : ''
let district=districtId ? districtList.filter(item=>item.regionCode===districtId)[0].regionName : ''
this.fullAddress=`${province} ${city} ${district} ${street}`
}
}
},
}
}
</script>
首先說下props部分
重點的:
defaultAddress:{
type:Object,
default:()=>{
return {}
}
},//默認地址
考慮到編輯狀態，會從后臺獲取數據顯示默認數據，用defaultAddress接收，
對應的需要在watch里面做監聽。并把值賦給address
watch:{
defaultAddress:{
deep:true,
handler:async function (value) {
console.log(value)
if(!value){
//沒有數據時，清空
this.address={}
this.cityList=[]
this.districtList=[]
}
let {cityId,provinceId,districtId ,street }=value
//有數據時只允許更新一次
if(this.getDefault) return
if(provinceId && cityId){
let cityList = await reqRegionInfo(provinceId)
this.cityList=cityList
let districtList = await reqRegionInfo(cityId)
this.districtList=districtList
//console.log(districtList)
this.isNotTwoLevels=!!districtList.length
this.address={...value}
this.getDefault=true
let province=provinceId ? this.provinceList.filter(item=>item.regionCode===provinceId)[0].regionName : ''
let city=cityId ? cityList.filter(item=>item.regionCode===cityId)[0].regionName : ''
let district=districtId ? districtList.filter(item=>item.regionCode===districtId)[0].regionName : ''
this.fullAddress=`${province} ${city} ${district} ${street}`
}
}
},
}
methods部分
看重點：
// 點擊切換省份
changeProvince(val){
this.$set(this.address,'provinceId',val)
this.$set(this.address,'cityId','')
this.$set(this.address,'districtId','')
this.$set(this.address,'street','')
this.districtList = []
this.cityList = []
this.getRegionInfo(val,1)
let thisProvince=this.provinceList.filter((item,index)=>item.regionCode===val)
// //console.log(thisProvince)
this.projectAddress[1]=this.projectAddress[2]=''
this.projectAddress[0]=[thisProvince[0].regionName]
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
// 點擊切換城市
changeCity(val){
this.districtList = []
this.getRegionInfo(val,2)
this.$set(this.address,'cityId',val)
this.$set(this.address,'districtId','')
// //console.log(this.cityList)
let thisCity=this.cityList.filter(item=>item.regionCode===val)
this.projectAddress[2]=''
this.projectAddress[1]=thisCity[0].regionName
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
//詳細地址輸入
streetInput(value){
this.$set(this.address,'street',value)
this.$emit('input', this.address)
}
這里的重點在于，當下拉框發生改變，輸入框發生改變時，要及時把數據返給父級組件：
在changeProvince函數中，changeCity函數中，streetInput中，均需要執行 this.$emit('input',this.address)
組件使用和表單驗證
封裝完了，開始使用
在views中新建form.vue，并且引用ChooseAddressFormItem組件：
import ChooseAddressFormItem from ../components/ChooseAddressFormItem.vue
在form.vue template中使用：
<ChooseAddressFormItem title="項目地址：" @getLngLatInfo="getLngLatInfo" size="larger" input-width="400px" v-model="projCardForm.address" addressProp=“address"/>
這里重點有三：
第一個是v-model="projCardForm.address"，這里是數據綁定；
第二是addressProp=“address，指定子組件prop屬性，用于表單驗證，
第三，表單驗證：下面仔細說下表單驗證
由于要驗證的是一個對象，并且還有存在直轄市等特殊情況，不能依靠element-ui本身的基礎驗證，需要自定義，在表單驗證數據rules中
rules: {
address:[{validator:(rule, value, callback)=>validAddressInfo(rule, value, callback),trigger:['blur', 'change']}],
},
element-ui提供了自定義驗證方式validator函數，參數有rule,value,callback，這里單獨去定義一個驗證函數
src下面新建utils文件夾，utils文件夾下面新建validateMethods.js
在validateMethods.js里面定義地址驗證方法
validateMethods.js
//檢查地址是否完善——地址封裝組件
export const validAddressInfo=(rule, value, callback,msg='請完善地址信息')=>{
//如果值不是對象，肯定不通過，調用 callback(new Error(msg))函數
if(!value || !(value instanceof Object)){
callback(new Error(msg))
return
}
let {districtId,isNotTwoLevels,showStreet,street}=value
//顯示地址輸入框的時候，如果地址輸入框沒有值，肯定不通過
if(showStreet){
if(!street){
callback(new Error(msg))
return
}
}
最后的情況，非直轄市情況下，沒有縣id，肯定不通過
if(!districtId && isNotTwoLevels){
callback(new Error(msg))
}
}
那么現在在form.vue中引入地址驗證函數validAddressInfo，然后賦值給rule中的validator就行
<script>
import {validAddressInfo} from '../utils/validateMethods.js'
export default{
data(){
return{
rules: {
address:[{validator:(rule, value, callback)=>validAddressInfo(rule, value, callback),trigger:['blur', 'change']}],
},
}
}
}
</script>
到此，組件封裝和使用講完。不僅簡化了代碼，而且數據綁定，表單驗證都沒少。
后面附上組件全部代碼
由于本組件地址聯動數據通過服務器請求獲取的，請自動忽略，你只需要找到相關數據對上即可
<!--選擇地址-->
<template>
<el-row>
<el-form-item :label="title" label-position="top" class="addressFormItemBox" :required="required" :prop="addressProp">
<div v-if="edit" class="rowStart">
<!--@change="changeProvince"-->
<el-select class="addressFormItem" :size="size" :value="address.provinceId" @input="changeProvince" placeholder="請選擇">
<el-option
v-for="item in provinceList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-select class="addressFormItem" :size="size" :value="address.cityId" @change="changeCity" placeholder="請選擇">
<el-option
v-for="item in cityList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-select class="addressFormItem" v-if="isNotTwoLevels" :size="size" :value="address.districtId" @change="changeDistrict" placeholder="請選擇">
<el-option
v-for="item in districtList"
:key="item.regionCode"
:label="item.regionName"
:value="item.regionCode">
</el-option>
</el-select>
<el-input class="addressFormInput" v-if="showStreet" :style="{width:streetInputWidth}" :size="size" placeholder="請輸入" :value="address.street" @blur="streetBlur" @input="streetInput"></el-input>
</div>
<span v-else>{{fullAddress}}</span>
</el-form-item>
</el-row>
</template>
<script>
import {mapState} from 'vuex'
import {reqRegionInfo} from "../api/commonApi"
import {isNumber} from "../utils/validate";
export default {
name: 'addressFormItem',
props:{
required:{
type:Boolean,
default:true
},//是否必須
title:{
type:String,
default:'選擇地址'
},//標題
showStreet:{
type:Boolean,
default:true
},//是否顯示輸入詳情地址
defaultAddress:{
type:Object,
default:()=>{
return {}
}
},//默認地址
edit:{
type:Boolean,
default:true
},//是否可編輯
size:{
type:String,
default:'mini'
},//尺寸
inputWidth:{
type:[Number,String],
default:'auto'
},
addressProp:{
type:String,
default:'address'
}
},
data() {
return {
address:{},//地址
isNotTwoLevels:false,//是否直轄市
cityList:[],//市
districtList:[],//縣
fullAddress:'',//地址全部信息
projectAddress:[],//地址數組數據
streetInputWidth:'auto',//地址輸入框寬度
getDefault:false,//是否獲取了默認值
}
},
computed: {
...mapState(['provinceList'])
},
async mounted() {
let {inputWidth}=this
this.streetInputWidth=(typeof inputWidth==='number' || isNumber(inputWidth)) ? (inputWidth+'px') : inputWidth
this.address=this.defaultAddress
},
methods: {
// 獲取省市區信息 code 父級code 000000 省份 type類型 （province省份 city城市 district區域縣 ）
async getRegionInfo(code,type=0){
let result=await reqRegionInfo(code)
// //console.log(result)
this[['provinceList','cityList','districtList'][type]]=result
;(type===2) && (this.isNotTwoLevels=!!result.length)
// //console.log(this.isNotTwoLevels)
},
// 點擊切換省份
changeProvince(val){
this.$set(this.address,'provinceId',val)
this.$set(this.address,'cityId','')
this.$set(this.address,'districtId','')
this.$set(this.address,'street','')
this.districtList = []
this.cityList = []
this.getRegionInfo(val,1)
let thisProvince=this.provinceList.filter((item,index)=>item.regionCode===val)
// //console.log(thisProvince)
this.projectAddress[1]=this.projectAddress[2]=''
this.projectAddress[0]=[thisProvince[0].regionName]
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
// 點擊切換城市
changeCity(val){
this.districtList = []
this.getRegionInfo(val,2)
this.$set(this.address,'cityId',val)
this.$set(this.address,'districtId','')
// //console.log(this.cityList)
let thisCity=this.cityList.filter(item=>item.regionCode===val)
this.projectAddress[2]=''
this.projectAddress[1]=thisCity[0].regionName
this.address.projectAddress= this.projectAddress
this.$emit('input',this.address)
},
// 點擊切換區縣
async changeDistrict(val){
let {districtList}=this
this.$set(this.address,'districtId',val)
// //console.log(this.address)
let thisdistrictList=districtList.filter(item=>item.regionCode===val)
this.projectAddress[2]=thisdistrictList[0].regionName
this.projectAddress[3] && this.getLonLat(this.projectAddress.join(''))
this.address.projectAddress= this.projectAddress
this.address.showStreet= this.showStreet
this.$emit('input',this.address)
},
//獲取經緯度
async getLonLat(data){
let lngLatArr = await this.$globalMethods.getLngLat(AMap,data)
// //console.log(lngLatArr)
let {projectAddress,isNotTwoLevels,showStreet}=this
this.address={...this.address,projectAddress,isNotTwoLevels,showStreet}
this.$emit('getLngLatInfo',{
longitude:lngLatArr[0].lng,
latitude:lngLatArr[0].lat,
})
// //console.log(this.address)
this.$emit('input',this.address)
},
//詳細地址改變
streetBlur(e){
this.projectAddress[3]=e.target.value
// //console.log(this.projectAddress.join(''))
;((this.isNotTwoLevels && this.projectAddress[1]) || this.projectAddress[2]) && this.getLonLat(this.projectAddress.join(''))
this.address.projectAddress= this.projectAddress
let {isNotTwoLevels,showStreet}=this
this.address={...this.address,projectAddress:this.projectAddress,isNotTwoLevels,showStreet}
this.$emit('input',this.address)
},
//
streetInput(value){
this.$set(this.address,'street',value)
this.$emit('input', this.address)
}
},
watch:{
defaultAddress:{
deep:true,
handler:async function (value) {
console.log(value)
if(!value){
//沒有數據時，清空
this.address={}
this.cityList=[]
this.districtList=[]
}
let {cityId,provinceId,districtId ,street }=value
//有數據時只允許更新一次
if(this.getDefault) return
if(provinceId && cityId){
let cityList = await reqRegionInfo(provinceId)
this.cityList=cityList
let districtList = await reqRegionInfo(cityId)
this.districtList=districtList
//console.log(districtList)
this.isNotTwoLevels=!!districtList.length
this.address={...value}
this.getDefault=true
let province=provinceId ? this.provinceList.filter(item=>item.regionCode===provinceId)[0].regionName : ''
let city=cityId ? cityList.filter(item=>item.regionCode===cityId)[0].regionName : ''
let district=districtId ? districtList.filter(item=>item.regionCode===districtId)[0].regionName : ''
this.fullAddress=`${province} ${city} ${district} ${street}`
}
}
},
}
}
</script>
<style scoped lang="scss">
.addressFormItemBox{
.addressFormItem{
margin-right:10px;
}
.addressFormInput{
/*flex:1;*/
}
}
</style>
