el-radio-group，在不同选项切换之前监听事件（判断不同选项是否能够切换)

2024-03-17 05:50:04 分类：前端热度：99 评论： 0

通过使用 :value和 @input 取代 v-model

javascript"><template>
  <div>
    <el-radio-group @input="beforeInputEvent" :value="radio">
      <el-radio :label="1">菠</el-radio>
      <el-radio :label="2">萝</el-radio>
      <el-radio :label="3">肉</el-radio>
    </el-radio-group>
  </div>
</template>
<script>
export default {
  data(){
    return {
      radio: 1
    }
  },
  methods: {
    // 手动改变radio值
    beforeInputEvent(value){
      // 可以在此处做判断
      let that = this
      this.$confirm('确定改变选项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.radio = value
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消选择'
        });
      });
    }
  }
}
</script>