Vue.js的真正纯土司通知机制

v-托斯蒂尼 (v-Tostini)

v-Tostini is really plain toast notifications mechanism for Vue.js 2.x. There is no CSS included, which means that you need to add your own flavor for it. Just like with tostini – no one will tell you how it should look like ;)

v-Tostini实际上是Vue.js 2.x的简单吐司通知机制。 没有包含CSS，这意味着您需要为其添加自己的风格。 就像tostini一样-没有人会告诉你它的外观;)

入门 (Getting Started)

先决条件 (Prerequisites)

This package is using UMD pattern.

该软件包使用UMD模式。

用法 (Usage)

1. Install it (or download):

   安装(或下载)：

1. Require in your project:

   在您的项目中需要：

1. Tell Vue to use it:

   告诉Vue使用它：

1. Now simply place in your HTML:

   现在，只需将放入您HTML中：

1. Call from any Vue instance:

   从任何Vue实例调用：

特征 (Features)

使用字符串作为参数 (Use String as an argument)

You can also use as argument a string:

您还可以使用字符串作为参数：

Above will be the same as:

上面将与以下内容相同：

通知期限 (Notification Duration)

By default duration is calculated by the length of given message. The formula I have created is based on an experiment carried out on colleagues from work. I checked what is the average time that an adult needs to notice and read the technical text that one saw for the first time. Since I have implemented it, complaining that someone did not manage to read the text – ended :)

默认情况下，持续时间由给定消息的长度计算。 我创建的公式基于对同事进行的一项实验。 我检查了成年人需要注意的平均时间，并阅读了第一次看到的技术文章。 自从我实现了它之后，抱怨有人没能阅读文本-结束了:)

Of course you can set your own duration:

当然，您可以设置自己的持续时间：

种类 (Types)

field in toastini config is set as in added tostini to tostini-plate. So basicly it’s up to you how you will use it.

toastini配置中的字段在添加到tostini-plate的tostini中设置为 。 所以从根本上说，这取决于您如何使用。

范例CSS (Exmaple CSS)

So this is CSS that I’m using. As you can see I’m using types:

这就是我正在使用CSS。 如您所见，我正在使用类型：

• default

  默认

• success

  成功

• error

  错误

• warning

  警告

• info

  信息

翻译自: https://vuejsexamples.com/really-plain-toast-notifications-mechanism-for-vue-js/

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览92925 人正在系统学习中 相关资源：经典刻录软件尼禄Nero6.6.1.4中文安装版及序列号-其它工具类资源…

来源：cuk5340