美文网首页
公用的弹框

公用的弹框

作者: 蜗牛和曼巴 | 来源:发表于2019-05-20 16:09 被阅读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>
    

    相关文章

      网友评论

          本文标题:公用的弹框

          本文链接:https://www.haomeiwen.com/subject/uybiaqtx.html