Before reading this, please read the previous article juejin.cn/post/691647…

In the previous article, we rewrapped the EL-Button with a simple autoLoading property to get the PL-Button component. In this article, we continue to enrich the PL-Button component. Similar to automatic loading, we often need to confirm the second time when clicking the button. For example, when clicking the delete button, we need to use the messageBox component to confirm the second time

 this.$confirm('This operation will permanently delete the file. Do you want to continue? '.'tip', {
          confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
        }).then(() = > {
          this.$message({
            type: 'success'.message: 'Deleted successfully! '
          });
        }).catch(() = > {
          this.$message({
            type: 'info'.message: 'Cancelled delete'
          });          
        });
Copy the code

The above code, this scenario is very many, although it is only a confirmation, but every place to write, it is troublesome, too much repeated code, if you can click button to automatically confirm the second time, the user can click the second time to confirm the business components to deal with much more convenient. In the previous article, we wrote some code for loading after clicking the button, and then emitted the click event. We can do the same here.

<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 = 'This operation will permanently delete this data. Do you want to continue? ',
        title = 'tip',
        confirmButtonText = 'sure',
        cancelButtonText = 'cancel',
        type = 'warning'
      } = this.confirmConfig
      this.$confirm(message, title, {
        confirmButtonText,
        cancelButtonText,
        type
      })
        .then(() = > {
          this.$emit('confirm')
        })
        .catch(() = > {
          this.$emit('cancel')})}else{
      this.$emit('click')}}}}</script>
Copy the code

In the code above, we define an autoConfirm props property. If this property is true, then after clicking the button, This.$message.confirm is automatically called for a second confirmation, which emit(‘confirm’) events for the business component to call. The usage method is as follows:

<template>
<pl-button  auto-confirm  @confirm="handleConfirm">Click auto double confirm</pl-button>
</template>
<script>
export default{
 methods: {handleConfirm(){
     // This is executed after the second confirmation}}}</script>
Copy the code

The above code is very simple, we just need to pass the auto-confirm attribute, the component can automatically confirm the second time, after the second confirmation using confirm event can execute the second confirmation event, this small example, but can solve a lot of our repeated code problems, it is very convenient to use.

Limited to nuggets can not be easily displayed, you can view this document to see the effect www.noob6.com/pl-element/…

The source address

Article series address:

Element UI Secondary Packaging Series – Button (1)

Element UI Secondary Packaging Series – Button (2)

Element UI Secondary Packaging Series – Button (3)

Element – UI Secondary Package Series – Button (4)(VUE3 version)