el-Dialog 对话框 内容居中 底部栏固定

 <el-dialog

      :visible.sync="dialogVisible"

      :title="title"

      left

      class="dialogAdd"

      :before-close="handleClose"

      v-if="dialogVisible"

      :destroy-on-close="true"

    >

      <div class="addDialog">

        <el-form :model="addData" inline ref="verify" :rules="rules">

          <el-form-item label="类型名称" prop="typeName" style="width: 100%">

            <el-input

              v-model.trim="addData.typeName"

              placeholder="请输入"

              maxlength="10"

              show-word-limit

            >

            </el-input>

          </el-form-item>

          <el-form-item label="样式" prop="describeType" style="width: 100%">

            <el-radio-group v-model="addData.describeType" @input="testHandle">

              <el-radio label="2">文本</el-radio>

              <el-radio label="1">图片</el-radio>

            </el-radio-group>

          </el-form-item>

          <el-form-item

            label="图片"

            prop="photoUrl"

            v-if="addData.describeType == 1 ? true : false"

            key="photoUrl"

            style="width: 100%; height: 40%; margin: 10px 0 40px 0px"

            :limit="1"

          >

            <ImageUpload

              :limit="1"

              :fileSize="2"

              v-model="addData.photoUrl"

              :data="uploadData"

              @getFileList="getFileList"

            />

          </el-form-item>

          <el-form-item

            id="texe"

            label="详细描述:"

            style="width: 100%"

            prop="describes"

            v-else

            key="describes"

          >

            <UEditor

              v-model="addData.describes"

              :config="editorConfig"

              :EditorStyle="{ width: '100%' }"

              style="width: 100%"

              module="自然风貌"

              :required="true"

              @change="aa"

            />

          </el-form-item>

          <el-form-item label="排序值" prop="sort" style="width: 100%">

            <el-input

              v-model.number="addData.sort"

              placeholder="请输入"

              maxlength="8"

            >

            </el-input>

          </el-form-item>

        </el-form>

      </div>

      <div type="flex" slot="footer" class="dialog-footer">

        <el-button @click="cancel">取消</el-button>

        <el-button @click="affirm" type="primary">确定</el-button>

        <el-button @click="preview" type="primary">预览</el-button>

      </div>

    </el-dialog>

css部分

.dialogAdd {

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    height: 80%;

    ::v-deep .el-dialog {

      display: flex;

      flex-direction: column;

      margin: 0 !important;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      max-height: calc(100% - 30px);

      max-width: calc(100% - 30px);

    }

    ::v-deep .el-dialog .el-dialog__body {

      flex: 1;

      overflow: auto;

      padding-right: 80px;

    }

    ::v-deep .dialog-footer {

      width: 100%;

      height: 60px;

      padding-right: 3%;

      position: sticky !important;

      text-align: right;

      line-height: 60px;

      position: absolute;

      box-shadow: 0px -1px 5px 1px rgba(57, 66, 103, 0.15);

    }

    ::v-deep .el-dialog__footer {

      padding: 0;

    }

  }