公用的弹框

2019-05-20  本文已影响0人  蜗牛和曼巴
<template>
  <div class="dialog">
    <!-- 弹框 -->
    <!-- :title="textMap"弹框 -->
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      :before-close="handleCloseBindWarnStandard"
      :title="title"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" type="danger">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
    <!-- 删除的弹框 -->
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogDelete"
      :before-close="handleCloseBindWarnStandardDelete"
      :title="DeleteTitle"
    >
      <h2>您确定删除吗?</h2>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelDelete" type="danger">取消</el-button>
        <el-button type="primary" @click="handleConfirmDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import elDragDialog from "@/directive/el-drag-dialog";
  export default {
    directives: { elDragDialog },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false
      },
      // 删除的弹框
      dialogDelete: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ""
      },
      // 删除的弹框标题
      DeleteTitle: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        // dialogStatus: ""
      };
    },
    watch: {},
    methods: {
      // 点击弹框下的取消
      handleCancel() {
        this.$emit("getCancel");
      },
      // 点击弹框下的确定
      handleConfirm() {
        this.$emit("getConfirm");
      },
      //关闭弹窗,不可以删这个方法。不用这个方法点击遮罩层关闭会报错
      handleCloseBindWarnStandard() {
        this.$emit("closeBindWarnStandard");
      },
      // 删除按钮弹窗点击弹框下的取消
      handleCancelDelete() {
        this.$emit("getCancelDelete");
      },
      // 删除按钮弹窗点击弹框下的确定
      handleConfirmDelete() {
        this.$emit("getConfirmDelete");
      },
      //删除按钮关闭弹窗,不可以删这个方法。不用这个方法点击遮罩层关闭会报错
      handleCloseBindWarnStandardDelete() {
        this.$emit("closeBindWarnStandardDelete");
      }
    }
  };
</script>
上一篇下一篇

猜你喜欢

热点阅读