vue+element ui中dialog 使用知识点记录_vue elementui dialog

搬运工为下次搬运做记录！！！

1、给dialog增加class

<el-dialog

        custom-class="customDialog"

></el-dialog>

2、动态改变dialog宽度

this.$nextTick(() => {

    let dialogBox = document.getElementsByClassName('customDialog')

    for (let i = 0; i < dialogBox.length; i++) {

      dialogBox[i].style.width = '680px';

    }

  })

3、改变弹框进入时动画

.dialog-fade-enter-active .el-dialog.customDialog{

    animation: anim-open ease-in .3s;

  }

  @keyframes anim-open{0%{opacity:0;transform:scale(0.5,1);transform-origin: left top;}to{opacity:1;transform:scale(1,1);transform-origin: left top;}}

4、再次封装弹框

父组件调用

<my-dialog :visible.sync="openFlag">
   <FormItem/>
</my-dialog>
//再次编辑的弹框组件
import MyDialog from './components/myDialog.vue'
import FormItem from './components/formItem.vue'
export default {
    data() {
        return {
          // 是否显示弹出层
          openFlag: false
        }
    }
}

子组件-弹框组件（MyDialog ）

靠右边的弹框

<template>
  <div>
    <el-dialog
      width="100%"
      :visible.sync="visible"
      class="my-dialog"
      destroy-on-close
      @close="myClose"
      :show-close="false">
      <slot></slot>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name: 'myDialog',
  components: {
 
  },
  props: {
    visible:{
      type: Boolean,
      default: false
    }
 
  },
  methods: {
    myClose(){
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-dialog{
  margin-left:70%;
}
::v-deep .el-dialog{
  margin-top: 0 !important;
  max-height: calc(100%);
  max-width: calc(100%);
  .el-dialog__header{display:none;}
  .el-dialog__body{padding:0 5%;}
}
</style>