重点出的是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>