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 打印页面代码
Mar 24 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
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
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
Python中itertools模块用法详解
2014/09/25 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
书香校园活动方案
2014/02/28 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
企业员工薪酬方案
2014/06/04 职场文书
校园标语大全
2014/06/19 职场文书
经营理念口号
2014/06/21 职场文书
护士求职信
2014/07/05 职场文书
电子商务专业求职信
2014/07/10 职场文书
单位工作证明范文
2014/09/14 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
政府会议通知范文
2015/04/15 职场文书
建国大业电影观后感
2015/06/01 职场文书