BizUpdateNotification 版本更新提示

版本更新提示：dialog 弹窗（版本日志列表 + 立即更新 / 稍后提醒）与 banner 顶栏条两种形态；mandatory 强制更新隐藏稍后入口与关闭按钮。新版本检测（轮询 / 接口比对）由业务层完成，检测到后置 v-model=true 弹出。运营后台、大屏、客户端壳的版本升级公告。

基础用法

dialog 形态：当前 → 最新版本提示 + 更新要点列表。

<script setup lang="ts">
/** 场景：基础——dialog 形态版本更新提示 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(true)
</script>

<template>
  <div>
    <ElButton v-if="!visible" type="primary" plain @click="visible = true">模拟检测到新版本</ElButton>
    <BizUpdateNotification
      v-model="visible"
      current-version="v1.3.2"
      :versions="[{
        version: 'v1.4.0',
        date: '2026-10-20',
        notes: ['新增批量任务进度面板', '优化导出性能，大数据量提速 40%', '修复若干已知问题'],
      }]"
    />
  </div>
</template>

显示代码

多版本日志

versions 传多版本日志（新版在前），逐版本展示并支持查看完整日志。

<script setup lang="ts">
/** 场景：多版本日志 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(true)
</script>

<template>
  <div>
    <ElButton v-if="!visible" plain @click="visible = true">再次查看更新</ElButton>
    <BizUpdateNotification
      v-model="visible"
      current-version="v2.0.0"
      :versions="[
        {
          version: 'v2.2.0',
          date: '2026-10-18',
          tag: '重要',
          notes: ['开放数据看板自定义能力', '新增审批流程组件'],
        },
        {
          version: 'v2.1.0',
          date: '2026-09-30',
          notes: ['修复导入模板兼容性', '优化暗色主题对比度'],
        },
        {
          version: 'v2.0.5',
          date: '2026-09-12',
          tag: '安全更新',
          notes: ['升级依赖修复安全漏洞 CVE-2026-xxxx'],
        },
      ]"
    />
  </div>
</template>

显示代码

顶栏条形态

新版本 v3.2.0 可用（当前 v3.1.0），建议尽快升级。

mode=banner 顶部通知条，适合非阻断式提醒。

<script setup lang="ts">
/** 场景：banner 顶栏条形态 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(true)
</script>

<template>
  <div>
    <BizUpdateNotification
      v-model="visible"
      mode="banner"
      current-version="v3.1.0"
      :versions="[{ version: 'v3.2.0', date: '2026-10-19', notes: ['性能优化与问题修复'] }]"
      @update="ElMessage.success('开始下载更新包（模拟）')"
    />
  </div>
</template>

显示代码

强制更新

mandatory 隐藏稍后入口与弹窗关闭，安全更新场景。

<script setup lang="ts">
/** 场景：强制更新——不可关闭 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(false)
</script>

<template>
  <div>
    <ElButton type="danger" plain @click="visible = true">触发强制更新弹窗</ElButton>
    <BizUpdateNotification
      v-model="visible"
      mandatory
      current-version="v0.9.9"
      :versions="[{
        version: 'v1.0.0',
        date: '2026-10-20',
        tag: '安全更新',
        notes: ['旧版本存在安全风险，请立即升级', '升级后需重新登录'],
      }]"
      @update="ElMessage.success('开始下载更新包（模拟）')"
    />
  </div>
</template>

显示代码

事件

update / later / view 事件日志（跳转更新、暂后提醒、查看日志）。

<script setup lang="ts">
/** 场景：事件日志 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'
import type { BizUpdateVersion } from 'vue3-ep-biz-lib'

const visible = ref(true)
const logs = ref<string[]>([])

const log = (text: string): void => {
  logs.value.unshift(text)
  if (logs.value.length > 5) logs.value.pop()
}
</script>

<template>
  <div>
    <BizUpdateNotification
      v-model="visible"
      current-version="v1.0.0"
      :versions="[{ version: 'v1.1.0', notes: ['新增若干能力'] }]"
      @update="log('update：跳转更新')"
      @later="log('later：稍后提醒')"
      @view="(v: BizUpdateVersion | null) => log(`view：${v?.version ?? '无'} 完整日志`)"
    />
    <ElButton v-if="!visible" size="small" plain style="margin-top: 10px" @click="visible = true">重新打开</ElButton>
    <p v-for="(item, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ item }}
    </p>
  </div>
</template>

显示代码

受控显隐

v-model：false

v-model 受控 + expose open / close 编程式开关。

<script setup lang="ts">
/** 场景：受控显隐 + expose open/close */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'
import type { BizUpdateNotificationInstance } from 'vue3-ep-biz-lib'

const visible = ref(false)
const refEl = ref<BizUpdateNotificationInstance | null>(null)
</script>

<template>
  <div>
    <div style="display: flex; gap: 8px">
      <ElButton size="small" @click="refEl?.open()">open()</ElButton>
      <ElButton size="small" @click="refEl?.close()">close()</ElButton>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">v-model：{{ visible }}</span>
    </div>
    <BizUpdateNotification
      ref="refEl"
      v-model="visible"
      current-version="v1.0.0"
      :versions="[{ version: 'v1.0.1', notes: ['小问题修复'] }]"
    />
  </div>
</template>

显示代码

文案与宽度

自定义按钮文案与 dialog 宽度（update-text / later-text / width）。

<script setup lang="ts">
/** 场景：自定义文案与宽度——按钮文案、dialog 宽度调整 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(false)
</script>

<template>
  <div>
    <ElButton type="primary" plain @click="visible = true">检查更新</ElButton>
    <BizUpdateNotification
      v-model="visible"
      current-version="v4.1.0"
      latest-version="v4.2.0"
      :width="560"
      update-text="立即升级"
      later-text="下次再说"
      :versions="[{
        version: 'v4.2.0',
        date: '2026-10-21',
        notes: ['看板性能优化', '修复导出列宽错位问题'],
      }]"
      @update="ElMessage.success('开始升级（模拟）')"
    />
  </div>
</template>

显示代码

顶栏双动作

新版本 v0.9.0 可用（当前 v0.8.2），建议尽快升级。

banner 形态携带「查看日志 / 前往升级」双动作的常驻提醒。

<script setup lang="ts">
/** 场景：banner 携带操作——顶栏常驻提醒 + 查看/升级双动作 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizUpdateNotification } from 'vue3-ep-biz-lib'

const visible = ref(true)
</script>

<template>
  <BizUpdateNotification
    v-model="visible"
    mode="banner"
    current-version="v0.8.2"
    latest-version="v0.9.0"
    update-text="前往升级"
    :versions="[{ version: 'v0.9.0', date: '2026-10-21', notes: ['新增看板模块'] }]"
    @update="ElMessage.success('跳转升级页（模拟）')"
    @view="() => ElMessage.info('查看完整更新日志（模拟）')"
  />
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	boolean	false	显隐
versions	BizUpdateVersion[]	[]	版本日志（新版在前：version / date / notes / tag）
current-version	string	''	当前版本号
latest-version	string	versions[0]	最新版本号
mode	'dialog' | 'banner'	'dialog'	展示形态
update-text / later-text	string	'立即更新' / '稍后提醒'	按钮文案
mandatory	boolean	false	强制更新（隐藏稍后与关闭）
width	number | string	460	dialog 宽度

Events

事件名	参数	说明
update:modelValue	(value: boolean)	显隐变化
update	—	立即更新
later	—	稍后提醒（同时关闭）
view	(version: BizUpdateVersion | null)	查看完整日志

Expose

名称	类型	说明
open / close	() => void	编程式开合（close 含稍后语义）