在我们日常的前端开发中，经常需要展示一些文本提示信息。这时候，一个简洁易用且自定制化程度高的 toast 便显得尤为重要。而 scsstoast 则是一款易于使用的纯 CSS toast 库，使得展示 tosat 变得更加方便。
安装scsstoast
安装 scsstoast 只需要在你的项目中运行以下代码：
npm install scsstoast -S
使用scsstoast
使用 scsstoast 中最主要的 API 是 show 方法。将以下代码添加到你的 Javascript 文件中：
import { show } from 'scsstoast';
show('Your message here');即可在网页页面中显示一个 toast。默认情况下，toast 的 CSS 样式已经给出来。如果需要更多的自定义，可以通过以下代码引入 scsstoast 的 SCSS 样式文件，并在样式文件里按照需求修改变量。
@import '~scsstoast/dist/scsstoast.scss'; // 假设你希望修改toast文字为绿色 $scsstoast-text-color: #00FF00;
配置scsstoast
scsstoast 的默认配置项如下：
-- -------------------- ---- ------- --- - --------- ---- -- ----- ------------- - - -- ---- --------- ----- -- ----- ------- ------- -- ------ ---------- ----- -- ----- -- ----- ------ --
如果需要在代码中自定义一些配置，可以通过 show 方法的第二个参数 options 对象实现：
show('Your message here', {
duration: 5000,
autoClose: false,
type: 'success'
});通过这些配置项，你可以调整显示时间，偏移量，是否自动关闭，css 样式等等。
示例
下面是一个完整的代码示例，展示了 scsstoast 的基本用法：
-- -------------------- ---- ------- ------ - ---- - ---- ------------ ------ --------------- -- -------------------- ---------------------- -------- ------------- -- -- ---------- - --------- ----- ---------- ----- ----- ------ ---
总结
通过本篇文章，你应该已经掌握了 scsstoast 的基本用法，以及如何自定义 scsstoast 等方面的知识。当然，这只是 scsstoast 的一个入门级别的使用方法。借助于 scsstoast 强大的自定义化能力，你可以通过修改 CSS 样式文件，自定义更多的 toast 样式，以适应你的应用场景，为你的用户和自己创造更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53d01