Element弹框封装改造

·  阅读 262

记录一下自己常用的代码,偶尔拿出来看看,如有不对的地方或可以完善的地方可以及时提出意见,感谢观看!

做后台的时候经常会用到如下弹框组件(MessageBox): 1633275600(1).png

代码块(引用elementui代码):

<template>
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
    export default {
        methods: { 
            open() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning' 
              }).then(() => {
                this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
                this.$message({ 
                type: 'info',
                message: '已取消删除' 
              });
          });
       } 
     } 
   }
</script>
复制代码

以单个弹框的代码量来看,确实不算多,但假如每次执行保存、修改、删除等操作前都需要执行一次弹框,那么script里的无效代码量会增加(个人认为),所以我对这个组建进行了一次改造。

我们会用到MessageBox弹框以及Message消息提示, 所以我们创建完index.js文件后导入如下东西并且创建名为confirmBox方法:

import { Message, MessageBox } from 'element-ui'

export confirmBox(){

}

export default {
  confirmBox
}
复制代码

我们暂时抛开elementui给我们展示的案例,仅仅是作为参考。

封装步骤

1.将 MessgaeBox和Message引入并生成普通弹框(提示文字等都是死数据)

import { Message, MessageBox } from 'element-ui'

export confirmBox(){
     MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' 
      }).then(() => {
        Message({
          showClose: true,
          type: 'success',
          message: '删除成功'
       })
    }).catch((response) => {
        Message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
       })
    })
}
export default {
  confirmBox
}
复制代码

此时已改为文章头部的那样的提示框 已对MessageBoxMessage 对element给我们的参考代码进行改造

MessageBox.confirm等价于this.$confirm

Message等价于this.$message

2、提取出重要的文字,在外面引用的时候传进来

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error){
     MessageBox.confirm(tips, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: type
      }).then(() => {
        Message({
          showClose: true,
          type: 'success',
          message: success
       })
    }).catch((response) => {
        Message({
          showClose: true,
          type: 'info',
          message: error
       })
    })
}
export default {
  confirmBox
}
复制代码

3、这里提出一个疑问,弹框点击确定之后,何时会调用success的Message。只有在api调用成功之后才会调用success的Message。

所以我将api的方法以及参数都传进来,我不晓得这样做是会产生什么副作用或者说写法不好之类的,希望多多点评!!!

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error,fun,data,over){
     MessageBox.confirm(tips, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: type
      }).then(() => {
      // 调用api
      fun(data).then({
        Message({
          showClose: true,
          type: 'success',
          message: success
        })
        // over:api调用结束之后,刷新页面数据、跳转等的方法
        over()
      })
    }).catch((response) => {
        Message({
          showClose: true,
          type: 'info',
          message: error
       })
    })
}
export default {
  confirmBox
}
复制代码

4.根据不同需求仍可继续改造

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error,fun,data,over){
     MessageBox.confirm(tips, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: type
      }).then(() => {
      // 调用api
      fun(data).then({
        Message({
          showClose: true,
          type: 'success',
          message: success
        })
        // over:api调用结束之后,刷新页面数据、跳转等的方法
        over()
      }).catch(res=>{   //catch 以及 finish等依据个人需求添加
      }).finish(res=>{})
    }).catch((response) => {
        Message({
          showClose: true,
          type: 'info',
          message: error
       })
    })
}
export default {
  confirmBox
}
复制代码

结束语:欢迎各位大佬来点评,纠正我的错误。

分类:
前端
标签: