elementUI 开关（switch）组件单击事件及disabled样式问题

elementUI switch组件

• 无click事件，想要二次确认后再进行状态更改

• 使用change事件不好用会先更新状态，不好用

  解决

<el-switch
@click.native.prevent="updataStatus(xxx,xxx,xxx)",
disabled
>
</el-switch>

• 添加@click.native.prevent方法达到目的，

  • 给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件，
  • prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()

• 与此同时需要打开disabled属性

  • 是因为不加disabled会出现调用两次的非理想状态

disabled样式问题

• 保证修改完后同正常无异

• 在设置disabled后开关会有鼠标禁用的样式及透明度的变化，我们需要做修改。

  不建议在这里修改，我没改出来。目前方法是去掉scoped，你改的代码直接生效，
  但是不建议在写有scoped的style标签里修改，是因为scoped表示它的样式作用于当下的模块，很好的实现了样式私有化的目的

  <style lang="less" scoped>
  </style>

  或者使用深度选择器 >>> || /deep/ 进行修改

  <style>
  </style>

  或者在原有style标签外再加一个style标签写在新加的标签里

  <style>
  /* 修改elementUI-switch组件 disabled样式 */
  .el-switch.is-disabled {
   opacity: 1;
  }
  .el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label {
  cursor: pointer !important;
  }
  </style>