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);
  },
});


相关文章
|
10月前
|
前端开发 JavaScript
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
1147 0
|
25天前
|
移动开发 JavaScript 小程序
uView Alert 警告提示
uView Alert 警告提示
19 0
|
4月前
|
前端开发 JavaScript
不使用alert弹窗,显示提示信息
不使用alert弹窗,显示提示信息
|
11月前
|
JavaScript
ElementUI this.$message is not a function 解决方法
ElementUI this.$message is not a function 解决方法
105 0
|
12月前
|
JavaScript 前端开发 Python
【PyAutoGUI操作指南】04 消息框功能+Question+Waring+Critical+自定义消息框
【PyAutoGUI操作指南】04 消息框功能+Question+Waring+Critical+自定义消息框
100 0
|
JavaScript 前端开发
|
JavaScript 前端开发
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)