Dialog 弹窗

基于 El-Dialog (opens new window) 常用功能总结

基础用法

提示

调整内边距

 ::v-deep .el-dialog__body {
    padding: 0;
}

提示

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-button type="text" @click="(dialogVisible = true,fullscreen = true)">点击全屏Dialog</el-button>
<el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :fullscreen="fullscreen"
    width="30%"
    :before-close="handleClose">

  <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
  </el-dialog>

  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        innerVisible: false,
        fullscreen: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
      }
    }
  };
</script>

<style>
  /**
   * 设置居中 
   * lang="scss" scoped
   * ::v-deep
   *
    $height: 420px;
    ::v-deep .el-dialog {
        height: $height !important;
        margin-top: calc(50vh - #{$height / 2}) !important;
        border-radius: 10px !important;
    }
   *
   */
  .el-dialog {
    height: 400px !important;
    margin-top: calc(50vh - 200px) !important;
    border-radius: 10px !important;
  }
</style>

Expand Copy Copy

样式

固定高度，全局居中

提示

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :fullscreen="fullscreen"
    width="30%"
    :before-close="handleClose">

  <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
  </el-dialog>

  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        innerVisible: false,
        fullscreen: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
      }
    }
  };
</script>

<style>
  /**
   * 设置居中 
   * lang="scss" scoped
   * ::v-deep
   *
    $height: 420px;
    ::v-deep .el-dialog {
        height: $height !important;
        margin-top: calc(50vh - #{$height / 2}) !important;
        border-radius: 10px !important;
    }
   *
   */
  .el-dialog {
    height: 400px !important;
    margin-top: calc(50vh - 200px) !important;
    border-radius: 10px !important;
  }
</style>

Expand Copy Copy

内边距调整和自定义高度全屏

提示

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :fullscreen="fullscreen"
    width="30%"
    :before-close="handleClose">

  <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
  </el-dialog>

  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        innerVisible: false,
        fullscreen: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
      }
    }
  };
</script>

<style>
  /**
   * 设置边距 
   * lang="scss" scoped
   * ::v-deep
   *
   <style lang="scss" scoped >
    $height: 420px;
    ::v-deep .el-dialog {
        height: $height !important;
        margin-top: calc(50vh - #{$height / 2}) !important;
        border-radius: 10px !important;
    }
    
    ::v-deep .el-dialog__body {
       padding:0;
    }
   *
   */
  .el-dialog {
    height: 400px !important;
    margin-top: calc(50vh - 200px) !important;
    border-radius: 10px !important;
  }

  .el-dialog__body {
    padding: 0px;
  }

  /**
  *
  *非全部的全屏
   ::v-deep .el-dialog {
   height: 100vh;
   margin-top: 0vh !important; 
 }
   */

</style>

Expand Copy Copy