
插件特点
- 支持自定义顶部、内容、底部;
- 支持内容区域复制,可以选择文本内容或者连带dom元素复制(暂未支持图片复制);
- 支持自由拖拽;
- 支持动画效果;
- 支持自定义位置显示;
- 更多功能,欢迎您来提供建议和反馈…
更新记录
版本V1.1.2 :2022年03月24日
- 新增:支持配置弹窗显示位置position;
- 新增:支持配置弹窗显示动画效果animate;
- 优化:优化内部js代码,将css进行分离,注意:当前版本您需要单独引用css样式文件;
开始使用
第一步:下载并引用 样式和脚本
- 1.引用css样式
<!-- 基础样式:必须 -->
<!-- <link rel="stylesheet" href="./alert/css/alert.css"> -->
<link rel="stylesheet" href="./alert/css/alert.min.css">
<!-- 动画支持,非必须:animate属性 -->
<!-- <link rel="stylesheet" href="./alert/css/alert.ani.css"> -->
<link rel="stylesheet" href="./alert/css/alert.ani.min.css">
- 2.引用js
<!-- <script src="./alert/js/alert.js"></script> -->
<script src="./alert/js/alert.min.js"></script>
第二步:初始化插件
- 以下为简单的示例,您可以往下查看所有的配置项
<script>
const tzAlert = new TzAlert({
center: true, // 内容居中
title: {
html: '标题',
color: '#ff80ab',
fontSize: '18px'
},
mask: {
use: true,
background: 'rgba(0,0,0,.6)'
},
tips: {
html: '点击内容部分即可复制'
},
content: {
html: '我是一段文字,你来复制我啊!!!这里也支持html内容'
},
onEvents:function(e) {
console.log('监听了内部的按钮事件')
console.log(e)
},
onMounted: function () {
console.log('执行我吧')
}
});
tzAlert.open(); // 初始化显示(方式2)
</script>
插件配置项
参数名 | 参数类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
width | string | 是 | 460px | 弹窗的宽度,必须是px单位 |
top | string | 是 | 20px | 距离顶部的距离,可以使用任意css单位,推荐使用px |
radius | string | 是 | 6px | 弹窗的圆角,必须存在单位 |
shadow | string | 是 | ‘0 2px 10px rgba(0,0,0,0.2)’ | 弹窗的阴影 |
center | boolean | 是 | false | 内容是否居中显示,如标题,tips提示,默认的确认和取消按钮等 |
useDrop | boolean | 是 | true | 启用拖拽效果,启用后点击弹窗的标题部分即可拖拽 |
useMaskClose | boolean | 是 | true | 点击遮罩层关闭弹窗,前提是启用了遮罩层 |
useInitShow | boolean | 是 | false | 是否在初始化完成的时候就直接显示弹窗,此时不需要额外调用open方法 |
copy | object | 是 | 查看下方copy属性 | 对内部`复制事件`的配置,具体的配置项请看下方的`copy`配置项,复制功能仅能对以下的`content` |
confirm | object | 是 | 查看下方copy属性 | 对`确定按钮`的配置,具体的配置项请看下方的`confirm`配置项 |
cancel | object | 是 | 查看下方copy属性 | 对`取消按钮`的配置,具体的配置项请看下方的`cancel`配置项 |
mask | object | 是 | 查看下方copy属性 | 对`遮罩层`的配置,具体的配置项请看下方的`mask`配置项 |
title | object | 是 | 查看下方copy属性 | 对`弹窗标题`的配置,具体的配置项请看下方的`title`配置项 |
content | object | 是 | 查看下方copy属性 | 对`弹窗内容`的配置,具体的配置项请看下方的`content`配置项 |
tips | object | 是 | 查看下方copy属性 | 对`提示信息`的配置,具体的配置项请看下方的`tips`配置项 |
bottom | object | 是 | 查看下方copy属性 | 对`弹窗底部`的配置,具体的配置项请看下方的`bottom`配置项 |
onClose | function | 否 | null | 监听关闭事件 |
onEvents | function | 否 | null | 若启用确定按钮`confirm.use=true`或者取消`cancel.use=true`,并且实例化的时候传入该函数,那么该函数会返回内部的确定按钮和取消按钮的点击事件,否则确定按钮和取消按钮将会默认绑定关闭事件。 |
onMounted | function | 否 | null | 该函数会在弹窗渲染并打开完成后执行 |
© 版权声明
本站网络名称:
青鹿云
本站永久网址:
www.milubk.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
暂无评论内容