npm 包 scsstoast 使用教程

在我们日常的前端开发中，经常需要展示一些文本提示信息。这时候，一个简洁易用且自定制化程度高的 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 的默认配置项如下：

/**
 * scsstoast 默认配置
 */
const defaultConfig = {
  // 显示时间
  duration: 3000,
  // 动画偏移量
  offset: '15px',
  // 是否自动关闭
  autoClose: true,
  // toast 类型
  type: 'info'
};

如果需要在代码中自定义一些配置，可以通过 show 方法的第二个参数 options 对象实现：

show('Your message here', {
  duration: 5000,
  autoClose: false,
  type: 'success'
});

通过这些配置项，你可以调整显示时间，偏移量，是否自动关闭，css 样式等等。

示例

下面是一个完整的代码示例，展示了 scsstoast 的基本用法：

import { show } from 'scsstoast';
import './style.scss';

// 在scss文件中设置text-color 
$scsstoast-text-color: #00FF00;

show('Welcome to my website!', {
  duration: 3000,
  autoClose: true,
  type: 'info'
});

总结

通过本篇文章，你应该已经掌握了 scsstoast 的基本用法，以及如何自定义 scsstoast 等方面的知识。当然，这只是 scsstoast 的一个入门级别的使用方法。借助于 scsstoast 强大的自定义化能力，你可以通过修改 CSS 样式文件，自定义更多的 toast 样式，以适应你的应用场景，为你的用户和自己创造更好的使用体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53d01