在前端开发中,我们常常需要使用弹窗组件,用来进行某些交互操作的提示或警告。而 @beisen-platform/platform-confirm 就是一个提供了弹窗功能的 npm 包,本文将介绍如何在项目中使用这个库。
安装
使用 npm 安装:
npm install @beisen-platform/platform-confirm
引入
在需要使用的页面里引入 @beisen-platform/platform-confirm:
import PlatformConfirm from '@beisen-platform/platform-confirm'
使用
基本使用
@beisen-platform/platform-confirm 的最基本用法如下:
-- -------------------- ---- ------- ----------------- ------ ----- -------- ------------ -------- ---- ---------- -- - -- -------- ----------- -- - -- -------- --
其中:
title
:弹窗标题,默认为“提示”;message
:弹窗内容;btnText
:确定按钮文本,可以自定义。
自定义按钮
@beisen-platform/platform-confirm 还支持自定义按钮,如下所示:
-- -------------------- ---- ------- ----------------- ------ ----- -------- ------------ -------- - ----- ----- ------ --------- -- ------- - ----- ------ ------ --------- - ---------- -- - -- -------- ----------- -- - -- -------- --
其中:
confirm
:确定按钮相关配置,包括text
和color
;cancel
:取消按钮相关配置,包括text
和color
。
自定义样式
如果你需要对弹窗进行自定义样式,可以使用 options
属性,如下所示:
-- -------------------- ---- ------- ----------------- -------- ------------ -------- - ------------- ------------------- ------------ ------------------ --------- -------------- - ---------- -- - -- -------- ----------- -- - -- -------- --
其中:
overlayClass
:遮罩层样式;dialogClass
:弹窗容器样式;btnClass
:按钮样式。
Promise 的返回值
@beisen-platform/platform-confirm 返回的是一个 Promise 实例,因此可以用链式调用的方式来处理点击确定后的操作:
-- -------------------- ---- ------- ----------------- -------- ----------- ---------- -- - -- -------- - ------ ----------------- -------- --------- -- ---------- -- - -- -------- - ------ ----------------- -------- ---------- -- ----------- -- - -- -------- --
小结
本文介绍了如何使用 @beisen-platform/platform-confirm 这个弹窗组件库,在实际开发中,了解和掌握这个库的使用方法,可以让我们更快速地完成前端开发工作。最后,附上完整代码示例:
-- -------------------- ---- ------- ------ --------------- ---- ----------------------------------- -- ---- ----------------- ------ ----- -------- ------------ -------- ---- ---------- -- - -- -------- ----------- -- - -- -------- -- -- ----- ----------------- ------ ----- -------- ------------ -------- - ----- ----- ------ --------- -- ------- - ----- ------ ------ --------- - ---------- -- - -- -------- ----------- -- - -- -------- -- -- ----- ----------------- -------- ------------ -------- - ------------- ------------------- ------------ ------------------ --------- -------------- - ---------- -- - -- -------- ----------- -- - -- -------- -- -- ---- ----------------- -------- ----------- ---------- -- - -- -------- - ------ ----------------- -------- --------- -- ---------- -- - -- -------- - ------ ----------------- -------- ---------- -- ----------- -- - -- -------- --
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-platform-to-confirm