a-switch和a-popconfirm联合使用，进行二次确认-优快云博客

本文介绍了如何在实际业务开发中，通过a-switch和a-popconfirm组件实现对关闭操作的二次确认，避免a-switch的change方法提前改变状态。作者提供了在插槽中使用的示例代码和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际业务开发中，经常遇到需要二次确认的操作，其他的组件好说，这里主要介绍下如何使用a-switch和a-popconfirm进行二次确认操作的开发，由于每次点击a-swtich的时候，都会先触发a-switch的change方法，自动先将a-switch的状态修改了，没有达到预期的，二次确认之后再修改a-switch状态，所以这里需要特殊处理，具体代码如下：

//这里演示代码是在插槽中使用，在其他地方使用也是一样的情况
<span slot="action" slot-scope="text, record">
          <a-popconfirm
            v-if="record.status"
            title="确定要关闭吗?"
            @confirm="statusAction(record)"
            >
            <a-switch :checked="record.status" checked-children="开启" un-checked-children="关闭"/>
            </a-popconfirm>
            <a-switch v-else :checked="record.status" @change="statusAction(record)" checked-children="开启" un-checked-children="关闭"/>
          
        </span>


statusAction(record) {
    record.status = !record.status;
}

因为需要a-switch关闭的时候做二次确认，打开的时候不需要，所以这里准备两个a-switch，一个是关闭时使用，一个是打开时使用，打开时就是正常的操作，要注意配置@change方法，关闭的时候结合a-popconfirm使用即可