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 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
js全选按钮的实现方法
Nov 17 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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中操作Excel实例代码
2010/04/29 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php生成word并下载代码实例
2019/03/15 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
python与php实现分割文件代码
2017/03/06 Python
python简单实例训练(21~30)
2017/11/15 Python
PyQt5每天必学之组合框
2018/04/20 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
详解python播放音频的三种方法
2019/09/23 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python读取yaml文件的详细教程
2020/07/21 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
优秀员工推荐信
2014/05/10 职场文书
研究生求职自荐书
2014/06/23 职场文书
个人违纪检讨书
2014/09/15 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
总经理司机岗位职责
2015/04/10 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers