Q-Dialog 弹窗

基础用法

提示

1.append-to-body 必须加上

2.Element.Dialog.props.closeOnClickModal.default = false main.js全局禁止dialog点击遮罩层关闭

3.Dialog支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

<template>
  <el-button @click="visible = true">打开弹窗</el-button>
  <Q-Dialog :visible.sync="visible" title="提示" :fullscreen="true" append-to-body></Q-Dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      }
    },
    methods: {
      open() {
        this.visible = true
      },
      close() {
        this.visible = false
      }
    }
  }
</script>
<style>
  /**
   * ::v-deep
   */
  .el-dialog__header {
    padding: 15px 20px 10px;
  }

  .el-dialog__title {
    color: white;
  }

  .el-dialog__header {
    background: #409EFF;
    border-radius: 10px 10px 0 0 !important;
  }

  .el-dialog__headerbtn {
    color: white;
    position: absolute;
    top: 15px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 22px;


    i {
      color: white !important;

      &:hover {
        color: white !important;
      }
    }
  }

</style>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
height	高度	String / Number	—	600px
temp	去除高度	Number	—	144
fullscreen	全屏	Boolean	true / false	false

Slots

属性名	说明
title	标题插槽
footer	尾部插槽

Styles

设置 Dialog 头部样式

<style scoped lang="scss">

  ::v-deep .el-dialog__header {
    // 设置头部内边距
    padding: 15px 20px 10px;
    // 设置背景颜色
    background: #409EFF;
    // 设置圆角
    border-radius: 10px 10px 0 0 !important;
  }

  // 设置标题颜色
  ::v-deep .el-dialog__title {
    color: white;
  }

  // 设置关闭按钮
  ::v-deep .el-dialog__headerbtn {
    color: white;
    position: absolute;
    top: 15px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 22px;

    // 改颜色
    i {
      color: white !important;

      &:hover {
        color: white !important;
      }
    }
  }
</style>