MessageBox 弹框 全局方法$msgbox, $alert, $confirm 和 $prompt常用代码片段

简介: MessageBox 弹框 全局方法$msgbox, $alert, $confirm 和 $prompt常用代码片段


$msgbox

this.$message(`开发中,敬请期待…`);
 
this.$message.success(`成功消息`);
 
this.$message.error(`错误消息`);
 
this.$message.warning(`警告消息`);
 
this.$message({
    dangerouslyUseHTMLString: true,
    message:`<b>支持HTML</b>`,,
})

$alert

this.$alert(`开发中,敬请期待…`);
 
this.$alert(`开发中,敬请期待…`, `标题名称`, {
  dangerouslyUseHTMLString: true,
  closeOnPressEscape: true,
  closeOnClickModal: true,
  confirmButtonText: `我知道了`,
});
 
this.$alert(`开发中,敬请期待…`, `提示`, {
  dangerouslyUseHTMLString: true,
  confirmButtonText: `我知道了`,
}).then(() => {
  this.$message.success(`我真的知道了`);
});

$confirm

this.$confirm(
    `此操作将永久删除此数据,是否继续?`,
    `提示`,
{
    dangerouslyUseHTMLString: true,
    confirmButtonText: `确定`,
    cancelButtonText: `取消`,
    type: "warning"
}). then(()=> {
 
    //this.$message.success(`删除成功`);
 
}).catch(()=> {
 
    //this.$message(`已取消删除`);
    
});

$prompt

this.$prompt(``, `输入文件名`, {
  closeOnClickModal: false, //是否可通过点击遮罩关闭 MessageBox
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  inputPlaceholder: `请输入文件名`, //输入框的占位符
  inputValue: `新建文件夹`, //输入框的初始文本
  inputValidator: (value) => {
    if (value.trim() === ``) return `请输入内容`;
    let maxLength = 20;
    if (value.length > maxLength) return `长度不能超过${maxLength}`;
  },
  beforeClose: (action, instance, done) => {
    let loading = () => (
      (instance.confirmButtonLoading = true),
      (instance.confirmButtonText = `创建中...`)
    );
    let close = () => (done(), (instance.confirmButtonLoading = false));
    if (action !== `confirm`) return close();
    let value = instance.inputValue.trim(); //获取输入的内容
 
    loading();
    // 调用接口API
    setTimeout(() => {
      close();
      console.log(`输入的内容是:`, value);
    }, 1000);
  },
});


相关文章
|
前端开发 JavaScript
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
1821 0
|
4月前
|
资源调度 JavaScript iOS开发
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
这篇文章介绍了一个基于Vue 2.x开发的移动端网页弹窗插件`wc-messagebox`,支持Alert、Confirm、Toast和Loading功能,并且提供了如何安装、配置和使用这些弹窗功能的详细说明。
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
|
4月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
5月前
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
217 3
|
5月前
|
JavaScript
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
100 0
|
7月前
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
676 0
|
7月前
|
移动开发 JavaScript 小程序
uView Alert 警告提示
uView Alert 警告提示
83 0
|
7月前
|
前端开发 JavaScript
不使用alert弹窗,显示提示信息
不使用alert弹窗,显示提示信息
|
JavaScript 前端开发 Python
【PyAutoGUI操作指南】04 消息框功能+Question+Waring+Critical+自定义消息框
【PyAutoGUI操作指南】04 消息框功能+Question+Waring+Critical+自定义消息框
181 0
|
JavaScript 前端开发
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)