BIN-UI-DESIGN

Appearance

On this page

通知 Notice ​

组件提供通知功能

基础用法 ​

<template>
  <div>
    <b-button @click="open(false)">提醒</b-button>
    <b-button @click="open(true)">打开提醒(仅标题)</b-button>
    <b-button @click="open1">render函数渲染</b-button>
    <b-button @click="time">自定义时长</b-button>
  </div>
</template>

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

function open(hasMessage) {
  Notice({
    title: 'Notice 标题',
    message: hasMessage ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function open1() {
  Notice({
    title: '标题名称',
    message: h('i', { style: 'color: red' }, '我是render函数渲染出来的内容')
  })
}
function time() {
  Notice({
    title: 'Notice 标题',
    message: 'duration设置为0则不会自动关闭',
    duration: 0
  })
}
</script>
<template>
  <div>
    <b-button @click="open(false)">提醒</b-button>
    <b-button @click="open(true)">打开提醒(仅标题)</b-button>
    <b-button @click="open1">render函数渲染</b-button>
    <b-button @click="time">自定义时长</b-button>
  </div>
</template>

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

function open(hasMessage) {
  Notice({
    title: 'Notice 标题',
    message: hasMessage ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function open1() {
  Notice({
    title: '标题名称',
    message: h('i', { style: 'color: red' }, '我是render函数渲染出来的内容')
  })
}
function time() {
  Notice({
    title: 'Notice 标题',
    message: 'duration设置为0则不会自动关闭',
    duration: 0
  })
}
</script>

带图标 ​

可以附带提示性的图标进行使用

带描述
仅标题
<template>
  <div>
    <div style="padding: 5px 0">带描述</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">仅标题</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 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function success(message) {
  Notice.success({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function warning(message) {
  Notice.warning({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function error(message) {
  Notice.error({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
</script>
<template>
  <div>
    <div style="padding: 5px 0">带描述</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">仅标题</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 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function success(message) {
  Notice.success({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function warning(message) {
  Notice.warning({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
function error(message) {
  Notice.error({
    title: 'Notice 标题',
    message: message ? '' : '这是通知内容,这是通知内容. 这是通知内容,这是通知内容.'
  })
}
</script>

4个方向 ​

可以设置其他参数控制notice位置和显示

<template>
  <div>
    <b-button
      @click="open({ title: '右上角', message: '右上角弹出notice', position: 'top-right' })"
    >
      右上角
    </b-button>
    <b-button @click="open({ title: '左上角', message: '左上角弹出notice', position: 'top-left' })">
      左上角
    </b-button>
    <b-button
      @click="open({ title: '右下角', message: '右下角弹出notice', position: 'bottom-right' })"
    >
      右下角
    </b-button>
    <b-button
      @click="open({ title: '左下角', message: '左下角弹出notice', position: 'bottom-left' })"
    >
      左下角
    </b-button>
  </div>
</template>

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

function open(options) {
  Notice.info(options)
}
</script>
<template>
  <div>
    <b-button
      @click="open({ title: '右上角', message: '右上角弹出notice', position: 'top-right' })"
    >
      右上角
    </b-button>
    <b-button @click="open({ title: '左上角', message: '左上角弹出notice', position: 'top-left' })">
      左上角
    </b-button>
    <b-button
      @click="open({ title: '右下角', message: '右下角弹出notice', position: 'bottom-right' })"
    >
      右下角
    </b-button>
    <b-button
      @click="open({ title: '左下角', message: '左下角弹出notice', position: 'bottom-left' })"
    >
      左下角
    </b-button>
  </div>
</template>

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

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

其他参数 ​

可以设置其他参数控制notice位置和显示

<template>
  <div>
    <b-button
      @click="open({ title: '标题', useHTML: true, message: '我是<i>html</i>片段插入的内容' })"
    >
      HTML片段
    </b-button>
    <b-button @click="open({ title: '标题', showClose: false, message: '隐藏关闭按钮内容' })">
      隐藏关闭按钮
    </b-button>
    <b-button @click="open({ title: '偏移', message: '这是一条带有偏移的提示消息', offset: 200 })">
      偏移位置
    </b-button>
  </div>
</template>

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

function open(options) {
  Notice.info(options)
}
</script>
<template>
  <div>
    <b-button
      @click="open({ title: '标题', useHTML: true, message: '我是<i>html</i>片段插入的内容' })"
    >
      HTML片段
    </b-button>
    <b-button @click="open({ title: '标题', showClose: false, message: '隐藏关闭按钮内容' })">
      隐藏关闭按钮
    </b-button>
    <b-button @click="open({ title: '偏移', message: '这是一条带有偏移的提示消息', offset: 200 })">
      偏移位置
    </b-button>
  </div>
</template>

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

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

API ​

vue3中引入 Notice 并进行函数调用，同时 Notice 入参可为string类型或者是 CreateNoticeProps对象类型，同时，为方便调用，也扩展了四种 type 的调用

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

// options 可 直接传入字符串，如入参是字符串，则代表使用默认配置，入参填入message属性中进行调用
Notice(options)
Notice.info(options)
Notice.success(options)
Notice.warning(options)
Notice.error(options)
import { Notice } from 'bin-ui-design'

// options 可 直接传入字符串，如入参是字符串，则代表使用默认配置，入参填入message属性中进行调用
Notice(options)
Notice.info(options)
Notice.success(options)
Notice.warning(options)
Notice.error(options)

Options ​

函数及参数说明如下：

函数说明类型默认值
title通知提醒的标题String—
message通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式String—
duration自动关闭的延时，单位秒，不关闭可以写 0Number4.5
position弹出位置 可选top-right 、top-left、bottom-right、bottom-leftStringtop-right
onClose关闭时的回调Function—
showClose是否显示关闭按钮Booleantrue
useHTML是否将message转换成HTML片段插入，此操作需谨慎Booleanfalse
offset偏移量Number—
zIndex层级，默认2000以后追加Number—

MIT Licensed | Copyright © 2023-present bin-ui-design