vue中对element的弹框messagebox的二次封装

Posted llff123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中对element的弹框messagebox的二次封装相关的知识,希望对你有一定的参考价值。

在vue中对确认框的二次封装

使用场景:在页面中做某些需要警告的操作时的弹框提示

技术图片
1、在utils文件夹下新建一个confirm.js文件来对messageBox的封装,内容如下:

/** confirm.js */
import  MessageBox  from 'element-ui'

export function handleCofirm(text = '确定执行此操作吗?', type = 'warning') 
  return MessageBox.confirm(text, '提示', 
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: type,
    center: true
  )

2、使用

import  handleCofirm  from '@/utils/confirm'
export default 
    deleteDomain(row) 
      handleCofirm('确认删除该标签吗?', 'warning',).then(res => 
         // 
      ).catch(err => 
        console.log('err', err) // cancel
        // 
      )
    
  

以上是关于vue中对element的弹框messagebox的二次封装的主要内容,如果未能解决你的问题,请参考以下文章

element-ui MessageBox 弹框,我只想要弹出样式,不想要点击,当做一个弹出提醒,两秒后自动关闭

Vue使用directive指令实现Element中Dialog等弹框组件的移动与缩放

Element-Ui组件 MessageBox 弹框

vue3关闭弹框校验还在element

vue+element table的弹窗组件

element弹框出现多个model层