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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JavaScript 判断浏览器是否是IE
Feb 19 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
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
Vue按需加载的具体实现
2017/12/02 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python绘制规则网络图形实例
2019/12/09 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
活动志愿者自荐信
2014/01/27 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
A22国内电台短波广播频率表
2022/05/10 无线电
mysqldump进行数据备份详解
2022/07/15 MySQL