<!-- <script src="./alert.js"></script> --> <script src="./alert.min.js"></script>
<script>
const tzAlert = new TzAlert({
center: true, // 内容居中
isShow: false, // 实例化完成直接显示
title: {
html: '标题',
color: '#ff80ab',
fontSize: '18px'
},
maskClose: true,
mask: {
use: true,
background: 'rgba(0,0,0,.6)'
},
tips: {
html: '点击内容部分即可复制'
},
content: {
html: '11111哈哈哈哈哈哈哈哈哈，我是一段文字，你来复制我啊！！！'
},
onEvents(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 | 该函数会在弹窗渲染并打开完成后执行 |
