封装弹框alert、confirm、pop

weixin_48327393

于 2024-07-15 14:29:33 发布

阅读量132

点赞数 2

文章标签： javascript android 前端

本文链接：https://blog.csdn.net/weixin_48327393/article/details/140437890

版权

在utils中封装公共方法，在main.js中引入使用

const getAlert = (res, p, showButton, _this, callback, callback1) => {
  _this
    .$confirm(res, '提示', {
      confirmButtonText: '确定',
      showCancelButton: showButton,
      closeOnClickModal: false,
      showClose: false,
      type: p
    })
    .then((result) => {
      if (callback) {
        callback()
      }
    })
    .catch(() => {
      if (callback1) {
        callback1()
      }
    })
}

const getConfirm = (res, p, _this, callback) => {
  _this
    .$confirm(res, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      showClose: false,
      type: p
    })
    .then(() => {
      if (callback) {
        callback()
      }
    })
    .catch(() => {})
}

const multiPop = (msgArr, p, showButton, _this, callback, callback1) => {
  const newMsgArr = []
  const h = _this.$createElement
  for (const i in msgArr) {
    newMsgArr.push(h('p', null, msgArr[i]))
  }
  _this
    .$confirm('提示', {
      title: '提示',
      type: p,
      message: h('div', null, newMsgArr),
      showCancelButton: showButton,
      confirmButtonText: '确定',
      closeOnClickModal: false,
      showClose: false
    })
    .then(() => {
      if (callback) {
        callback()
      }
    })
    .catch(() => {
      if (callback1) {
        callback1()
      }
    })
}
export { getAlert, getConfirm, multiPop }

在mian.js中引入使用

import { getAlert, getConfirm, multiPop } from '@/utils/common'
Vue.prototype.$pop = getAlert
Vue.prototype.$popConfirm = getConfirm
Vue.prototype.$popMul = multiPop

vue中使用样式

return this.$alert(`保存成功！`, '提示', {
            confirmButtonText: '确定',
            type:"warning"
          });



return this.$pop('保存成功!', 'warning', false, this)




return this.$confirm('保存成功！', '提示', {
                  confirmButtonText: '确定',
                  showCancelButton: false,
                  type: 'warning'
                })