弹窗打开关闭时关闭默认的过渡动画效果:(需要全局修改。在scoped中用:deep()改不动)
<style>
.dialog-fade-enter-active {
animation: none !important;
}
.dialog-fade-leave-active {
animation: none !important;
}
</style>
效果图:
使用:
<template>
<div>
<LjButton @click="dialogVisible = true">打开弹出框</LjButton>
<div class="LjDialog">
<el-dialog
title=""
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
:modal="false"
width="55%"
:show-close="true"
>
hello 大家好
<div class="LjDialog-footer">
<slot name="footer">
<LjButton
style="margin: 0 10px"
type="danger"
@click="dialogVisible = false"
>取 消</LjButton
>
<LjButton type="primary" @click="dialogVisible = false"
>确 定</LjButton
>
</slot>
</div>
</el-dialog>
</div>
</template>
<script>
import LjButton from "@/components/LjButton/index.vue";
export default {
name: "",
components: {
LjButton
},
props: {},
data() {
return {
dialogVisible: false
};
},
computed: {},
created() {},
mounted() {},
filters: {},
methods: {},
watch: {},
};
</script>
<style lang="scss" scoped>
.LjDialog {
::v-deep .el-dialog {
background-color: #091f2cee;
border: 1px solid rgb(13, 210, 236);
.el-dialog__title {
color: white;
caret-color: transparent;
}
.el-icon-close {
color: white;
&:hover {
color: rgb(9, 205, 219);
}
}
.el-dialog__body {
color: white;
font-size: 18px;
}
.LjDialog-footer {
text-align: right;
margin: 30px 0 0 0;
}
}
}
</style>