在 Web 开发中,我们常常需要在页面中展示弹窗提示或者全屏提示等等。而 bs-fullscreen-message 就是一款高度可定制的全屏提示插件,其在 npm 包管理器中也有相应的包可以使用。
安装与使用
安装 bs-fullscreen-message 插件的命令如下:
npm install bs-fullscreen-message --save
使用该插件前,需要在 html 文件中引入相应的 css 和 js 文件:
<link rel="stylesheet" href="path_to_bs-fullscreen-message.css"> <script src="path_to_bs-fullscreen-message.js"></script>
接下来,我们就可以开始使用该插件。
基础使用
bs-fullscreen-message 提供了三种基础的全屏提示类型,分别是 success、warning 和 error。我们可以使用相应的类名来触发不同的提示:
<button onclick="bsfm.success('这是成功提示')">成功提示</button> <button onclick="bsfm.warning('这是警告提示')">警告提示</button> <button onclick="bsfm.error('这是错误提示')">错误提示</button>
上面的代码中,我们为三个按钮的点击事件分别绑定了 bs-fullscreen-message 的三种提示类型。
高级使用
除了基础的类型,bs-fullscreen-message 提供了更加高度可定制的使用方式。我们可以使用配置项来修改提示的文本内容、颜色和位置等等。
具体的配置项如下:
message
:提示的文本内容type
:提示类型,可选值为 success、warning 和 erroricon
:自定义的提示图标,需要传入相应的 html 代码delay
:提示显示时间,单位为毫秒,默认为 1500 毫秒position
:提示的位置,可选值为 top、center 和 bottombackgroundColor
:提示背景颜色textColor
:提示文本颜色onclick
:点击提示时触发的回调函数
接下来,我们就可以结合配置项来自定义全屏提示的样式及行为。例如,我们可以使用如下代码来自定义一个带有自定义图标和点击事件的提示:
-- -------------------- ---- ------- ------- -------------------- -------- ---------- ----- ---------- --------- --------- ----- --- --------- ---------------------- ---------------- ---------- ---------- ------- -------- ---------- - ------------------------- - ------------------
总结
bs-fullscreen-message 插件提供了非常方便和可定制的全屏提示功能,无论是在开发中还是实际应用中都非常实用。但需要注意的是,在使用该插件时需要保证正确引入相应的 css 和 js 文件,否则会导致该插件无法正常使用。
代码示例:
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedbdc3b5cbfe1ea0611afc