美文网首页
公用的弹框

公用的弹框

作者: 蜗牛和曼巴 | 来源:发表于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>

相关文章

  • 公用的弹框

  • 开发

    格式 编辑弹框 删除弹框

  • demo1 动态显示view或弹框 动态隐藏view或弹框

    有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框...

  • Appium通过相对坐标关闭弹框

    问题:获取不到弹框元素,想点击【不,谢谢】关闭弹框,弹框如下: 解决方法:通过相对坐标关闭弹框。方法如下: 1、获...

  • Swift基础之弹框的应用

    弹框有很多中样式,比如系统的中间弹框,底部弹框还有第三方的MBProgressHuD弹框等等,在本篇文章中小编将带...

  • vue中禁止遮罩底层页面滑动

    方法一:在点击事件(弹出弹框)时,添加 在隐藏弹框时 方法二:在点击事件(弹出弹框)时,添加 在隐藏弹框方法中,添加

  • 简单的文字弹框

    类似系统的弹框,只需一段代码即可调用弹框,还可以修改弹框的样式等 下载

  • react native 弹框设计,兼容IOS和Android

    1.实现的效果 - 点击按钮,出现弹框,最好有动画; - 点击弹框周围,弹框消失; - 点击Android返回键,...

  • iOS常用弹框

    1、系统弹框-底部弹框 UIActionSheet 1、用法 2、举例 如图1:图1.png 2、系统弹框-中间...

  • Android弹框窗口背景透明

    要实现版本更新功能,弹框效果如下 这个时候要让弹框窗口为透明色才能实现,弹框类如下 弹框布局如下 使用方法 参考文...

网友评论

      本文标题:公用的弹框

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