vue+element-ui的弹框

<el-dialog
    :visible.sync="deleteConfirm"
    width="400px"
    :showClose="false" //是否关闭显示按钮
    v-dialogDrag
    >
    <div slot="title" class="dialog-title">系统提示
      <span class="dialog-icon">
          <i class="el-icon-close" @click="closeDeleteDialog"></i>
      </span>
    </div>
    <i class="el-icon-warning"
      style="font-size: 1.5rem; color:#E6A23D; margin-right: 0.8rem"
    ></i>
    <span>删除操作不可恢复，您确定要删除吗？</span>
    <span slot="footer" class="delete-footer">
      <el-button class="cancel-btn" @click="closeDeleteDialog">关 闭</el-button>
      <el-button class="confirm-btn" @click="deleteBtn">确 定</el-button>
    </span>
   </el-dialog>

Attributes

• visible 是否显示 Dialog，支持 .sync 修饰符

---

• title Dialog 的标题，也可通过具名 slot （见下表）传入

---

• width Dialog 的宽度

---

• fullscreen 是否为全屏 Dialog

---

• top Dialog CSS 中的 margin-top 值

---

• modal 是否需要遮罩层

---

• modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上

---

• append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

---

• lock-scroll 是否在 Dialog 出现时将 body 滚动锁定

---

• custom-class Dialog 的自定义类名

---

• close-on-click-modal 是否可以通过点击 modal 关闭 Dialog

---

• close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog

---

• show-close 是否显示关闭按钮

---

• before-close 关闭前的回调，会暂停 Dialog 的关闭

---

• center 是否对头部和底部采用居中布局

---

• destroy-on-close 关闭时销毁 Dialog 中的元素

---

Events

• open Dialog 打开的回调

---

• opened Dialog 打开动画结束时的回调

---

• close Dialog 关闭的回调

---

• closed Dialog 关闭动画结束时的回调

---