1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| <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 { getMaxIndex } from '@/utils/index'
|
| export default {
| name: 'CreateView', // 所有新建效果的view
| components: {},
| props: {
| bodyStyle: {
| type: Object,
| default: () => {
| return {}
| }
| },
| loading: {
| type: Boolean,
| default: false
| },
| // 更改背景颜色颜色
| backgroundColor: {
| type: String,
| default: '#F5F6F9' // rgba(0, 0, 0, 0.6) 黑色半透明
| },
| /** 展示内容的宽 */
| width: {
| type: String,
| default: '1046px'
| },
| /** 展示内容的上下padding */
| padding: {
| type: String,
| default: '40px'
| }
| },
| data () {
| return {
| zIndex: getMaxIndex(),
| loadingObj: null
| }
| },
| computed: {},
| watch: {},
| mounted () {},
| methods: {}
| }
| </script>
| <style lang="less" 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: 0 auto;
| height: 100%;
| }
| </style>
|
|
