Banner 通知横幅

横幅通常用于标识全页的状态或通知等。它通常是常驻的，需要用户主动将其关闭。

基础用法

默认 Banner 将会全屏显示，可以通过设置 to 属性定向到特定DOM节点

<template>
  <epp-banner v-model="visible" title="This is Banner" effect="dark" />
  <el-button @click="show">Show/Hide</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const visible = ref(false);

const show = () => {
  visible.value = !visible.value;
};
</script>

特定DOM节点

要保证DOM节点先于 Banner 组件加载完成

示例中由于要保证DOM容器先加载，所以Banner组件设置了延迟加载

<template>
  <epp-banner v-if="mounted" v-model="visible" to="#bannerContainer" effect="dark">
    <b>Some Container</b>
  </epp-banner>
  <div
    id="bannerContainer"
    class="m-b-lg"
    style="height: 200px; position: relative; background-color: var(--el-color-primary-light-3)"
  ></div>
  <el-button @click="show">Show/Hide(Delay 1s)</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const visible = ref(false);
const mounted = ref(false);

const show = () => {
  mounted.value = true;
  window.setTimeout(() => {
    visible.value = !visible.value;
  }, 1000);
};
</script>

自定义

示例代码

<template>
  <epp-banner
    v-model="visible"
    type="success"
    effect="dark"
    dashed
    :closable="false"
    :timeout="5000"
    title="Custom Banner"
  >
    <el-space size="large">
      <el-icon size="20px">
        <GoodsFilled />
      </el-icon>
      <div class="text-regular">
        Read full articles, watch videos, browse thousands of titles and more on the "Home page".
      </div>
    </el-space>
  </epp-banner>
  <el-button @click="show">Show/Hide</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { GoodsFilled } from '@element-plus/icons-vue';

const visible = ref(false);

const show = () => {
  visible.value = !visible.value;
};
</script>

Attributes

参数	说明	类型	可选值	默认值
model-value / v-model	绑定值	boolean	—	—
title	标题	string	—	—
type	类型	string	success/warning/info/error	info
effect	样式主题	string	light / dark	light
description	辅助性文字。也可通过默认 slot 传入	string	—	—
closable	是否可关闭	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
show-icon	是否显示图标	boolean	—	false
placement	位置	string	top / bottom	top
animation-name	动画	string	-	-
to	呈现容器	string	-	body
z-index	zIndex值	number	-	-
height	Banner高度	string	-	-
position	Banner的CSS position属性设置	string	fixed / absolute等CSS有效值	to为body时：fixed，其他值：absolute
timeout	Banner自动关闭时间，单位毫秒	number	-	-

Slots

名称	说明
—	描述
icon	自定义 icon
title	标题的内容

Events

事件名称	说明	回调参数
close	关闭 Banner 时触发的事件	—