插件特点

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

更新记录

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

1. 新增：支持配置弹窗显示位置position；
2. 新增：支持配置弹窗显示动画效果animate；
3. 优化：优化内部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	该函数会在弹窗渲染并打开完成后执行