实现一个二次点击按钮

前端表格多是一些增删改查，但是删也是其中一项，当我们点击删除的时候，会弹出一个选择框会提示我们确认要删除吗？ 这是很正常的一个功能，我们不可能说 ，点击删除，然后就删除了 ，万一点错了那。今天就封装一个小的二次点击功能。

<template>
  <el-button  v-bind="$attrs" @click="handleClick">
    <slot />
  </el-button>
</template>
<script>
export default {
  name: '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')
          })
      }
    }
  }
}
</script>

使用

先引入组件 然后注册 就可以使用了
看传入 参数 autoConfirm true 就可以打开弹框 如果要修改弹框里面的内容 就自己定义 confirmConfig 为一个 对象可以传入自己想要修改的名字

<newbutton autoConfirm @confirm='btnclick'>二次点击按钮</newbutton>

然后在下面的事件里面定义这个方法，使用。
还是比较简单的，嘿嘿，太菜了。