vuejs 通知下级组件_带有vuejs的免费免费通知组件

最新推荐文章于 2024-05-22 09:45:29 发布

cuk5340

最新推荐文章于 2024-05-22 09:45:29 发布

阅读量192

点赞数

文章标签： vue java 小程序 html c# ViewUI

原文链接：https://vuejsexamples.com/fuss-free-notification-component-with-vuejs/

版权

vuejs 通知下级组件

Vue Toastify (Vue Toastify)

I wanted a component which I can use by passing props from the server on the first paint but which can also take statuses at run time. With this component it's has just become super easy.

我想要一个可以通过在第一次绘画时从服务器传递道具来使用的组件，但是它也可以在运行时获取状态。有了这个组件，它变得非常容易。

View demo 查看演示 View Github 查看Github

To Install:

安装：

npm i vue-toastify

To Use:

使用方法：

1| Import the component:

1 | 导入组件：

import VueToastify from 'vue-toastify';

or with CDNs:

或使用CDN：

2| Register the component with Vue:

2 | 向Vue注册组件：

Vue.component('vue-toastify', VueToastify);

3| Add it inside your application:

3 | 将其添加到您的应用程序中：

<vue-toastify :your-props="here"></vue-toastify>

道具 (Props)

prop	type	default	details
status	Object	null	Not required, you may just let the component listen for future statuses.
canPause	Boolean	false	Enables pausing of the loader and the timeout on hover.
defaultTitle	Boolean	true	Enables the fallback to the type as the title.
eventHandler	String	"EventBus"	This entity will handle the events eg.: Eventbus.$on('notify', ...)
lightTheme	Boolean	false	Change to the light theme.
errorDuration	Number	8000	The duration in milliseconds the error notification should be visible for.
successDuration	Number	4000	The duration in milliseconds the error notification should be visible for.
alertInfoDuration	Number	6000	The duration in milliseconds the error notification should be visible for.
initialDelay	Number	750	If a status passed as a prop, it may already starts the script before the page's content fully loaded. With this you can specify delay in milliseconds for the initial notification.
bodyMaxWidth	Number	250	Maximum width the body can take up. in px The rest of the notification will always be the same width.
position	String	"bottom-right"	Controls where the notification should appear. Accepted values are: 'top-left', 'top-center', 'top-right', 'left-center', 'right-center', 'bottom-left', 'bottom-center', 'bottom-right'. (when using centered positions the manual displacement will not work for the axis it's centered on)
positionXDistance	String	"10px"	Distance from the left or right depending on the position prop. All css values are accepted.
positionYDistance	String	"10px"	Distance from the top or bottom depending on the position prop. All css values are accepted.

Struts	类型	默认	细节
状态	目的	空值	不需要，您可以只让组件侦听将来的状态。
可以暂停	布尔型	假	启用暂停加载程序和悬停超时。
defaultTitle	布尔型	真正	启用后备类型作为标题。
eventHandler	串	“ EventBus”	该实体将处理事件，例如：Eventbus。$ on('notify'，...)
lightTheme	布尔型	假	更改为浅色主题。
errorDuration	数	8000	错误通知的持续时间(以毫秒为单位)。
successDuration	数	4000	错误通知的持续时间(以毫秒为单位)。
alertInfoDuration	数	6000	错误通知的持续时间(以毫秒为单位)。
initialDelay	数	750	如果状态作为道具传递，则它可能已经在页面内容完全加载之前启动了脚本。这样，您可以指定初始通知的延迟(以毫秒为单位)。
bodyMaxWidth	数	250	机身可容纳的最大宽度。以像素为单位其余的通知将始终具有相同的宽度。
位置	串	“右下”	控制通知应出现的位置。可接受的值是：“左上”，“顶中”，“右上”，“左中”，“右中”，“左下”，“底中”，“右下” '。 (使用居中位置时，手动位移将不适用于其居中的轴)
positionXDistance	串	“ 10px”	从左到右的距离取决于位置道具。接受所有css值。
positionYDistance	串	“ 10px”	距顶部或底部的距离取决于位置道具。接受所有css值。

The status object takes the following attributes:

状态对象具有以下属性：

body = this is binded using v-html so you can go crazy with it
body =这是使用v-html绑定的，因此您可以对其疯狂
(optional) title = if left empty, the type will be set as the title (first letter will always be capitalized)
(可选)title =如果保留为空，则将类型设置为标题(首字母始终大写)
(optional) type = accepted values are: 'success', 'alert', 'info', 'error'. If no type given, it falls back to info
(可选)type =接受的值是：“成功”，“警报”，“信息”，“错误”。 如果没有给出类型，则返回信息
(optional) canPause = you can overwrite what has already been set as
a prop
(可选)canPause =您可以覆盖已设置为
一个道具
(optional) canTimeout = if set to false the notification has to be dismissed manually, otherwise it defaults to true
(可选)canTimeout =如果设置为false，则必须手动关闭通知，否则默认为true
(optional) defaultTitle = should the title fall back to the type as the title
(可选)defaultTitle =标题是否应退回到标题的类型
(optional) duration = this will take priority over all other duration settings
(可选)持续时间=这将优先于所有其他持续时间设置
(optional) icon = you can customize the displayed icon within the circle using v-html
(可选)icon =您可以使用v-html自定义圆圈中显示的图标
(optional) mode = available modes: 'prompt' which will display a yes/no button and emits the vtPrompt event with the respective boolean value (canTimeout automatically gets disabled) or 'loader' which will stay present until it hears the vtLoaderStop event
(可选)模式=可用模式：“提示”，将显示是/否按钮，并发出带有相应布尔值的vtPrompt事件(canTimeout自动被禁用)或“加载程序”，该状态将一直存在，直到听到vtLoaderStop事件

杂项信息 (Miscellaneous info)

Events:

大事记：
- To add an event at runtime us the "vtNotify" event, passing the status object
  要在运行时添加事件，请通过状态对象传递“ vtNotify”事件
- Manually dismissing notification will emit the event "vtDismissed"
  手动取消通知将发出事件“ vtDismissed”
- Timer events are triggered at the corresponding points: "vtStarted", "vtPaused", "vtResumed", "vtFinished"
  计时器事件在以下相应点触发：“ vtStarted”，“ vtPaused”，“ vtResumed”，“ vtFinished”
- Loader can be dismissed using the "vtLoadStop" event
  可以使用“ vtLoadStop”事件关闭加载程序
- Prompt on answer will emit the "vtPrompt" event with a boolean value
  提示回答将发出带有布尔值的“ vtPrompt”事件
Pausing the notification is not supporting touch gestures but might work with long press on some devices.

暂停通知不支持触摸手势，但长按某些设备可能会起作用。
1.0.0 will be released once the notification container has been added.

添加通知容器后，将释放1.0.0。

托多斯 (Todos)

Add a notification container which will enable displaying multiple notifications at the same time.

添加一个通知容器，该容器将允许同时显示多个通知。
- queueing notification
  排队通知
Add option that if url attribute specified on the status object, clicking on the notification will point the user to the url (SPA supported)

添加选项，如果状态对象上指定了url属性，则单击通知将使用户指向url(支持SPA)
Increase test coverage

增加测试范围
Add backdrop

添加背景
Move the progress animation to use purely css

移动进度动画以仅使用CSS