搬运工为下次搬运做记录!!!
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>