element中的$confirm的使用


Posted in Javascript onApril 26, 2020

可以诸如此类的封装一下

/*
 * 公用提示窗
 * @export
 * @param {string}[desc="确认操作"]弹框提示文字
 * @param {string}[title="提示"]弹框标题
 * @param{string}[confirmButtonName ='确认']确认按钮文字
 * @param {string}[cancelButtonName="取消"] 取消按钮文字
 * @param{boolean}[distinguishCancelAndClose = false]关系和取消是否执行同一方法
 *@return
 *
 */
export function confirm (desc = '确认操作', title = '提示', confirmButtonName = '确认', cancelButtonName = '取消', distinguishCancelAndClose = false) {
 return this.$confirm(desc, title, {
  confirmButtonName: confirmButtonName,
  cancelButtonName: cancelButtonName,
  distinguishCancelAndClose: distinguishCancelAndClose,
  closeOnClickModel: false,
  type: 'warning',
  center: true
 })
}
xxx//vue
submitSome(){
  try(){
    async utils.confirm.call(this,"确认要删除吗")
    const formData = {
      'id':this.id
    }
    let res = await this.$post('/sss',formData)
    if(res.code===1){
     //do something
    }
  }catch(e){
   console.log(e)
   // 如果需要关闭和取消有所区别
   if(e==='close'){
    //do something
   }else if(e==='cancel'){
    //do something
   }
  }
}

this.$confirm确定框内容换行显示

// 把写的提示信心需要换行的地方分成数组 confirmText 
const confirmText = ['是否将此项移除?', '注意:移除后不可恢复。'] 
const newDatas = [] 
const h = this.$createElement 
for (const i in confirmText) { 
   newDatas.push(h('p', null, confirmText[i])) 
} 
 this.$confirm( 
   '提示', 
   { 
     title: '提示', 
     message: h('div', null, newDatas), 
     showCancelButton: true, 
     confirmButtonText: '确定', 
     cancelButtonText: '取消', 
     type: 'warning' 
   } ).then(() => { })

到此这篇关于element中的$confirm的使用的文章就介绍到这了,更多相关element $confirm 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
JavaScript监听一个DOM元素大小变化
Apr 26 #Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 #Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 #Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 #Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 #Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 #Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 #Javascript
You might like
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php基础教程
2015/08/26 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
安全保证书范文
2014/04/29 职场文书
国际贸易系求职信
2014/08/09 职场文书
师德师风的心得体会
2014/09/02 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书