BizConfirmButton 二次确认按钮

带二次确认的按钮：点击先弹 el-message-box 确认，用户确认后才触发 confirm 事件。删除、启停用等危险操作的统一防误触方案。

基础用法

按钮本体属性（type / icon / plain / size...）经 $attrs 透传；确认后执行 confirm，取消触发 cancel。

<script setup lang="ts">
/** 基础用法：危险操作二次确认（confirm / cancel 事件） */
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { BizConfirmButton } from 'vue3-ep-biz-lib'

const onConfirm = (): void => {
  ElMessage.success('已确认删除')
}

const onCancel = (): void => {
  ElMessage.info('已取消操作')
}
</script>

<template>
  <div>
    <!-- 按钮本体属性（type/icon/plain...）经 $attrs 透传 BizButton → el-button -->
    <BizConfirmButton
      type="danger"
      :icon="Delete"
      plain
      title="删除确认"
      message="删除后不可恢复，确定删除该记录吗？"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      删除记录
    </BizConfirmButton>
  </div>
</template>

显示代码

其他用法

box-type 图标类型、自定义确认文案、only-icon 图标按钮模式（hover tooltip）、异步执行期间 :loading。

<script setup lang="ts">
/** 其他用法：图标类型 / 自定义文案 / only-icon 模式 / 异步执行期间 loading */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Promotion } from '@element-plus/icons-vue'
import { BizConfirmButton } from 'vue3-ep-biz-lib'

const publishing = ref(false)

/** 模拟异步发布（组件库不含业务接口）：确认后 loading，完成后自动复位 */
const onPublish = (): void => {
  publishing.value = true
  window.setTimeout(() => {
    publishing.value = false
    ElMessage.success('发布完成')
  }, 1500)
}
</script>

<template>
  <div class="row">
    <BizConfirmButton
      type="primary"
      box-type="success"
      title="发布上线"
      message="发布后将立即对全部用户生效，确认发布吗？"
      confirm-button-text="立即发布"
      cancel-button-text="再想想"
      :loading="publishing"
      :disabled="publishing"
      @confirm="onPublish"
    >
      发布上线
    </BizConfirmButton>

    <!-- only-icon 模式：hover 以 tooltip 展示按钮文本（BizButton 既有能力） -->
    <BizConfirmButton
      type="warning"
      :icon="Promotion"
      only-icon
      title="推送通知"
      message="确认向全部在线用户推送通知吗？"
    >
      推送通知
    </BizConfirmButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

显示代码

审批驳回必填原因（reason 模式）

审批场景：同意走普通确认；驳回配置 reason（{ placeholder, required, maxLength }），确认框变为 textarea 输入，必填与字数超限均拦截确认，confirm 事件携带输入的原因。

<script setup lang="ts">
/** 场景：审批驳回必填原因（reason 输入模式）；同意走普通确认 */
import { ElMessage } from 'element-plus'
import { BizConfirmButton } from 'vue3-ep-biz-lib'

const onApprove = (): void => {
  ElMessage.success('已同意该申请')
}

/** reason 模式：confirm 事件携带输入的原因（必填 + 50 字上限拦截） */
const onReject = (reason?: string): void => {
  ElMessage.warning(`已驳回，原因：${reason ?? ''}`)
}
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center; max-width: 520px">
    <BizConfirmButton
      type="success"
      plain
      title="审批确认"
      message="同意后将通知申请人，是否继续？"
      confirm-button-text="同意"
      @confirm="onApprove"
    >
      同意
    </BizConfirmButton>
    <BizConfirmButton
      type="danger"
      plain
      title="驳回原因"
      message="驳回后流程退回发起人，请填写原因（必填，50 字内）："
      confirm-button-text="确认驳回"
      :reason="{ placeholder: '请输入驳回原因', required: true, maxLength: 50 }"
      @confirm="onReject"
    >
      驳回
    </BizConfirmButton>
  </div>
</template>

显示代码

高危运维操作

运维场景：清缓存 / 停服 / 重置数据三档危险度——boxType 分级图标 + 按钮文案自述后果（「接受后果并重置」）。

<script setup lang="ts">
/** 场景：高危运维操作三档——清缓存/停服/重置数据，文案与图标分级 */
import { ElMessage } from 'element-plus'
import { BizConfirmButton } from 'vue3-ep-biz-lib'

