简单实现<el-dialog>二次封装

代码

<template>
  <el-dialog class="example-dialog" title="实例弹层" :visible="visible" @close="closeDialog" width="650px">
    <div class="example-dialog-conn"></div> 
  </el-dialog>
</template>

<script>
  export default {
    name: 'exampleDialog',
    props: {
      open: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      visible: {
        get() {
          return this.open
        },
        set(value) {
          this.$emit('update:open', value);
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      closeDialog() {
        this.visible = false;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example-dialog::v-deep {
    .el-dialog__body {
      padding: 5px 20px 20px;
      max-height: 750px;
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
    }
  }
</style>

// 使用示例
import { ExampleDialog } from '/path/to/exampleDialog.vue'
components: { ExampleDialog }
<ExampleDialog :open.sync="exampleDialogOpen"/>