基于bootstrap封装轻提示警示框alert

基于bootstrap封装轻提示警示框alert

前言 本人是基于bootstrap的警示框组件进行再次封装,调用前,请先引用bootstrap.css和bootstrap.js。

下面代码相对路径请自行配置。

<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../jquery-3.3.1.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script type="text/javascript" src="../../bootstrapMessage.js"></script>

调用 我把组件封成了一个Message()方法。效果只需在对应的方法里调用即可。 组件提供了一些静态方法,使用方式和参数如下: Message(type, message, duration, isClose);

API

参数 说明 类型 默认值 是否必填 type 提示框类型 string 默认是info,type可为:success, info, warning, error 是 message 提示信息 string /html 如果不传或者传空值,会默认输出type 否 duration 自动关闭的延时,单位毫秒。设为 0 时不自动关闭。 number 2000 否 isClose 是否显示关闭按钮 boolean false 否

正常效果

Message(info, "默认样式");

参数message值可以为string也可以html,方便用户自己调样式。

Message(success, <strong>Success!</strong>获取成功, 0, true);
Message(error, 失败);
Message(warning, 警告, 5000);

如果参数message不传,则会默认输出type。

Message(success);

当然Message()里面也可直接输入普通文字,样式默认是info提示框的样式

Message(不设置类型默认是info样式);

时间问题就封了这些功能,以后如有需要再更新

经验分享 程序员 微信小程序 职场和发展