更新记录

1.1.1（2023-06-23）

定制按钮点击之后将关闭模态框

1.1.0（2023-06-23）

新增按钮关闭之后移除dom节点

1.0.2（2023-06-23）

更新定制按钮点击后关闭模态框

平台兼容性

T-Module

1.起步

引入js

import Module from "../../uni_modules/T-Module/js_sdk/module.js"

在App.vue中引入css，非vue页面可直接在html文件中引用,可根据需求修改样式

有经过样式格式化的样式在本项目中，若此样式不方便阅读 可下载示例项目代码

.main {
display: flex;
flex-direction: column;
}

.tag {
color: #999;
}

.module {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 99;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
}

.module-container {
width: 300px;
height: 300px;
border: 2px solid #999;
display: flex;
padding-left: 10px;
padding-right: 10px;
flex-direction: column;
background-color: white;
position: relative;
}

.module-container-title {
flex: 2;
display: flex;
flex-direction: row;
align-items: center;
font-size: 30px;
border-bottom: 1px solid black;
font-weight: bold;
justify-content: space-between;
position: relative;
}

.module-container-title .module-text {
width: 20px;
height: 20px;
position: absolute;
right: 0;
top: 10px;
color: #999;
font-weight: 100;
}

.module-container-content {
flex: 5;
display: flex;
flex-direction: row;
padding-left: 10px;
font-size: 20px;
}

.module-btn-container {
flex: 1;
display: flex;
flex-direction: row;
border-top: 1px solid rgb(63, 179, 173);
align-items: center;
justify-content: center;
gap: 10px;
}

.module-btn {
width: 100px;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
}

@keyframes animate {
0% {
left: 10px;
}

25% {     
    left: -10px;     
}     

50% {     
    left: 5px;     
}     

75% {          
    left: -5px;     
}     

100% {     
    left: 0;     
}  

}

3.实例化module.js

let module = new Module("标题","内容")

4.调用showModule,显示模态框

module.showModule()

2.注意事项

1.构造函数为: Module(title,content[,Object])

title 为必传参数，模态框的标题

content 为必传参数，模态框的内容

Object 为可选参数,可传入多个Object,为模态框下方的按钮,默认没有按钮

Object 为对象 需传入name属性和fun回调,name为按钮的名字,fun为按钮被点击时的回调

示例

传入一个

new Module("标题","内容",{name:"按钮名字",fun:()=>{ console.log("按钮回调") } })

传入多个

new Module("标题","内容",{name:"按钮名字",fun:()=>{ console.log("按钮回调") } },{name:"按钮名字",fun:()=>{ console.log("按钮回调") } })

如遇到任何bug，欢迎联系反馈问题

QQ：3226357667