Carol UI

Notification

悬浮出现在页面角落，显示全局的通知提醒消息。

演示

基本用法

通知内容message支持string和render函数

<template>
  <div class="rows">
    <cl-button plain @click="open1"> render函数 </cl-button>
    <cl-button plain @click="open2"> string </cl-button>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ClNotification } from '@kirkw/carol-ui'

const open1 = () => {
  ClNotification({
    title: '提示',
    message: h('i', { style: 'color: orange' }, '我是render函数'),
    footerInfo: h('i', { style: 'color: orange' }, '我是footer')
  })
}

const open2 = () => {
  ClNotification({
    title: '提示',
    message: '我是string'
  })
}
</script>
<style lang="scss">
.rows {
  .cl-button {
    margin-right: 8px;
  }
}
</style>

是否自动关闭

duration为0则是默认不关闭

<template>
  <div class="rows">
    <cl-button plain @click="open1"> 自动关闭 </cl-button>
    <cl-button plain @click="open2"> 不自动关闭</cl-button>
  </div>
</template>

<script lang="ts" setup>
import { ClNotification } from '@kirkw/carol-ui'

const open1 = () => {
  ClNotification({
    title: '提示',
    message: '我默认3秒关闭'
  })
}

const open2 = () => {
  ClNotification({
    title: '提示',
    message: '我不会自动关闭',
    duration: 0
  })
}
</script>
<style lang="scss">
.rows {
  .cl-button {
    margin-right: 8px;
  }
}
</style>

带有倾向性

带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息

<template>
  <div class="rows">
    <cl-button plain @click="open1"> 成功 </cl-button>
    <cl-button plain @click="open2"> 警告 </cl-button>
    <cl-button plain @click="open3"> 消息 </cl-button>
    <cl-button plain @click="open4"> 错误 </cl-button>
  </div>
</template>

<script lang="ts" setup>
import { ClNotification } from '@kirkw/carol-ui'

const open1 = () => {
  ClNotification({
    title: '成功标题不超过10个字',
    message: '这是一条成功的提示消息',
    type: 'success'
  })
}

const open2 = () => {
  ClNotification({
    title: '警告',
    message: '这是一条警告的提示消息',
    type: 'warning'
  })
}

const open3 = () => {
  ClNotification.info({
    title: '消息',
    message: '这是一条消息提示'
  })
}

const open4 = () => {
  ClNotification.error({
    title: '错误',
    message: '这是一条错误的提示消息'
  })
}
</script>
<style lang="scss">
.rows {
  .cl-button {
    margin-right: 8px;
  }
}
</style>

自定义弹出位置

可以让 Notification 从屏幕四角中的任意一角弹出

<template>
  <div class="rows">
    <cl-button plain @click="open1"> 右上角 </cl-button>
    <cl-button plain @click="open2"> 右下角 </cl-button>
    <cl-button plain @click="open3"> 左下角 </cl-button>
    <cl-button plain @click="open4"> 左上角 </cl-button>
  </div>
</template>

<script lang="ts" setup>
import { ClNotification } from '@kirkw/carol-ui'

const open1 = () => {
  ClNotification({
    title: '自定义位置',
    message: '右上角弹出的消息'
  })
}

const open2 = () => {
  ClNotification({
    title: '自定义位置',
    message: '右下角弹出的消息',
    position: 'bottom-right'
  })
}

const open3 = () => {
  ClNotification({
    title: '自定义位置',
    message: '左下角弹出的消息',
    position: 'bottom-left'
  })
}

const open4 = () => {
  ClNotification({
    title: '自定义位置',
    message: '左下角弹出的消息',
    position: 'top-left'
  })
}
</script>
<style lang="scss">
.rows {
  .cl-button {
    margin-right: 8px;
  }
}
</style>

自定义底部 | 自定义icon

底部可以自定义例如去跳转｜可直接送进来icon属性

<template>
  <div class="rows">
    <cl-button plain @click="open1"> 自定义底部 </cl-button>
    <cl-button plain @click="open2"> 自定义icon </cl-button>
    <cl-button plain @click="open3"> 超出滚动 </cl-button>
    <cl-button plain @click="open4"> 全局方法 </cl-button>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { ClNotification } from '@kirkw/carol-ui'
// todo 获取不到挂载的全局方法
const instance = getCurrentInstance()
const $clNotify = instance?.appContext.config.globalProperties.$clNotify

const open1 = () => {
  ClNotification({
    title: '提示',
    message: '<span style="color: red">我是自定义底部的消息</span>',
    dangerouslyUseHTMLString: true,
    footerInfo: '<button style="color:#fff;background:#2080f0;padding:0 8px">操作<button>',
    beforeClose: function () {
      console.log('我是关闭前的回调')
    }
  })
}

const open2 = () => {
  ClNotification({
    message: '这是一个没有title自定义icon的提示消息',
    iconName: 'cl-icon-loading'
  })
}

const open3 = () => {
  ClNotification({
    title: '提示',
    message:
      '超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动超出滚动'
  })
}

const open4 = () => {
  $clNotify({
    title: '提示',
    message: '全局方法 $notify'
  })
}
</script>
<style lang="scss">
.rows {
  .cl-button {
    margin-right: 8px;
  }
}
</style>

message footerInfo 属性虽然支持传入 HTML/JSX，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在使用的情况下，请确保 message footerInfo 的内容是可信的，永远不要将用户提交的内容赋值给 message footerInfo 属性。

API

Notification Props

名称	类型	默认值	可选值	描述
customClass	string			自定义组件名
id	string			自定义组件ID
dangerouslyUseHTMLString	boolean	false	true/false	是否支持传入HTML片段）
duration	number	3000		关闭弹窗的时间，0则不自动关闭
type	string		success error info warning	带有倾向性的弹窗
icon属性	string			自定义的icon
title	string			title
message	string vnode			content
footerInfo	string vnode			footer
position	string	top-right	'top-right', 'top-left', 'bottom-right', 'bottom-left'	弹出的方位
offset	number			距离position的边距
showClose	boolean	true		是否展示关闭按钮
z-index	number	2000		可自动设置层级
contentHeight	number			内容区域的高度超过滚动
onClose	Function			关闭时的回调函数
beforeClose	Function			关闭前的回调函数

Notification 方法

名称	详情	类型
close	关闭当前的notification	function
closeAll	关闭所有的notification	function

Notification ​

演示 ​

​

API ​

Notification

演示

API