美文网首页
vue中对element的弹框messagebox的二次封装

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

作者: 理想休想幻想 | 来源:发表于2019-04-03 17:39 被阅读0次

    在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、使用
    <script>
    import { handleCofirm } from '@/utils/confirm'
    export default {
      name: 'AppDomain',
      // 删除域名
        deleteDomain(row) {
          handleCofirm('确认删除该域名吗?', 'warning', 'success').then(res => {
             // do something
          }).catch(err => {
            console.log('err', err) // cancel
            // do something
          })
        }
      
    }
    

    相关文章

      网友评论

          本文标题:vue中对element的弹框messagebox的二次封装

          本文链接:https://www.haomeiwen.com/subject/xygzbqtx.html