notice Notice

Component for displaying notification messages.

Basic Usage

<template>
  <div>
    <b-button @click="open(false)">Notice</b-button>
    <b-button @click="open(true)">OpenNotice(仅Title)</b-button>
    <b-button @click="open1">render function</b-button>
    <b-button @click="time">Custom时长</b-button>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { Notice } from 'bin-ui-design'

function open(hasMessage) {
  Notice({
    title: 'Notice Title',
    message: hasMessage ? '' : '这是NoticeContent,这是NoticeContent. 这是NoticeContent,这是NoticeContent.'
  })
}
function open1() {
  Notice({
    title: 'Title名称',
    message: h('i', { style: 'color: red' }, 'Content rendered by render function.')
  })
}
function time() {
  Notice({
    title: 'Notice Title',
    message: 'duration设置为0则不会自动Close',
    duration: 0
  })
}
</script>

With Icon

Can be used with a tip icon.

With description

仅Title

<template>
  <div>
    <div style="padding: 5px 0">With description</div>
    <b-button type="primary" plain @click="info(false)">Info</b-button>
    <b-button type="success" plain @click="success(false)">Success</b-button>
    <b-button type="warning" plain @click="warning(false)">Warning</b-button>
    <b-button type="danger" plain @click="error(false)">error</b-button>
    <div style="padding: 5px 0">仅Title</div>
    <b-button type="primary" plain @click="info(true)">Info</b-button>
    <b-button type="success" plain @click="success(true)">Success</b-button>
    <b-button type="warning" plain @click="warning(true)">Warning</b-button>
    <b-button type="danger" plain @click="error(true)">error</b-button>
  </div>
</template>

<script setup lang="ts">
import { Notice } from 'bin-ui-design'

function info(message) {
  Notice.info({
    title: 'Notice Title',
    message: message ? '' : '这是NoticeContent,这是NoticeContent. 这是NoticeContent,这是NoticeContent.'
  })
}
function success(message) {
  Notice.success({
    title: 'Notice Title',
    message: message ? '' : '这是NoticeContent,这是NoticeContent. 这是NoticeContent,这是NoticeContent.'
  })
}
function warning(message) {
  Notice.warning({
    title: 'Notice Title',
    message: message ? '' : '这是NoticeContent,这是NoticeContent. 这是NoticeContent,这是NoticeContent.'
  })
}
function error(message) {
  Notice.error({
    title: 'Notice Title',
    message: message ? '' : '这是NoticeContent,这是NoticeContent. 这是NoticeContent,这是NoticeContent.'
  })
}
</script>

4 Directions

Can set other parameters to control notice position and display.

<template>
  <div>
    <b-button
      @click="open({ title: 'Right Top角', message: 'Right Top角Opennotice', position: 'top-right' })"
    >
      Right Top角
    </b-button>
    <b-button @click="open({ title: 'Left Top角', message: 'Left Top角Opennotice', position: 'top-left' })">
      Left Top角
    </b-button>
    <b-button
      @click="open({ title: 'Right Bottom角', message: 'Right Bottom角Opennotice', position: 'bottom-right' })"
    >
      Right Bottom角
    </b-button>
    <b-button
      @click="open({ title: 'Left Bottom角', message: 'Left Bottom角Opennotice', position: 'bottom-left' })"
    >
      Left Bottom角
    </b-button>
  </div>
</template>

<script setup lang="ts">
import { Notice } from 'bin-ui-design'

function open(options) {
  Notice.info(options)
}
</script>

Other Parameters

Set other parameters to control notice position and display.

<template>
  <div>
    <b-button
      @click="open({ title: 'Title', useHTML: true, message: '我是<i>html</i>片段插入的Content' })"
    >
      HTML Fragment
    </b-button>
    <b-button @click="open({ title: 'Title', showClose: false, message: 'hideClosebuttonContent' })">
      hideClosebutton
    </b-button>
    <b-button @click="open({ title: 'Offset', message: '这是一条带有Offset的WarningMessage', offset: 200 })">
      Offsetposition
    </b-button>
  </div>
</template>

<script setup lang="ts">
import { Notice } from 'bin-ui-design'

function open(options) {
  Notice.info(options)
}
</script>

API

In Vue 3, import Notice and call it as a function. The parameter can be a string type or a CreateNoticeProps object. For convenience, four type-specific call methods are also provided.

import { Notice } from 'bin-ui-design'

// Options can be passed as a string. If a string is provided, it uses the default configuration and fills the message property.
Notice(options)
Notice.info(options)
Notice.success(options)
Notice.warning(options)
Notice.error(options)

Options

The function and parameter descriptions are as follows:

Function	Description	Type	Default
title	Notice title	String	—
message	Notice content. When empty or not set, the title-only mode style is applied automatically	String	—
duration	Auto-close delay in seconds. Set to 0 to disable auto-close	Number	4.5
position	Open position, options: top-right, top-left, bottom-right, bottom-left	String	top-right
onClose	Callback when closed	Function	—
showClose	Whether to show close button	Boolean	true
useHTML	Whether to insert the message as an HTML fragment. Use with caution	Boolean	false
offset	Offset amount	Number	—
zIndex	Z-index level, incrementing from 2000 by default	Number	—