通知

通知组件。

基础使用

通过组件的的 show 方法显示通知，show 方法接受一个对象参数，参数中可以设置以下属性：

• message：通知消息内容，也可通过默认插槽传入通知内容。
• theme：通知主题，默认为 primary。
• duration：通知显示时间，单位为毫秒，默认为 2500。
• position：通知显示位置，可选值为 top、bottom，默认为 top。
• top：通知显示位置，position 为 top 时有效，默认值为 0。
• bottom：通知显示位置，position 为 bottom 时有效，默认值为 20px。

<template>
	<pure-notify ref="notifyRef"></pure-notify>
	<pure-button @onClick="showNotify">显示通知</pure-button>
</template>

<script setup>
	import { ref } from "vue";

	// 组件实例
	const notifyRef = ref(null);

	// 显示通知
	function showNotify() {
		notifyRef.value.show({
			message: "这是一条通知消息"
		});
	}
</script>

重要提示

支付宝小程序需启用 component2 ，否则使用无法获取表单组件的 ref 实例，继而无法使用组件对外暴漏的属性和方法。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类

事件

名称	参数	说明
onClick		点击事件

插槽

名称	参数	说明
#default		默认，通知内容

样式变量

名称	说明
--pure-notify-width	宽
--pure-notify-height	高
--pure-notify-padding	内边距
--pure-notify-margin	外边距
--pure-notify-background	背景
--pure-notify-animation-duration	进入、离开动画的时长
--pure-notify-animation-timing-function	进入、离开动画时间函数
--pure-notify-text-align	文本对齐方式
--pure-notify-color	文本颜色
--pure-notify-top	通知显示位置
--pure-notify-bottom	通知显示位置