el-switch的before-change实战：如何优雅实现状态切换前的二次确认

1. 为什么需要二次确认机制

在日常开发中，我们经常会遇到需要用户确认操作的场景。比如在管理系统里，管理员要修改某个关键配置的状态，这时候如果直接切换而不做任何提示，很容易因为误操作导致严重后果。想象一下，你正在浏览一个商品列表，不小心点到了"下架"按钮，商品立刻就从前台消失了——这种体验对用户来说简直是一场灾难。

el-switch组件是Element UI中非常常用的状态切换控件，它默认的行为是点击后立即切换状态。但在实际业务中，很多关键操作都需要增加一个"缓冲层"，这就是before-change属性大显身手的地方。通过这个属性，我们可以在状态真正改变前插入一个确认环节，给用户一个反悔的机会。

我曾在项目中遇到过这样的情况：用户反馈说经常误触开关导致数据被意外修改。后来我们给所有关键操作都加上了二次确认，误操作率直接下降了80%。这种优化成本低但效果显著，是提升用户体验的经典案例。

2. before-change的基本用法

先来看一个最简单的before-change实现：

<el-switch 
  v-model="switchValue"
  :before-change="handleBeforeChange"
/>

const handleBeforeChange = () => {
  return new Promise((resolve) => {
    this.$confirm('确定要切换状态吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      resolve(true) // 允许切换
    }).catch(() => {
      resolve(false) // 阻止切换
    })
  })
}

这里有几个关键点需要注意：

1. before-change