BizEnvBadge 环境标识

环境标识：ribbon 45° 丝带（左上 / 右上，非 fixed 时 absolute 相对父容器——父容器需 position:relative，建议配合 overflow:hidden 裁切出角；fixed 时相对视口常驻）与 inline 圆角小徽标（size 三档字号）两种形态。内置环境色映射：dev=主色 / 开发环境、test=警告 / 测试环境、uat=危险 / 预发环境、gray=信息 / 灰度环境；未知环境用主色 + 原文大写；prod 不渲染（生产环境安全兜底——构建产物切到生产配置时标识自动消失，无需条件判断）。背景用对应色 -light-9、文字 / 边框用主色，明暗主题均可读。

基础用法

开发环境

业务页面内容区（父容器 position:relative + overflow:hidden 裁切丝带出角）

默认 env=dev（主色 / 开发环境），丝带相对父容器定位，需放在 position:relative 的容器内

默认 dev 环境右上 45° 丝带；父容器 position:relative（overflow:hidden 裁切出角效果更佳）。

<script setup lang="ts">
/** 场景：基础——dev 环境右上 45° 丝带（默认 ribbon / top-right） */
import { BizEnvBadge } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <div
      style="
        position: relative;
        overflow: hidden;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        color: var(--el-text-color-secondary);
      "
    >
      <BizEnvBadge env="dev" />
      业务页面内容区（父容器 position:relative + overflow:hidden 裁切丝带出角）
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      默认 env=dev（主色 / 开发环境），丝带相对父容器定位，需放在 position:relative 的容器内
    </p>
  </div>
</template>

显示代码

徽标形态

开发环境

测试环境

预发环境

灰度环境

inline 适用于导航栏 / 页头 / 表单旁的环境提示：背景 -light-9、文字 / 边框主色，明暗主题均可读

mode="inline" 圆角小徽标，适合导航栏 / 页头 / 表单旁的环境提示。

<script setup lang="ts">
/** 场景：徽标形态——mode=inline 圆角小徽标，四档内置环境色 */
import { BizEnvBadge } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap">
      <BizEnvBadge env="dev" mode="inline" />
      <BizEnvBadge env="test" mode="inline" />
      <BizEnvBadge env="uat" mode="inline" />
      <BizEnvBadge env="gray" mode="inline" />
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      inline 适用于导航栏 / 页头 / 表单旁的环境提示：背景 -light-9、文字 / 边框主色，明暗主题均可读
    </p>
  </div>
</template>

显示代码

视口固定

测试环境

滚动内容第 1 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 2 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 3 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 4 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 5 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 6 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 7 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 8 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 9 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 10 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 11 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

滚动内容第 12 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。

fixed=true 时相对视口 fixed 定位（全站单例常驻）；滚动下方区域观察右上角

fixed 相对视口 fixed 定位，页面滚动丝带常驻右上角（全站单例常驻场景）。

<script setup lang="ts">
/** 场景：视口固定——fixed=true 相对视口定位，滚动页面丝带常驻右上角 */
import { BizEnvBadge } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <BizEnvBadge env="test" fixed />
    <div
      style="
        height: 160px;
        overflow-y: auto;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        padding: 12px;
      "
    >
      <p v-for="i in 12" :key="i" style="margin: 0 0 10px; color: var(--el-text-color-secondary)">
        滚动内容第 {{ i }} 行——fixed 丝带固定在浏览器视口右上角，不随内容滚动。
      </p>
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      fixed=true 时相对视口 fixed 定位（全站单例常驻）；滚动下方区域观察右上角
    </p>
  </div>
</template>

显示代码

丝带位置

预发环境

position=top-left（左上）

预发环境

position=top-right（右上，默认）

position 控制丝带出角位置：top-left 左上 / top-right 右上（默认）。

<script setup lang="ts">
/** 场景：位置——position 左上 / 右上丝带对比 */
import { BizEnvBadge } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap">
    <div
      style="
        position: relative;
        overflow: hidden;
        flex: 1;
        min-width: 220px;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        color: var(--el-text-color-secondary);
      "
    >
      <BizEnvBadge env="uat" position="top-left" />
      position=top-left（左上）
    </div>
    <div
      style="
        position: relative;
        overflow: hidden;
        flex: 1;
        min-width: 220px;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        color: var(--el-text-color-secondary);
      "
    >
      <BizEnvBadge env="uat" position="top-right" />
      position=top-right（右上，默认）
    </div>
  </div>
</template>

显示代码

自定义环境

staging

联调环境

沙箱

