Banner

Banners are usually used to indicate the status or notifications of the entire page. They are typically persistent and require the user to actively close them.

Basic

The default Banner will be displayed full-screen. You can use the to prop to target a specific DOM node.

<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>

Targeting a Specific DOM Node

Ensure the DOM node is loaded before the Banner component.

In this example, the Banner component has a delayed load to ensure the DOM container is loaded first.

<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>

Customization

Example code

<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

Parameter	Description	Type	Optional Values	Default Value
model-value / v-model	Binding value	boolean	—	—
title	Title	string	—	—
type	Type	string	success/warning/info/error	info
effect	Style theme	string	light / dark	light
description	Supplementary text. Can also be passed through the default slot	string	—	—
closable	Whether it can be closed	boolean	—	true
close-text	Custom text for the close button	string	—	—
show-icon	Whether to display the icon	boolean	—	false
placement	Placement	string	top / bottom	top
animation-name	Animation	string	-	-
to	Rendering container	string	-	body
z-index	zIndex value	number	-	-
height	Banner height	string	-	-
position	CSS position property setting for the Banner	string	Valid CSS values like fixed / absolute	fixed when to is body, absolute otherwise
timeout	Banner auto-close time, in milliseconds	number	-	-

Slots

Name	Description
—	Description
icon	Custom icon
title	Content of the title

Events

Event Name	Description	Callback Parameter
close	Triggered when closing the Banner	—