vue-antd?form組件封裝全過(guò)程
更新時(shí)間：2023年04月21日 10:24:29 作者：Demo研習(xí)社
這篇文章主要介紹了vue-antd?form組件封裝全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
表單項(xiàng)–公用組件（vue-antd）
1、廢話(huà)不多說(shuō)，先看具體效果
效果圖
表單校驗(yàn)圖：
校驗(yàn)均寫(xiě)在組件之中，跟當(dāng)前頁(yè)面文件無(wú)任何關(guān)系，當(dāng)前頁(yè)面只接受組件傳遞過(guò)來(lái)的參數(shù)…
2、組件代碼如下
在vue項(xiàng)目中，此處采.js文件形式寫(xiě)組件，并沒(méi)用.vue文件去寫(xiě)…將表單項(xiàng)中的input和change事件暴露出來(lái)。。。
export default {
props: ['value'],
template: `
<div>
<p v-if='typeId == 1' style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)到達(dá)蒸罐地時(shí)間:</span>
<a-date-picker
show-time
:value='SteamtankTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleSteamtankTimeInput"
/>
</p>
<p v-if='typeId == 1' style='width: 80%;display: flex;justify-content: flex-end;align-items: center;'>
<span>預(yù)計(jì)蒸罐所需時(shí)間:</span>
<a-col :span="8">
<a-input
addon-after="小時(shí)"
:value='tankTime'
:disabled='needInput'
@change='handleTankTime'
/>
</a-col>
</p>
<p style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)發(fā)車(chē)時(shí)間:</span>
<a-date-picker
show-time
:value='DepartureTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleDepartureTimeInput"
/>
</p>
<p style='width: 80%;display: flex;justify-content: flex-end;align-items: center;'>
<span>預(yù)計(jì)到裝貨地所需時(shí)間:</span>
<a-col :span="8">
<a-input
addon-after="小時(shí)"
:disabled='needInput'
:value='needLoadAdressTime'
@change='handleNeedLoadAdressTime'
/>
</a-col>
</p>
<p style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)到達(dá)裝貨地時(shí)間:</span>
<a-date-picker
show-time
:value='LoadAddressTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleLoadAddressTimeInput"
/>
</p>
<p style='width: 80%;display: flex;justify-content: flex-end;align-items: center;'>
<span>預(yù)計(jì)裝貨所需時(shí)間:</span>
<a-col :span="8">
<a-input
addon-after="小時(shí)"
:value='loadTime'
:disabled='needInput'
@change='handleLoadFinishTime'
/>
</a-col>
</p>
<p style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)裝貨完成時(shí)間:</span>
<a-date-picker
show-time
:value='LoadFinishTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleLoadFinishTimeInput"
/>
</p>
<p style='width: 80%;display: flex;justify-content: flex-end;align-items: center;'>
<span>預(yù)計(jì)路途所需時(shí)間:</span>
<a-col :span="8">
<a-input
addon-after="小時(shí)"
:value='roadTime'
:disabled='needInput'
@change='handleroadFinishTime'
/>
</a-col>
</p>
<p style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)到達(dá)卸貨地時(shí)間:</span>
<a-date-picker
show-time
:value='UnloadAddressTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleUnloadAddressTimeInput"
/>
</p>
<p style='width: 80%;display: flex;justify-content: flex-end;align-items: center;'>
<span>預(yù)計(jì)卸貨所需時(shí)間:</span>
<a-col :span="8">
<a-input
addon-after="小時(shí)"
:value='unLoadTime'
:disabled='needInput'
@change='handleUnLoadFinishTime'
/>
</a-col>
</p>
<p style='width: 60%;display: flex;justify-content: space-between;align-items: center;'>
<span>預(yù)計(jì)卸貨完成時(shí)間:</span>
<a-date-picker
show-time
:value='UnloadFinishTimeVal'
:allowClear="false"
placeholder="選擇時(shí)間"
@change="handleUnloadFinishTimeInput"
/>
</p>
</div>
`,
watch: {
value(val = {}) {
this.typeId = val.typeId || null
this.tankTime = val.tankTime || null
this.loadTime = val.loadTime || null
this.unLoadTime = val.unLoadTime || null
this.needLoadAdressTime = val.needLoadAdressTime || null
this.roadTime = val.roadTime || null
this.SteamtankTimeVal = val.steamtankTime || null
this.DepartureTimeVal = val.departureTime || null
this.LoadAddressTimeVal = val.loadAddressTime || null
this.LoadFinishTimeVal = val.loadFinishTime || null
this.UnloadAddressTimeVal = val.unLoadAddressTime || null
this.UnloadFinishTimeVal = val.unLoadFinishTime || null
}
},
data() {
let {
steamtankTime,
departureTime,
unLoadFinishTime,
unLoadAddressTime,
loadAddressTime,
loadFinishTime,
ydccId,
typeId,
tankTime,
loadTime,
unLoadTime,
needLoadAdressTime,
roadTime
} = this.value
return {
moment,
ydccId: ydccId || null,
typeId: typeId || null,
SteamtankTimeVal: steamtankTime || null,
DepartureTimeVal: departureTime || null,
LoadAddressTimeVal: loadAddressTime || null,
LoadFinishTimeVal: loadFinishTime || null,
UnloadAddressTimeVal: unLoadAddressTime || null,
UnloadFinishTimeVal: unLoadFinishTime || null,
tankTime: tankTime || null,
loadTime: loadTime || null,
unLoadTime: unLoadTime || null,
needLoadAdressTime: needLoadAdressTime || null,
roadTime: roadTime || null,
minutes30: 1800000,
hour2: 7200000,
needInput: true,
}
},
methods: {
async getLoadTime(steamTankTime) {
let minutes30 = this.minutes30
let hour2 = this.hour2
let params = {
ydccId: this.ydccId,
steamTankAddressId: ''
}
let result = await predictYdccTime(params)
if (result.code == 200) {
let streamAddressToSendAddressTime = Number(result.data.streamAddressToSendAddressTime) * 1.8 //蒸罐地到發(fā)貨地時(shí)間（ms）
let ydccSendToRecTime = Number(result.data.ydccSendToRecTime) * 1.8 //發(fā)貨地到收貨地時(shí)間（ms）
this.needLoadAdressTime = ((streamAddressToSendAddressTime) / 3600000).toFixed(2)
this.roadTime = ((ydccSendToRecTime - hour2) / 3600000).toFixed(2)
this.DepartureTimeVal = moment(Number(steamTankTime) + minutes30)
this.LoadAddressTimeVal = moment(Number(moment(this.DepartureTimeVal).format('x')) + streamAddressToSendAddressTime)
this.LoadFinishTimeVal = moment(Number(moment(this.LoadAddressTimeVal).format('x')) + hour2)
this.UnloadAddressTimeVal = moment(Number(moment(this.LoadFinishTimeVal).format('x')) + ydccSendToRecTime)
this.UnloadFinishTimeVal = moment(Number(moment(this.UnloadAddressTimeVal).format('x')) + hour2)
let dataTime = {
steamtankTime: moment(steamTankTime),
departureTime: this.DepartureTimeVal,
loadAddressTime: this.LoadAddressTimeVal,
loadFinishTime: this.LoadFinishTimeVal,
unLoadAddressTime: this.UnloadAddressTimeVal,
unLoadFinishTime: this.UnloadFinishTimeVal,
typeId: 1,
needLoadAdressTime: this.needLoadAdressTime,
roadTime: this.roadTime
}
this.triggerChange(dataTime)
this.needInput = false
} else {
//.....
}
},
async getDepartureTime(departureTime) {
let hour2 = this.hour2
let params = {
ydccId: this.ydccId,
steamTankAddressId: ''
}
let result = await predictYdccTime(params)
if (result.code == 200) {
let streamAddressToSendAddressTime = Number(result.data.streamAddressToSendAddressTime) * 1.8 //發(fā)車(chē)到發(fā)貨地時(shí)間（ms）
let ydccSendToRecTime = Number(result.data.ydccSendToRecTime) * 1.8 //發(fā)貨地到收貨地時(shí)間（ms）
this.needLoadAdressTime = (0 * 3600000).toFixed(2)
this.roadTime = ((ydccSendToRecTime - hour2) / 3600000).toFixed(2)
this.LoadAddressTimeVal = moment(Number(departureTime) + streamAddressToSendAddressTime)
this.LoadFinishTimeVal = moment(Number(moment(this.LoadAddressTimeVal).format('x')) + hour2)
this.UnloadAddressTimeVal = moment(Number(moment(this.LoadFinishTimeVal).format('x')) + ydccSendToRecTime)
this.UnloadFinishTimeVal = moment(Number(moment(this.UnloadAddressTimeVal).format('x')) + hour2)
let dataTime = {
steamtankTime: moment(departureTime),
departureTime: this.DepartureTimeVal,
loadAddressTime: this.LoadAddressTimeVal,
loadFinishTime: this.LoadFinishTimeVal,
unLoadAddressTime: this.UnloadAddressTimeVal,
unLoadFinishTime: this.UnloadFinishTimeVal,
typeId: 0,
needLoadAdressTime: this.needLoadAdressTime,
roadTime: this.roadTime
}
this.triggerChange(dataTime)
this.needInput = false
} else {
//.....
}
},
// 設(shè)置時(shí)間間隔
handleTankTime(e) { //蒸罐所需時(shí)間
const { value } = e.target
let tankTime = this.changeTime(value)
this.minutes30 = tankTime
this.tankTime = value
this.DepartureTimeVal = moment(Number(moment(this.SteamtankTimeVal).format('x')) + tankTime)
this.triggerChange({ tankTime: this.tankTime })
this.triggerChange({ departureTime: this.DepartureTimeVal })
},
handleLoadFinishTime(e) { //裝貨所需時(shí)間
const { value } = e.target
let loadFinishTime = this.changeTime(value)
this.hour2 = loadFinishTime
this.loadTime = Number(value)
this.LoadFinishTimeVal = moment(Number(moment(this.LoadAddressTimeVal).format('x')) + loadFinishTime)
this.triggerChange({ loadFinishTime: this.LoadFinishTimeVal })
this.triggerChange({ loadTime: this.loadTime })
},
handleUnLoadFinishTime(e) { //卸貨所需時(shí)間
const { value } = e.target
let unLoadFinishTime = this.changeTime(value)
this.hour2 = unLoadFinishTime
this.unLoadTime = Number(value)
this.UnloadFinishTimeVal = moment(Number(moment(this.UnloadAddressTimeVal).format('x')) + unLoadFinishTime)
this.triggerChange({ unLoadFinishTime: this.UnloadFinishTimeVal })
this.triggerChange({ unLoadTime: this.unLoadTime })
},
handleNeedLoadAdressTime(e) { //到達(dá)裝貨地所需時(shí)間
const { value } = e.target
let unLoadNeedTime = this.changeTime(value)
this.needLoadAdressTime = Number(value)
this.LoadAddressTimeVal = moment(Number(moment(this.DepartureTimeVal).format('x')) + unLoadNeedTime)
this.triggerChange({ loadAddressTime: this.LoadAddressTimeVal })
this.triggerChange({ needLoadAdressTime: this.needLoadAdressTime })
},
handleroadFinishTime(e) { //路途所需時(shí)間
const { value } = e.target
let roadNeedTime = this.changeTime(value)
this.roadTime = Number(value)
this.UnloadAddressTimeVal = moment(Number(moment(this.LoadFinishTimeVal).format('x')) + roadNeedTime)
this.triggerChange({ unLoadAddressTime: this.UnloadAddressTimeVal })
this.triggerChange({ roadTime: this.roadTime })
},
changeTime(val) {
let value = Number(val)
let oneHour = 3600000
return value * oneHour
},
handleSteamtankTimeInput(_moment, dateString) {
this.SteamtankTimeVal = _moment
let steamTankTime = Number(moment(_moment).format('x'))
this.getLoadTime(steamTankTime)
this.triggerChange({ steamtankTime: this.SteamtankTimeVal })
},
handleDepartureTimeInput(_moment, dateString) {
this.DepartureTimeVal = _moment
let departureTime = Number(moment(_moment).format('x'))
this.getDepartureTime(departureTime);
this.triggerChange({ departureTime: this.DepartureTimeVal })
},
handleLoadAddressTimeInput(_moment, dateString) {
this.LoadAddressTimeVal = _moment
this.triggerChange({ loadAddressTime: this.LoadAddressTimeVal })
},
handleLoadFinishTimeInput(_moment, dateString) {
this.LoadFinishTimeVal = _moment
this.triggerChange({ loadFinishTime: this.LoadFinishTimeVal })
},
handleUnloadAddressTimeInput(_moment, dateString) {
this.UnloadAddressTimeVal = _moment
this.triggerChange({ unLoadAddressTime: this.UnloadAddressTimeVal })
},
handleUnloadFinishTimeInput(_moment, dateString) {
this.UnloadFinishTimeVal = _moment
this.triggerChange({ unLoadFinishTime: this.UnloadFinishTimeVal })
},
triggerChange(changedValue) {
let output = Object.assign({
steamtankTime: this.SteamtankTimeVal,
departureTime: this.DepartureTimeVal,
loadAddressTime: this.LoadAddressTimeVal,
loadFinishTime: this.LoadFinishTimeVal,
unLoadAddressTime: this.UnloadAddressTimeVal,
unLoadFinishTime: this.UnloadFinishTimeVal,
tankTime: this.tankTime,
loadTime: this.loadTime,
unLoadTime: this.unLoadTime,
needLoadAdressTime: this.needLoadAdressTime,
roadTime: this.roadTime,
typeId: this.typeId
}, changedValue)
this.$emit('input', output)
this.$emit('change', output)
}
}
代碼比較繁瑣，還未進(jìn)行精簡(jiǎn)操作…湊合看吧
3、在相應(yīng)地方進(jìn)行引入
剩下的就該怎么玩，就怎么玩咯
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3 JSX解釋器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue如何給組件添加點(diǎn)擊事件?@click.native
這篇文章主要介紹了Vue如何給組件添加點(diǎn)擊事件?@click.native，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開(kāi)發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐
本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明
這篇文章主要介紹了Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
基于vue-router 多級(jí)路由redirect 重定向的問(wèn)題
今天小編就為大家分享一篇基于vue-router 多級(jí)路由redirect 重定向的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
一直對(duì)編譯原理的東西都有一種恐懼感，感覺(jué)太難了，看不懂，打開(kāi)vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問(wèn)題
這篇文章主要介紹了后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題
這篇文章主要介紹了Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08