阅读 1045

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

看此篇前,请阅读上一篇juejin.cn/post/691647…

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

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

如上代码,这种场景是非常多的,虽然仅仅就是一个确认,但每处都写,实属麻烦,重复代码过多,如果能够点击button自动二次确认, 用户二次点击确认才交给业务组件处理就方便多了. 这时我们可以想到, 在上一篇中, 我们点击了按钮之后,自己写了一段操作loading的代码,然后再将click事件emit出去, 这里我们同样可以这样做.

<el-button
  v-bind="$attrs"
  @click="handleClick"
>
<slot/>
</el-button>
<script>
export default {
  name: 'pl-button',
  props: {
    autoConfirm: {
      type: Boolean,
      default: false
    },
    confirmConfig:{
      type:Object,
      default:()=>({})
    }
  },
  methods: {
    handleClick() {
      if (this.autoConfirm) {
        const {
        message = '此操作将永久删除该数据, 是否继续?',
        title = '提示',
        confirmButtonText = '确定',
        cancelButtonText = '取消',
        type = 'warning'
      } = this.confirmConfig
      this.$confirm(message, title, {
        confirmButtonText,
        cancelButtonText,
        type
      })
        .then(() => {
          this.$emit('confirm')
        })
        .catch(() => {
          this.$emit('cancel')
        })
      }else{
      this.$emit('click')
      }
    }
  }
}
</script>
复制代码

在上述代码中,我们定义了一个autoConfirm的props属性, 如果此属性为true,那么点击按钮之后, 会自动调用this.$message.confirm进行二次确认,二次确认后,会emit('confirm')事件供业务组件调用. 使用方法如下:

<template>
<pl-button  auto-confirm  @confirm="handleConfirm">点击自动二次确认</pl-button>
</template>
<script>
export default{
 methods:{
   handleConfirm(){
     // 这里是二次确认后执行
   }
 }
}
</script>
复制代码

上面的使用代码非常简单, 我们只需要传递 auto-confirm属性,组件就能自动二次确认了, 二次确认后 使用confirm事件就能执行二次确认的事件了,这个小例子,却能解决我们很多的重复代码问题,使用起来非常方便.

限于掘金不能方便的展示,你可以通过查看此文档查看效果www.noob6.com/pl-element/…

源码地址

系列文章地址:

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

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

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

element-ui 二次封装系列- button(四)(vue3版本)

文章分类
前端
文章标签