element-ui 二次封装系列- button(二)

最新推荐文章于 2024-07-29 15:16:05 发布

勇PAN高峰

最新推荐文章于 2024-07-29 15:16:05 发布

阅读量766

点赞数

分类专栏： vue JavaScript 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/sky2714/article/details/112495134

版权

本文介绍了如何在Vue.js中基于Element UI的Button组件进行二次封装，实现点击按钮后的自动确认功能。通过设置`autoConfirm`属性，当属性为true时，点击按钮会触发$messge.confirm，二次确认后emit 'confirm'事件，减少重复代码，提高代码复用性。

摘要由CSDN通过智能技术生成

看此篇前,请阅读上一篇https://blog.csdn.net/sky2714/article/details/112494719

在上一篇中, 我们用一个简单的 autoLoading属性 二次封装了el-button得到了pl-button组件,本篇中,我们继续丰富pl-button组件.
和自动loading相似,我们经常会有点击按钮需要弹窗二次确认的情况,如:点击删除按钮时,我们需要使用messageBox组件进行二次确认

 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
   
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
   
          this.$message({
   
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() =>