在前端开发中,我们经常需要使用弹窗来提醒用户一些信息。在这种情况下,使用 elbgoods-alert 这个 npm 包将会是一个很好的选择。本文将带领大家学习使用这个 npm 包。
安装
使用 npm 安装 elbgoods-alert:
--- ------- -------------- ------
安装成功后,在需要使用的地方引入 elbgoods-alert
:
------ ------------- ---- -----------------
使用方式
使用 elbgoodsAlert
方法来创建一个新的 alert 弹窗:
--------------- ------ ----- -------- ----------- ----- ------ ---
这里我们指定了弹窗的标题、信息和弹窗类型。可以看到,elbgoodsAlert
方法使用一个参数来指定弹窗的各个属性。下面我们来详细介绍这些属性的含义以及可选值。
属性
title
指定弹窗的标题,可以是纯文本或 HTML 代码。如果不指定此属性,则弹窗不显示标题。
message
指定弹窗的信息,可以是纯文本或 HTML 代码。如果不指定此属性,则弹窗不显示信息。我们可以在 message
中指定字符串以及一些标签,如下:
--------------- ------ ----- -------- ---------------------------------- ----- ------ ---
type
指定弹窗的类型,可选值有:
success
:表示成功提示信息info
:表示一般提示信息warning
:表示警告信息error
:表示错误信息
如果不指定此属性,则默认为 info
类型。
回调函数
你还可以指定两个回调函数,以便在弹窗打开和关闭时执行自定义的代码。
onOpen
指定弹窗打开时执行的函数,如下:
--------------- ------ ----- -------- ----------- ------- ---------- - --------------------- - ---
onClose
指定弹窗关闭时执行的函数,如下:
--------------- ------ ----- -------- ----------- -------- ---------- - --------------------- -- ---
使用示例
下面我们来看一个完整的使用示例:
------ ------------- ---- ----------------- --------------- ------ ----- -------- ---------------------------------- ----- ---------- ------- ---------- - --------------------- -- -------- ---------- - --------------------- -- ---
结语
本文介绍了如何使用 npm 包 elbgoods-alert 来创建弹窗。了解了这个 npm 包的使用方法,可以使我们在前端开发中更加便捷地使用弹窗来提醒用户一些信息。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055aab81e8991b448d83b3