vue dialog弹窗步骤返回按钮和关闭按钮冲突解决

操作情景：
dialog弹窗是一个步骤条弹窗。点击下一步进行下一步操作，点击返回，返回上一步操作内容，因该弹窗是一个公共组件，关闭按钮和返回按钮都将弹窗进行了关闭操作，现需要在第一步的时候，返回按钮的文字由“返回”显示为“取消”，并且点击“取消”关闭弹窗，而点击“返回”则返回上一步并且不关闭弹窗。

解决办法：

<common-dialog
      :key="dialogKey"
      :model-value="dialogVisible"
      :title="dialogTitle"
      width="1496px"
      :confirm-text="isReadOnly ? '关闭' : '保存'"
      :show-cancel="!isReadOnly"
      :cancel-text="currentStep === 0 ? '取消' : '返回'"
      :ok-loading="dialogLoading"
      @update:model-value="handleDialogUpdate"
      @confirm="validateCurrentStep"
      @cancel="handleDialogCancel"
    >

主要是通过以下三部分进行返回和关闭的控制：

:model-value="dialogVisible"
@update:model-value="handleDialogUpdate"
@cancel="handleDialogCancel"

// 添加一个标志来控制是否执行handleDialogUpdate
const isCancelClick = ref(false);

// 弹窗取消/返回
const handleDialogCancel = () => {
  isCancelClick.value = true;

  // 如果当前是第一步（cancel-text为"取消"），则关闭弹窗
  if (currentStep.value === 0) {
    infoObj.clearInfo();
    dialogVisible.value = false;
  } else {
    // 其他步骤（cancel-text为"返回"），返回上一步
    prevStep();
  }
};

// 处理叉按钮
const handleDialogUpdate = (value) => {
  // 如果是取消按钮触发的，不执行
  if (isCancelClick.value) {
    isCancelClick.value = false;
    return;
  }

  // 点击叉按钮时，直接关闭弹窗
  dialogVisible.value = value;
  // 清空 infoObj
  infoObj.clearInfo();
};