vue 实现el-radio在点击时询问用户是否继续切换/el-radio添加取消事件

在一个项目中,使用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)
              }  
            }
          },
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值