侧边栏壁纸
博主头像
小莫唐尼

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 26 篇文章
  • 累计创建 44 个标签
  • 累计收到 138 条评论

目 录CONTENT

文章目录

【原创】原生js实现的Alert弹窗

小莫唐尼
2022-03-12 / 5 评论 / 27 点赞 / 1,161 阅读 / 2,173 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

感谢您使用alert插件,本插件由【小莫唐尼】提供,您可以任意修改!
注意:本插件为作者小莫唐尼原创,若重新修改发布请注明原作者,谢谢!
说明:本插件为原生js插件,不依赖任何第三方脚本,源码开放可放心使用。

插件特点

1. 支持自定义顶部、内容、底部;
2. 支持内容区域复制,可以选择文本内容或者连带dom元素复制(暂未支持图片复制);
3. 支持自由拖拽;
4. 支持动画效果;
5. 支持自定义位置显示;
6. 更多功能,欢迎您来提供建议和反馈…

更新记录

版本V1.1.2 :2022年03月24日

1. 新增:支持配置弹窗显示位置position
2. 新增:支持配置弹窗显示动画效果animate
3. 优化:优化内部js代码,将css进行分离,注意:当前版本您需要单独引用css样式文件

插件下载

在线下载地址传送门(立即传送
仓库源码地址传送门(立即传送

插件预览图

image.png
image.png

开始使用

第一步:下载并引用 样式和脚本

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>

第二步:初始化插件

以下为简单的示例,您可以往下查看所有的配置项,或者查看插件的README.md文档

<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方法
useEscClose boolean false 是否允许使用esc键关闭弹窗
position string “top” 弹窗的位置,可选值:
center=居中
left=左边
left-top=左上角
left-bottom=左下角
top=顶部
right-top=右上角
right=右边
right-bottom=右下角
bottom=底部
animate string “” 弹窗动画,可选值:zoom-inlefttoprightbottom
copy object 查看下方copy属性 对内部复制事件的配置,具体的配置项请看下方的copy配置项,复制功能仅能对以下的content配置项中传入的html参数内容
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 该函数会在弹窗渲染并打开完成后执行

copy配置项

参数名 参数类型 是否必填 默认值 说明
use Boolean true 是否启用复制功能
onlyText Boolean true 是否仅复制文本,否则会复制dom元素
useTips Boolean true 复制成功后是否显示复制成功的提示
isDbClick Boolean true 是否双击才能够复制,true=双击,false=单击

confirm配置项

参数名 参数类型 是否必填 默认值 说明
use boolean true 是否显示按钮
text string ‘确认’ 按钮文字
textColor string ‘#fff’ 按钮文字颜色
bgColor string ‘#ff80ab’ 按钮背景颜色
radius string ‘6px’ 按钮圆角
border string ‘1px solid #ff80ab’ 按钮边框
shadow string ‘0px 1px 10px rgba(255, 128, 171, .4)’ 按钮的阴影效果(hover事件使用鼠标经过的时候出现)
padding string ‘6px 15px’ 按钮的内边距

cancel配置项

参数名 参数类型 是否必填 默认值 说明
use boolean true 是否显示按钮
text string ‘取消’ 按钮文字
textColor string ‘#333’ 按钮文字颜色
bgColor string ‘#fff’ 按钮背景颜色
radius string ‘6px’ 按钮圆角
border string ‘1px solid #dcdfe6’ 按钮边框
shadow string ‘0px 1px 3px rgba(144, 147, 153, .2)’ 按钮的阴影效果(hover事件使用鼠标经过的时候出现)
padding string ‘6px 15px’ 按钮的内边距

mask配置项

参数名 参数类型 是否必填 默认值 说明
use boolean true 使用遮罩层
background string ‘rgba(0,0,0,.3)’ 遮罩层的颜色

title配置项

参数名 参数类型 是否必填 默认值 说明
html string " " 弹窗的标题内容,支持html,若设置为 “” 则不显示
color string " " 文字的颜色
fontSize string " " 字体大小,必须携带字体大小单位
fontWeight string " " 字体的加粗值

content配置项

参数名 参数类型 是否必填 默认值 说明
html string “” 弹窗的主体内容,支持html
padding string “” 弹窗的主体内容内边距

tips配置项

参数名 参数类型 是否必填 默认值 说明
html string " " 弹窗提示文字内容,支持html,若设置为 “” 则不显示
color string " " 文字的颜色
fontSize string " " 字体大小,必须携带字体大小单位
fontWeight string " " 字体的加粗值

bottom配置项

参数名 参数类型 是否必填 默认值 说明
show boolean true 是否显示底部区域,该参数会影响内部按钮的显示,若赋值false则确定和取消按钮不会显示
isCover boolean false 是否对内置的按钮进行覆盖
html string " " 弹窗底部的内容,支持html内容

内置事件

事件名 调用方式 参数 说明
open let tzAlert = new TzAlert(options)
tzAlert.open()
options(非必填) 打开弹窗,可以传入参数,参数内容与实例化时候的参数一致,可参考实例化参数进行赋值
close let tzAlert = new TzAlert(options)
tzAlert.close()
关闭弹窗
27

评论区