npm 包 blon 使用教程

介绍

blon 是一个方便快捷地为前端界面添加二次确认功能的 npm 包。它非常轻量，只有 1.8KB 左右，同时还支持灵活的自定义配置。使用 blon 可以有效防止用户因误操作而导致的一些不必要的损失。在本文中，我们将详细介绍如何使用 blon。

安装

你可以通过以下命令安装 blon：

$ npm install blon

或者通过 yarn 安装：

$ yarn add blon

使用

使用 blon 只需要引入并实例化即可，非常简单。接下来我们将详细介绍如何使用 blon，包括常见配置及其用途。

基本使用

import blon from 'blon';

blon('删除这篇文章？', () => {
  console.log('执行删除...');
});

如上代码所示，我们首先通过 import 引入了 blon，然后通过 blon 函数实例化了一个 blon 对象。其中第一个参数是要展示的提示信息，第二个参数是用户点击确定（确认）后的回调函数。

自定义配置

blon 支持自定义配置，以下是一些常见的配置及其用途。

container

类型：HTMLElement

描述：你可以自定义 blon 的容器元素。默认是 document.body，但在某些情况下，你可能想将 blon 容器元素设置为指定的元素。

示例代码

const container = document.querySelector('#my-container');
blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { container });

confirmText

类型：string

描述：你可以自定义 blon 确认按钮的文本。默认是 确定。

示例代码

blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { confirmText: '是' });

cancelText

类型：string

描述：你可以自定义 blon 取消按钮的文本。默认是 取消。

示例代码

blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { cancelText: '否' });

confirmButtonClassName

类型：string

描述：你可以自定义 blon 确认按钮的 class 名称。默认是 blon-confirm-button。

示例代码

blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { confirmButtonClassName: 'my-confirm-button' });

cancelButtonClassName

类型：string

描述：你可以自定义 blon 取消按钮的 class 名称。默认是 blon-cancel-button。

示例代码

blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { cancelButtonClassName: 'my-cancel-button' });

maskClassName

类型：string

描述：你可以自定义 blon 蒙层的 class 名称。默认是 blon-mask。

示例代码

blon('删除这篇文章？', () => {
  console.log('执行删除...');
}, { maskClassName: 'my-mask' });

结束语

至此，我们已经介绍了如何使用 blon，包括基本使用和常见配置。blon 是一个方便快捷的 npm 包，可以有效保障前端界面的交互安全，强烈建议使用。如果您对 blon 有任何疑问或建议，请在评论区留言或向开发者提交 issue。我们将不断改进 blon，为开发者提供更好的使用体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f5081e8991b448dcd4c