前端组件库

Appearance

Return to top
On this page

Utils工具包

组件介绍

BuildTime： 是一个系统版本更新通知组件，检测到系统有新版本发布，是否立即刷新页面。

Msg： 是一个二次封装ElMessage组件。

示例： 


<template>
  <div class="flex flex-wrap">
    <div class="mr-20">
      <el-button @click="Utils.BuildTime.initBuildTime({
        interval: 1000 * 5,
        initFalg: true,
        title: '系统版本更新通知',
        message: '检测到系统有新版本发布，是否立即刷新页面？',
        confirmButtonText: '立即刷新',
        cancelButtonText:  '稍后再说'
      })">Utils.BuildTime.initBuildTime 5秒弹出提示</el-button>
    </div>
  </div>
  <br />
  <div class="flex flex-wrap">
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgAlert('提示', '这是提示信息', { confirmButtonText: '确定' })">Utils.Msg.MsgAlert</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgConfirm('提示', '这是提示信息', { confirmButtonText: '确定'})">Utils.Msg.MsgConfirm</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgConfirmCustom('系统版本更新通知', '检测到系统有新版本发布，是否立即刷新页面？', { confirmButtonText: '确定'})">Utils.Msg.MsgConfirmCustom</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgInfo('系统MsgInfo提示')">Utils.Msg.MsgInfo</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgSuccess('系统MsgSuccess提示')">Utils.Msg.MsgSuccess</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgWarning('系统MsgWarning提示')">Utils.Msg.MsgWarning</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgError('系统MsgError提示')">Utils.Msg.MsgError</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Utils } from '@lzui/lzui-lib'

</script>

<style scoped>
.mr-20{
    margin-right: 20px;
}
.mb-20{
    margin-bottom: 20px;
}
</style>

<template>
  <div class="flex flex-wrap">
    <div class="mr-20">
      <el-button @click="Utils.BuildTime.initBuildTime({
        interval: 1000 * 5,
        initFalg: true,
        title: '系统版本更新通知',
        message: '检测到系统有新版本发布，是否立即刷新页面？',
        confirmButtonText: '立即刷新',
        cancelButtonText:  '稍后再说'
      })">Utils.BuildTime.initBuildTime 5秒弹出提示</el-button>
    </div>
  </div>
  <br />
  <div class="flex flex-wrap">
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgAlert('提示', '这是提示信息', { confirmButtonText: '确定' })">Utils.Msg.MsgAlert</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgConfirm('提示', '这是提示信息', { confirmButtonText: '确定'})">Utils.Msg.MsgConfirm</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgConfirmCustom('系统版本更新通知', '检测到系统有新版本发布，是否立即刷新页面？', { confirmButtonText: '确定'})">Utils.Msg.MsgConfirmCustom</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgInfo('系统MsgInfo提示')">Utils.Msg.MsgInfo</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgSuccess('系统MsgSuccess提示')">Utils.Msg.MsgSuccess</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgWarning('系统MsgWarning提示')">Utils.Msg.MsgWarning</el-button>
    </div>
    <div class="mr-20 mb-20">
      <el-button @click="Utils.Msg.MsgError('系统MsgError提示')">Utils.Msg.MsgError</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Utils } from '@lzui/lzui-lib'

</script>

<style scoped>
.mr-20{
    margin-right: 20px;
}
.mb-20{
    margin-bottom: 20px;
}
</style>

属性 (Props)

BuildTime 属性

属性名类型默认值说明
intervalnumber10000检查更新的时间间隔(毫秒)
initFalgbooleanfalse开关优先级高于实际版本比较
titlestring系统版本更新通知抬头展示
messagestring'系统已更新，是否立即刷新页面？'更新提示信息
confirmButtonTextstring'立即刷新'确认按钮文字
cancelButtonTextstring'稍后刷新'取消按钮文字

BuildTime使用：将时间注入index.html中为全局变量

vue
<script>
    window.__BUILD_TIME__ = '<%= buildTime %>';
</script>

<script>
    window.__BUILD_TIME__ = '<%= buildTime %>';
</script>
1
2
3

BuildTime使用：修改vite.config.ts

typescript
import { createHtmlPlugin } from 'vite-plugin-html'
import dayjs from 'dayjs'

const timeStr = dayjs().format('YYYY-MM-DD HH-mm-ss')

export default defineConfig({
  plugins: [
     createHtmlPlugin({
      inject: {
        data: {
          buildTime: timeStr // 生成打包时间
        }
      }
    })
  ]
})


import { createHtmlPlugin } from 'vite-plugin-html'
import dayjs from 'dayjs'

const timeStr = dayjs().format('YYYY-MM-DD HH-mm-ss')

export default defineConfig({
  plugins: [
     createHtmlPlugin({
      inject: {
        data: {
          buildTime: timeStr // 生成打包时间
        }
      }
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Msg 属性

属性名类型默认值说明
durationnumber3000消息显示时间(毫秒)
showClosebooleantrue是否显示关闭按钮
centerbooleanfalse文字是否居中
offsetnumber20消息距离窗口顶部的偏移量

事件 (Events)

BuildTime 事件

事件名参数说明
update-detectedversionInfo: object检测到新版本时触发
refresh-用户确认刷新时触发
cancel-用户取消刷新时触发

Msg 事件

事件名参数说明
close-消息关闭时触发

插槽 (Slots)

插槽名说明
buildTimeTip自定义更新提示内容
该组件暂无其他插槽。

样式 (Styles)

组件使用 scoped 样式，可通过深度选择器修改内部样式：