公用alert组件

引入

通过以下方式来全局注册组件，更多注册方式请参考Vue3-Base说明。

const app = createApp()

const [PopDialog] = await VueBase.require(["nie.vue3.popdialog"]);
app.use(PopDialog, {
  // theme: "", // 默认主题
});

// PopDialog.config({ theme: "" }); // 修改主题

app.mount("#app");

代码演示

PopDialog.config({theme: "red"});  //设置全局主题
PopDialog.Close();  //关闭弹窗

/*****************************Promise*****************************/
const result = await PopDialog.Confirm('我是Confirm');
if (result) {
    console.log("confirm");
} else {
    console.log("cancel");
}

PopDialog.Prompt({
    msg:"请输入您的名字：",
    placeholder: "请在此输入您的姓名",
    theme: "yellow",
}).then((result) => {
    if (result !== null) {
        console.log("confirm", result);
    } else {
        console.log("cancel", result);
    }
})

/*****************************快速调用*****************************/
PopDialog.Alert('我是Alert');  //Alert弹窗
PopDialog.Confirm('我是Confirm',function(result){ //Confirm弹窗
    console.log(result);
});
PopDialog.Prompt('欢迎？','请输入您的名字',function(result){ //Prompt弹窗
    console.log(result);
});

/*****************************多参数调用*****************************/
//PopDialog.Alert/PopDialog.Confirm多参数调用同理
PopDialog.Prompt({
    msg:"请输入您的名字：",
    placeholder: "请在此输入您的姓名",
    theme: "yellow",
    confirmCallback: function(result){
        console.log(result);
    },
    cancleCallback: function(result){
        console.log(result);
    }
});

Props

参数	说明	类型	默认值
msg	弹窗文案,文案可加样式key(重点)/tips(警告)	string	-
theme	组件颜色主题，默认蓝色	"blue" | "green" | "skyblue" | "yellow" | "red"	-
placeholder	Prompt弹窗输入框提示文案	string	-
confirmTxt	确定按钮的文案，默认值	string	"确 定"
cancleTxt	取消按钮的文案	string	"取 消"
confirmCallback	确定回调函数	(result: boolean | string | null) => void	-
cancleCallback	取消回调函数	(result: boolean | string | null) => void	-

全局方法

如果全局注册组件方式，那么会有一个全局对象$PopDialog，它的调用方式为：this.$PopDialog.xxx。

名称	说明	参数	返回值
config	设置全局主题	params?: { theme?: Theme }	void
Close	关闭弹窗	-	void
Alert	Alert弹窗	params: string | options	Promise<boolean | string | null>
Confirm	Confirm弹窗	params: string | options, callback?: Callback	Promise<boolean | string | null>
Prompt	Prompt弹窗	params: string | options, placeholder?: string, callback?: Callback	Promise<boolean | string | null>