teachcloud-print-web/card/components/common/PopoverButton.vue

<template>
  <el-popover
    class="popover-button"
    placement="top"
    width="240"
    v-model="visible"
  >
    <p><i class="el-icon-info color-warning"></i> {{ confirmText }}</p>
    <br />
    <div style="text-align: right; margin: 0">
      <el-button size="mini" @click="visible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="confirm">确定</el-button>
    </div>
    <el-button
      class="btn--danger font-bold"
      type="text"
      icon="el-icon-delete"
      slot="reference"
      >{{ btnName }}</el-button
    >
  </el-popover>
</template>

<script>
export default {
  name: "popover-button",
  props: {
    confirmText: {
      type: String,
      default: "你确定要删除当前记录吗？"
    },
    btnName: {
      type: String,
      default: "删除"
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    confirm() {
      this.visible = false;
      this.$emit("confirm");
    }
  }
};
</script>