element中的$confirm的使用

2024-07-30 10:30:24

可以诸如此类的封装一下

/*
 * 公用提示窗
 * @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 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="https://u
element中的$confirm的使用

可以诸如此类的封装一下 /* * 公用提示窗 * @export * @param {string}[desc="确认操作"]弹框提示文字 * @param {string}[title="提示"]弹框标题 * @param{string}[confirmButtonName ='确认']确认按钮文字 * @param {string}[cancelButtonName="取消"] 取消按钮文字 * @param{boolean}[disting
Vue 解决在element中使用$notify在提示信息中换行问题

在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式
vue element插件this.$confirm用法及说明(取消也可以发请求)

目录 element插件this.$confirm用法场景:弹出框的两个按钮都能分别请求接口 vue项目如何使用this.$confirm element插件this.$confirm用法场景:弹出框的两个按钮都能分别请求接口最简单的弹出框就是“确定”“取消”,一般用户点击确定才会继续接下来的动作,点击取消则不做任何动作(即不会请求接口). 如: <template> <el-button type="text" @click="open"
jQuery ajax中使用confirm,确认是否删除的简单实例

jQuery ajax 中使用confirm ,确认是否删除按钮 onclick="return confirm('确认删除?');" <script type="text/javascript"> $(function(){ $("#btnDelete").click(function(){ //var user8ID = $.trim( $('#user8ID').val() ); var statu = confirm(&quo
重写javascript中window.confirm的行为

javascript中window.confirm这个方法很好用,可以弹出一个确认对话框我们之所以弹出这个对话框,可能就是因为该操作很危险,所以要用户确认.但如果默认选择"确定",则可能违背了这个原则. 另外,confirm对话框的按钮都是固定在"确定"和"取消"这两个.可能有些时候也不是很直观. 所以,可以考虑用vbscript中的msgbox来改写这个行为.下面是一个范例复制代码代码如下: <%@ Page Language=&qu
浅谈Vue Element中Select下拉框选取值的问题

之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="
vue element中axios下载文件（后端Python）

•axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c
Element中的Cascader（级联列表）动态加载省\市\区数据的方法

element中的cascader其实是有动态加载次级选项的方法. 方法的原理是利用址(引用)传递,动态修改:options. var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: "tom"} http://element-cn.eleme.io/#/zh-CN/component/cascader#dong-tai-jia-zai-ci-ji-xuan-xiang 其中找到究竟需要在那层添加数据就变成
element 中 el-menu 组件的无限极循环思路代码详解

实现思路主要组件嵌套(组件自己调用自己) 下面是组件所需要的数据 { "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587610158, &q
element中el-container容器与div布局区分详解

用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-aside:侧边栏容器. el-main:主要区域容器. el-footer:底栏容器. 以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.eleme.io/#/zh-CN/component/container 此外,el-container 的子元

element中的$confirm的使用

相关推荐

随机推荐