Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
49851d4a57 | |||
df4229bf2f | |||
cd8ca7dcc4 |
49
miniprogram/modular/Popups/Popups.scss
Normal file
49
miniprogram/modular/Popups/Popups.scss
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
@import "../../app.scss";
|
||||||
|
|
||||||
|
view.popups {
|
||||||
|
position: fixed;
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
margin:auto;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
|
top:0;
|
||||||
|
bottom:0;
|
||||||
|
background-color: $theme-color-light-layout;
|
||||||
|
border-radius: 15px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
view.popups.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
view.popups.none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.popups.show {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-name: show;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.popups.hide {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-name: hide;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes show{
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hide{
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
58
miniprogram/modular/Popups/Popups.ts
Normal file
58
miniprogram/modular/Popups/Popups.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { Modular, Manager } from "../../core/Module";
|
||||||
|
|
||||||
|
class Popups<M extends Manager> extends Modular<M> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 动画运行时间
|
||||||
|
*/
|
||||||
|
public static readonly animateTime: number = 100;
|
||||||
|
|
||||||
|
public data? = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹出层是否显示
|
||||||
|
*/
|
||||||
|
display:false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹出层动画
|
||||||
|
*/
|
||||||
|
isShow:false
|
||||||
|
};
|
||||||
|
|
||||||
|
disappearTimer: number | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示弹出层
|
||||||
|
*/
|
||||||
|
public showPopups() {
|
||||||
|
this.setData({
|
||||||
|
isShow:true,
|
||||||
|
display:true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 隐藏弹出层
|
||||||
|
*/
|
||||||
|
public hidePopups() {
|
||||||
|
this.setData({
|
||||||
|
isShow:false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.disappearTimer = setTimeout(() => {
|
||||||
|
this.setData({
|
||||||
|
display: false
|
||||||
|
});
|
||||||
|
}, Popups.animateTime);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public override onLoad() {
|
||||||
|
// Do something
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Popups };
|
||||||
|
export default Popups;
|
@ -2,6 +2,7 @@
|
|||||||
@import "./MainFunction.scss";
|
@import "./MainFunction.scss";
|
||||||
@import "./FunctionList.scss";
|
@import "./FunctionList.scss";
|
||||||
@import "../../modular/Mask/Mask.scss";
|
@import "../../modular/Mask/Mask.scss";
|
||||||
|
@import "../../modular/Popups/Popups.scss";
|
||||||
|
|
||||||
view.container{
|
view.container{
|
||||||
padding-top: 50rpx;
|
padding-top: 50rpx;
|
||||||
|
@ -3,6 +3,7 @@ import { UserCard } from "./UserCard";
|
|||||||
import { MainFunction } from "./MainFunction";
|
import { MainFunction } from "./MainFunction";
|
||||||
import { FunctionList } from "./FunctionList";
|
import { FunctionList } from "./FunctionList";
|
||||||
import { Mask } from "../../modular/Mask/Mask";
|
import { Mask } from "../../modular/Mask/Mask";
|
||||||
|
import {Popups} from "../../modular/Popups/Popups"
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
|
||||||
@ -12,8 +13,10 @@ import { Mask } from "../../modular/Mask/Mask";
|
|||||||
// 添加蒙版 Modular
|
// 添加蒙版 Modular
|
||||||
const mask = manager.addModule(Mask, "mask");
|
const mask = manager.addModule(Mask, "mask");
|
||||||
|
|
||||||
|
const popups = manager.addModule(Popups,"popups")
|
||||||
|
|
||||||
// 添加 UserCard Modular
|
// 添加 UserCard Modular
|
||||||
manager.addModule(UserCard, "userCard", { mask });
|
manager.addModule(UserCard, "userCard", { mask, popups });
|
||||||
|
|
||||||
// 添加 MainFunction Modular
|
// 添加 MainFunction Modular
|
||||||
manager.addModule(MainFunction, "mainFunction");
|
manager.addModule(MainFunction, "mainFunction");
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
<view class="mask {{ mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}"
|
<view class="mask {{ mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}"
|
||||||
bindtap="mask$handleClickMask"></view>
|
bindtap="mask$handleClickMask"></view>
|
||||||
|
|
||||||
|
<!-- 弹出层 -->
|
||||||
|
<view class="popups" style="display:{{popups$isShow ? 'block' : 'none'}}"></view>
|
||||||
|
|
||||||
<!-- 顶部的阴影 -->
|
<!-- 顶部的阴影 -->
|
||||||
<view class="top-shadow"></view>
|
<view class="top-shadow"></view>
|
||||||
|
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
|
import Popups from "modular/Popups/Popups";
|
||||||
import { Modular, Manager } from "../../core/Module";
|
import { Modular, Manager } from "../../core/Module";
|
||||||
import { Mask } from "../../modular/Mask/Mask";
|
import { Mask } from "../../modular/Mask/Mask";
|
||||||
|
|
||||||
type IUserCardDependent<M extends Manager> = {
|
type IUserCardDependent<M extends Manager> = {
|
||||||
mask: Mask<M>
|
mask: Mask<M>
|
||||||
|
popups: Popups<M>
|
||||||
}
|
}
|
||||||
|
|
||||||
type IUserCardEvent = {
|
type IUserCardEvent = {
|
||||||
@ -23,6 +25,7 @@ class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>, IUse
|
|||||||
* 处理主题更换
|
* 处理主题更换
|
||||||
*/
|
*/
|
||||||
private handleChangeTheme() {
|
private handleChangeTheme() {
|
||||||
|
this.depends?.popups.showPopups();
|
||||||
this.depends?.mask.emit("show", void 0);
|
this.depends?.mask.emit("show", void 0);
|
||||||
this.emit("clickChangeTheme", void 0);
|
this.emit("clickChangeTheme", void 0);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
|
"setting": {},
|
||||||
"condition": {
|
"condition": {
|
||||||
"plugin": {
|
"plugin": {
|
||||||
"list": []
|
"list": []
|
||||||
@ -16,6 +17,12 @@
|
|||||||
"pathName": "pages/Account/Account",
|
"pathName": "pages/Account/Account",
|
||||||
"query": "",
|
"query": "",
|
||||||
"scene": null
|
"scene": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "pages/Account/Account",
|
||||||
|
"pathName": "pages/Account/Account",
|
||||||
|
"query": "",
|
||||||
|
"scene": null
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user