vue 实现el-radio在点击时询问用户是否继续切换/el-radio添加取消事件
在一个项目中,使用el-radio-group来切换页面模式,在切换页面时,如果内容区的表单有内容需要被清空,于是需要在切换前让用户确认一下。但是el-raiod-group没有提供类似beforeChange的函数钩子,于是只能自己想办法实现了。使用:value和@input取代 v-model<el-radio-group :value="gluingMode" @input="test
·
在一个项目中,使用el-radio-group来切换页面模式,在切换页面时,如果M2页面的内容区的表单有内容需要被清空,于是需要在切换前让用户确认一下。但是el-raiod-group没有提供类似beforeChange的函数钩子,于是只能自己想办法实现了。
使用:value和@input取代 v-model
<el-radio-group :value="gluingMode" @input="testHandle">
<el-radio :key="1" label="M1">模式1</el-radio>
<el-radio :key="2" label="M2">模式2</el-radio>
</el-radio-group>
@input的方法
testHandle(name){
// 判断内容区表单是否有值,无值的可直接切换无需询问
const machineCode_arrs = Object.keys(app.information)
let isFilledContent = false
machineCode_arrs.length > 0?isFilledContent = true : isFilledContent = false
if (name === 'M2') {
this.messageList.push({
message: '已切换为:['+name+']模式',
time: new Date(),
})
sessionStorage.setItem("scanMode", name)
this.gluingMode = name
}
if (name === 'M1') {
// 如果内容区表单已填写数据
if (isFilledContent===true) {
this.gluingMode = 'M2'
const isflag = window.confirm("是否要切换为M1模式,继续将清空页面数据?")
if (isflag) {
this.gluingMode = name
sessionStorage.setItem("scanMode", name)
if (machineCode_arrs && machineCode_arrs.length > 0) {
machineCode_arrs.forEach(item => {
// 清空表单值
this.$set(app.information[item],'total','')
this.$set(app.information[item],'postName','')
})
// 部分页面值需要刷新才能清空
location.reload()
setTimeout(() =>{
this.messageList.push({
message: '已切换为:['+name+']模式',
time: new Date(),
})
},4)
}
} else {
return false
}
} else {
// 如果表单没有数据,则直接切换就好
this.messageList.push({
message: '已切换为:['+name+']模式',
time: new Date(),
})
this.gluingMode = name
sessionStorage.setItem("scanMode", name)
}
}
},
更多推荐
已为社区贡献39条内容
所有评论(0)