You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.3 KiB
98 lines
2.3 KiB
2 years ago
|
import { Button, notification } from "ant-design-vue";
|
||
|
|
import { CloseSquareTwoTone } from "@ant-design/icons-vue";
|
||
|
|
import { h, VNode } from "vue";
|
||
|
|
/**
|
||
|
|
* 消息弹窗组件 Notification
|
||
|
|
* @param {string} title 标题
|
||
|
|
* @param {string} content 内容
|
||
|
|
* @param {string} id 唯一标识
|
||
|
|
* @param {number} duration 持续时间： 默认不关闭（单位：秒）
|
||
|
|
* @param {string} btnAText 按钮1 名称
|
||
|
|
* @param {string} btnBText 按钮2 名称
|
||
|
|
* @param {Event} btnAEvent 按钮1 事件
|
||
|
|
* @param {Event} btnBEvent 按钮2 事件
|
||
|
|
*/
|
||
|
|
export default function popup(
|
||
|
|
title = "标题",
|
||
|
|
content: VNode[] | string = "请输入内容",
|
||
|
|
id = "",
|
||
|
|
duration = 0,
|
||
|
|
btnAText = "", btnBText = "",
|
||
|
|
btnAEvent = () => {/* do nothing.*/ },
|
||
|
|
btnBEvent = () => {/* do nothing.*/ }
|
||
|
|
): void {
|
||
|
|
const key = id === "" ? `id-${Date.now()}` : id;
|
||
|
|
notification.open({
|
||
|
|
key,
|
||
|
|
duration: duration,
|
||
|
|
message: h(
|
||
|
|
"h2",
|
||
|
|
{
|
||
|
|
style: { color: "#fff",
|
||
|
|
textAlign: "center"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
title
|
||
|
|
),
|
||
|
|
description: h(
|
||
|
|
"div",
|
||
|
|
{
|
||
|
|
style: { color: "#fff" },
|
||
|
|
},
|
||
|
|
content
|
||
|
|
),
|
||
|
|
placement: 'topLeft',
|
||
|
|
style: {
|
||
|
|
width: "540px",
|
||
|
|
// height: "600px",
|
||
|
|
// marginLeft: `-200px`,
|
||
|
|
/**right导致页面重排，不流畅，但目前mac和Windows通过效果
|
||
|
|
*/
|
||
|
|
top: "50%",
|
||
|
|
left: `50%`,
|
||
|
|
transform: 'translate(-50%,-50%)',
|
||
|
|
backgroundColor: "rgba(0 ,64 ,64 , 0.8)",
|
||
|
|
userSelect: "none",
|
||
|
|
//boxShadow: "inset 0 0 15px 4px #56ffff",
|
||
|
|
// boxShadow: "inset 0 0 4px 2px #56ffff",
|
||
|
|
borderRadius:"5px",
|
||
|
|
border:"2px solid #56ffff88",
|
||
|
|
color: "white",
|
||
|
|
position: 'fixed',
|
||
|
|
},
|
||
|
|
btn: h("div", null, [
|
||
|
|
btnAText == "" ? null : h(
|
||
|
|
Button,
|
||
|
|
{
|
||
|
|
type: "primary",
|
||
|
|
size: "small",
|
||
|
|
danger: true,
|
||
|
|
onClick: btnAEvent,
|
||
|
|
},
|
||
|
|
btnAText
|
||
|
|
),
|
||
|
|
btnBText == "" ? null : h(
|
||
|
|
Button,
|
||
|
|
{
|
||
|
|
type: "primary",
|
||
|
|
size: "small",
|
||
|
|
style: {
|
||
|
|
marginLeft: "7px",
|
||
|
|
},
|
||
|
|
danger: true,
|
||
|
|
onClick: btnBEvent,
|
||
|
|
},
|
||
|
|
btnBText
|
||
|
|
),
|
||
|
|
]),
|
||
|
|
closeIcon: h(CloseSquareTwoTone, {
|
||
|
|
style: {
|
||
|
|
display:"none"
|
||
|
|
},
|
||
|
|
}) ,
|
||
|
|
onClose: () => {
|
||
|
|
notification.close(key);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|