soc_web/src/components/btnTip/index.vue

<template>
  <div class="btn-tip">
    <el-popover ref="popover" placement="top" :width="popoverWidth" v-model="visible">
      <p>{{tip}}</p>
      <div style="text-align: right; margin: 0">
        <el-button :size="size" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="onConfirm">确定</el-button>
      </div>
    </el-popover>
    <el-button
      class="w-full"
      :disabled="disabled"
      :type="type"
      :size="size"
      v-bind="$attrs"
      v-popover:popover
      @click.stop
    >
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  props: {
    type: {
      default: "danger"
    },
    size: {
      default: ""
    },
    tip: {
      default: "确定要删除数据吗?"
    },
    disabled: {
      default: false
    },
    popoverWidth: {
      default: 160
    }
  },
  methods: {
    onConfirm() {
      this.visible = false;
      this.$emit("click");
    }
  }
};
</script>

<style lang="scss" >
.btn-tip {
  display: inline-block;
}
.el-button + .btn-tip {
  margin-left: 10px;
}
.btn-tip + .el-button {
  margin-left: 10px;
}
.btn-tip + .btn-tip {
  margin-left: 10px;
}
</style>