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


目录
打赏
0
0
0
0
73
分享
相关文章
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
VS Code识别编辑规范,ESlint规则,VS Code保存去掉自动加分号、逗号、双引号
书写规范是非常重要的,除了统一,还要简洁。 1、VS Code识别编辑规范 在项目根目录新建.editorconfig文件,加入设置:
1082 0
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
1026 0
如何使用正则表达式来匹配特定格式的电话号码?
如何使用正则表达式来匹配特定格式的电话号码?
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
1726 0
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
2161 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问