const ops = (name: string) => (): void => {
  ElMessage.success(`${name}已执行（示例）`)
}
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 560px">
    <BizConfirmButton
      title="清理缓存"
      message="将清除本节点全部本地缓存，期间接口耗时可能短暂升高，是否继续？"
      box-type="warning"
      confirm-button-text="清理"
      @confirm="ops('清缓存')"
    >
      清理缓存
    </BizConfirmButton>
    <BizConfirmButton
      title="停止服务"
      message="停止后该服务所有请求将立即失败，请确认已摘除流量！"
      box-type="error"
      confirm-button-text="确认停服"
      cancel-button-text="再想想"
      type="warning"
      plain
      @confirm="ops('停服')"
    >
      停止服务
    </BizConfirmButton>
    <BizConfirmButton
      title="重置演示数据"
      message="该操作将清空全部业务表并重建初始数据，影响所有联调同事，是否继续？"
      box-type="error"
      confirm-button-text="接受后果并重置"
      type="danger"
      @confirm="ops('重置数据')"
    >
      重置数据
    </BizConfirmButton>
  </div>
</template>

显示代码

内容撤销发布

国庆促销活动公告12084 阅读已发布

新会员积分规则说明3921 阅读已发布

系统维护通知（草稿）0 阅读草稿

内容运营场景：列表内每行「撤销发布」——确认文案动态带阅读量（title / message 按行拼装），link 弱样式不破坏行布局。

<script setup lang="ts">
/** 场景：内容审核列表——每行「撤销发布」带差异确认文案 */
import { ElMessage } from 'element-plus'
import { BizConfirmButton, BizStatusTag } from 'vue3-ep-biz-lib'

const posts = [
  { id: 1, title: '国庆促销活动公告', published: true, reads: 12084 },
  { id: 2, title: '新会员积分规则说明', published: true, reads: 3921 },
  { id: 3, title: '系统维护通知（草稿）', published: false, reads: 0 },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 520px">
    <div
      v-for="post in posts"
      :key="post.id"
      style="display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px"
    >
      <span style="flex: 1">{{ post.title }}</span>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ post.reads }} 阅读</span>
      <BizStatusTag
        :status="post.published ? 'on' : 'draft'"
        :status-map="{ on: { text: '已发布', type: 'success' }, draft: { text: '草稿', type: 'info' } }"
      />
      <BizConfirmButton
        v-if="post.published"
        link
        type="warning"
        size="small"
        :title="`撤销「${post.title}」`"
        :message="`撤销后前台立即不可见（已有 ${post.reads} 次阅读），是否继续？`"
        confirm-button-text="撤销发布"
        @confirm="ElMessage.warning(`已撤销：${post.title}`)"
      >
        撤销发布
      </BizConfirmButton>
    </div>
  </div>
</template>

显示代码

确认后异步执行

首次模拟失败（重试成功），确认后按钮进入 loading

迁移场景：confirm 后按钮 loading 直到接口返回；首次模拟失败可重试（failOnce），成功后提示完成。

<script setup lang="ts">
/** 场景：确认后异步执行——按钮 loading 到接口返回，失败可重试 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizConfirmButton } from 'vue3-ep-biz-lib'

const migrating = ref(false)
let failOnce = true

const onConfirm = (): void => {
  migrating.value = true
  window.setTimeout(() => {
    migrating.value = false
    if (failOnce) {
      failOnce = false
      ElMessage.error('迁移失败：目标库连接超时，可重试')
      return
    }
    ElMessage.success('数据迁移完成')
  }, 1200)
}
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center; max-width: 520px">
    <BizConfirmButton
      type="primary"
      plain
      title="执行数据迁移"
      message="迁移期间旧库只读（预计 2 分钟），建议在低峰期执行。"
      :loading="migrating"
      @confirm="onConfirm"
    >
      {{ migrating ? '迁移中…' : '执行迁移' }}
    </BizConfirmButton>
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">首次模拟失败（重试成功），确认后按钮进入 loading</span>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'操作确认'	确认弹窗标题
message	string	'确定执行该操作吗？'	确认弹窗内容
box-type	'success' | 'warning' | 'info' | 'error'	'warning'	确认弹窗图标类型
confirm-button-text	string	'确定'	确认按钮文案
cancel-button-text	string	'取消'	取消按钮文案
reason	{ placeholder?, required?, maxLength? }	—	输入原因模式：确认前改弹 textarea 输入框，confirm 事件携带原因；required 默认 true，maxLength 0 不限

按钮本体属性（type / icon / loading / disabled / only-icon...）经 v-bind="$attrs" 透传内部 BizButton → el-button，具备 BizButton 的全部能力（图标三通道、only-icon tooltip 等）。

Events

事件名	参数	说明
confirm	—	用户确认后触发（真实业务操作写在这里，异步期间可透传 :loading）
cancel	—	用户取消（关闭确认框）

Slots

插槽名	说明
default	按钮文本（BizButton 默认插槽透传）

Expose

属性/方法	说明
—	透传 BizButton 实例能力