element-ui 点击Switch开关弹出对话框确认后再改变switch开关状态

前言

最近项目中用到了Switch开关组件，需求是点击switch开关按钮后，弹出一个确认对话框，根据用户的操作来决定是否改变switch的开关状态。

 Attributes

参数	说明	类型	默认值
value / v-model	绑定值	boolean / string / number	—
disabled	是否禁用	boolean	false
active-color	switch 打开时的背景色	string	#409EFF
inactive-color	switch 关闭时的背景色	string	#C0CCDA

 Events

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

 

以上是本例中所用到的Switch开关组件的四个属性值，以及组件自身提供的change事件。

其中需要着重点出的是disabled属性，设置disabled为true表示禁用此组件，此时change事件不会触发，我们便自定义加一个click事件，如此便可实现需求。

细节注意：

1、使用.native修饰符来监听原生click事件

2、修改组件禁用状态时的样式

 实例

<template>
  <div>
    <span>是否开启验证</span>
    <el-switch
      v-model="isNeedCaptcha"
      class="captcha-img"
      active-color="#13ce66"
      inactive-color="#ff4949"
      disabled
      @click.native="changeIsNeedCaptcha(isNeedCaptcha)"
    ></el-switch>
  </div>
</template>

<script>
export default {
  name: 'switch-test',
  data () {
    return {
      isNeedCaptcha: false
    }
  },
  methods: {
    // 开启关闭验证
    async changeIsNeedCaptcha (value) {
      this.$confirm(`此操作将${!value ? '开启' : '关闭'}验证, 是否继续？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        this.isNeedCaptcha = !value
      }).catch(() => {
        this.$message.error('取消操作')
      })
    },
  },
  mounted () {

  },
}
</script>

<style lang="less">
.captcha-img.el-switch.is-disabled {
  opacity: 1;
  .el-switch__core {
    cursor: pointer;
  }
}
</style>

完