You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.7 KiB
88 lines
1.7 KiB
<template>
|
|
<transition name="opacity-fade">
|
|
<div
|
|
:style="{ 'background-color': backgroundColor, 'padding': padding+' 0', 'z-index': zIndex }"
|
|
class="c-view">
|
|
<el-card
|
|
v-loading="loading"
|
|
:style="{ 'width': width}"
|
|
:body-style="bodyStyle"
|
|
class="crm-create-card-container">
|
|
<slot name="header"/>
|
|
<slot/>
|
|
</el-card>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
<script type="text/javascript">
|
|
import {
|
|
PopupManager
|
|
} from 'element-ui/lib/utils/popup'
|
|
export default {
|
|
name: 'CreateView', // 所有新建效果的view
|
|
components: {},
|
|
props: {
|
|
bodyStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 更改背景颜色颜色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'transparent' // rgba(0, 0, 0, 0.6) 黑色半透明
|
|
},
|
|
/** 展示内容的宽 */
|
|
width: {
|
|
type: String,
|
|
default: '700px'
|
|
},
|
|
/** 展示内容的上下padding */
|
|
padding: {
|
|
type: String,
|
|
default: '40px'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
zIndex: this.getMaxIndex(),
|
|
loadingObj: null
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
mounted() {},
|
|
methods: {
|
|
getMaxIndex() {
|
|
return PopupManager.nextZIndex()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.opacity-fade-enter-active,
|
|
.opacity-fade-leave-active {
|
|
transition: all 0.2s;
|
|
}
|
|
.opacity-fade-enter,
|
|
.opacity-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
/** 容器布局 */
|
|
.c-view {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.crm-create-card-container {
|
|
margin: 100px auto;
|
|
/*height: 100%;*/
|
|
}
|
|
</style>
|
|
|