内置映射之外的环境（如 staging / sandbox）统一主色展示、原文大写；text 可覆盖默认文案（如「联调环境」「沙箱」）

内置映射之外的环境（如 staging / sandbox）统一主色、原文大写展示；text 覆盖默认文案。

<script setup lang="ts">
/** 场景：自定义环境——未知 env 用主色 + 原文（大写），text 覆盖默认文案 */
import { ref } from 'vue'
import { BizEnvBadge } from 'vue3-ep-biz-lib'

const env = ref<string>('staging')
const customText = ref('联调环境')
</script>

<template>
  <div>
    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap">
      <BizEnvBadge :env="env" mode="inline" />
      <BizEnvBadge :env="env" mode="inline" :text="customText" />
      <BizEnvBadge env="sandbox" mode="inline" text="沙箱" />
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      内置映射之外的环境（如 staging / sandbox）统一主色展示、原文大写；text 可覆盖默认文案（如「联调环境」「沙箱」）
    </p>
  </div>
</template>

显示代码

生产隐藏

uatgrayprod

预发环境

uat：正常展示丝带

env="prod" 时组件不渲染任何内容（生产安全兜底）——切换下方单选对比。

<script setup lang="ts">
/** 场景：生产隐藏——env=prod 不渲染（切换演示），生产环境安全兜底 */
import { ref } from 'vue'
import { ElRadioGroup, ElRadioButton } from 'element-plus'
import { BizEnvBadge } from 'vue3-ep-biz-lib'

const env = ref<string>('uat')
</script>

<template>
  <div>
    <ElRadioGroup v-model="env" size="small" style="margin-bottom: 12px">
      <ElRadioButton value="uat">uat</ElRadioButton>
      <ElRadioButton value="gray">gray</ElRadioButton>
      <ElRadioButton value="prod">prod</ElRadioButton>
    </ElRadioGroup>

    <div
      style="
        position: relative;
        overflow: hidden;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        color: var(--el-text-color-secondary);
      "
    >
      <BizEnvBadge :env="env" />
      {{ env === 'prod' ? 'prod：不渲染任何标识（生产安全兜底）' : `${env}：正常展示丝带` }}
    </div>
  </div>
</template>

显示代码

尺寸

测试环境

测试环境

测试环境

small=12px / default=13px / large=14px；丝带形态同样受 size 影响字号

size 三档：small=12px / default=13px / large=14px（主要作用于 inline 字号）。

<script setup lang="ts">
/** 场景：尺寸——size 三档（small / default / large，inline 随之变字号） */
import { BizEnvBadge } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap">
      <BizEnvBadge env="test" mode="inline" size="small" />
      <BizEnvBadge env="test" mode="inline" size="default" />
      <BizEnvBadge env="test" mode="inline" size="large" />
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      small=12px / default=13px / large=14px；丝带形态同样受 size 影响字号
    </p>
  </div>
</template>

显示代码

事件

灰度环境

点击丝带触发 click（回传 env）

最近一次 click：（无）

点击标识触发 click，回传当前环境标识（env 缺省回退 'dev'）。

<script setup lang="ts">
/** 场景：事件——click 回传当前环境标识，可用于「点击跳转环境说明」等交互 */
import { ref } from 'vue'
import { BizEnvBadge } from 'vue3-ep-biz-lib'

const last = ref<string>('（无）')

const onClick = (env: string): void => {
  last.value = env
}
</script>

<template>
  <div>
    <div
      style="
        position: relative;
        overflow: hidden;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--el-border);
        border-radius: var(--el-border-radius-base);
        color: var(--el-text-color-secondary);
      "
    >
      <BizEnvBadge env="gray" @click="onClick" />
      点击丝带触发 click（回传 env）
    </div>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      最近一次 click：{{ last }}
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
env	BizEnvType	'dev'	环境标识；prod 不渲染（生产安全兜底）
text	string	''	覆盖默认文案（如「联调环境」）；缺省按 env 取内置文案
mode	'ribbon' | 'inline'	'ribbon'	展示形态：45° 丝带 / 圆角徽标
position	'top-left' | 'top-right'	'top-right'	丝带位置（左上 / 右上）
fixed	boolean	false	相对视口固定；false 时相对父容器（父需 position:relative）
size	'small' | 'default' | 'large'	'default'	尺寸（inline 随之变字号）

Events

事件名	参数	说明
click	(env: string)	点击标识，回传当前生效的环境标识

Slots

插槽名	说明
—	暂无（标识内容保持统一渲染）

Expose

名称	类型	说明
getEnv	() => string	取当前生效的环境标识（env 缺省回退 'dev'）