zoukankan      html  css  js  c++  java
  • Element-UI Radio 取消选中

    一、前言

    在项目中,用的展示几个模块。首先默认会显示一些内容,用单选框选择其他几个模块(这里是用单选框做的)。

    现在的新需求是,可以恢复到默认显示的内容。但是 Radio 单选后再点击自己不会取消(笑哭~~)。

    所以就找曲线实现这个功能。

    二、Change 事件

    Radio 暴露出来的只有一个 change 事件。那就先看这个事件能不能实现。

    通过调试发现:点击已经选择的 Radio ,不会触发 Change 事件。

    那么用这个就不能实现取消的功能。

    三、原生 Click 事件

    既然组件本身暴露出来的 Change 事件不行,那么就通过原生事件。

    添加原生事件:click.native.prevent

    <el-radio v-model="activeModel" label="flood" @click.native.prevent="onRadioChange('flood')">显示</el-radio>

    对应的 onRadioChange 里面做修改:

        onRadioChange(e) {
         // 当点击已经选中的把 activeModel 置空,就是取消选中,并返回
          if (this.activeModel === e) {
            this.activeModel = ''
            return
          }
         // 不是选中,选中当前点击 Radio
          this.activeModel = e
         // 选中操作
        }

    这样就达到需求的效果

  • 相关阅读:
    最流行的javascript 代码规范
    jquery里阻止冒泡ev.stopPropagation()
    jquery里阻止冒泡ev.stopPropagation()
    响应式页面设计原理
    fromCharCode()的用法
    slice的用法
    java 反转数组
    java 一个数组的长度
    Java访问数组
    java 数组的定义
  • 原文地址:https://www.cnblogs.com/zhurong/p/13231372.html
Copyright © 2011-2022 走看看