当前位置：首页 > news >正文

el-switch切换之前二次确认

news 来源：原创 2025/6/26 3:09:18

需求：

点击el-switch开关按钮，弹窗提示“是否确定切换”，点击“是”，改变开关状态，点击“否”，不改变开关状态。

示例代码

<template>
  <div>
    <el-popconfirm
      title="确定要切换开关状态吗？"
      confirm-button-text="确定"
      cancel-button-text="取消"
      @confirm="confirmChange"
      @cancel="cancelChange"
    >
      <template #reference>
        <el-switch
          v-model="switchValue"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleChange"
          :before-change="beforeChange"
        />
      </template>
    </el-popconfirm>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const switchValue = ref(false);

const beforeChange = () => {
  return false;//不改变开关状态
};

const handleChange = (value) => {
  console.log('Switch value changed to:', value);
};

const confirmChange = () => {
//点击“是”，改变开关状态
  switchValue.value = !switchValue.value;
};

const cancelChange = () => {
  console.log('取消了切换操作');
};

</script>