66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
/*
|
|
* 自定义移动端弹框组件
|
|
*
|
|
* @Author: 黎永顺
|
|
* @Date: 2025/4/16
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import { removeElementById } from "../../util";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class MobileModal extends Component {
|
|
componentDidMount() {
|
|
this.setMetaViewport();
|
|
}
|
|
|
|
setMetaViewport = () => {
|
|
// 检查是否已存在 viewport meta 标签
|
|
let viewportMeta = document.querySelector("meta[name=\"viewport\"]");
|
|
if (!viewportMeta) {
|
|
// 如果不存在，创建一个新的 meta 标签
|
|
viewportMeta = document.createElement("meta");
|
|
viewportMeta.setAttribute("name", "viewport");
|
|
document.head.appendChild(viewportMeta);
|
|
}
|
|
// 设置或更新 viewport 的 content 属性
|
|
const content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover";
|
|
viewportMeta.setAttribute("content", content);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div id="am-modal-container">
|
|
<div>
|
|
<div className="am-modal-mask"></div>
|
|
<div className="am-modal-wrap">
|
|
<div className="am-modal am-modal-transparent">
|
|
<div className="am-modal-content">
|
|
<div className="am-modal-header">
|
|
<div className="am-modal-title">{this.props.title}</div>
|
|
</div>
|
|
<div className="am-modal-body">{this.props.children}</div>
|
|
<div className="am-modal-footer">
|
|
<div className="am-modal-button-group-h">
|
|
<a href="javascript:void(0);" className="am-modal-button"
|
|
onClick={() => removeElementById("am-modal-container")}>{getLabel(111, "取消")}</a>
|
|
<a href="javascript:void(0);" className="am-modal-button"
|
|
onClick={this.props.onConfirm}>{getLabel(111, "确定")}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MobileModal;
|