<!-- :style="modabg ? 'background:unset; position: absolute;' : ''"-->
|
<template>
|
<div id="deta-modal">
|
<!-- <draggable element="ul" v-model="list"> -->
|
<div class="box-modal borderR8"
|
:style="modalStyle">
|
<div class="title-modal">
|
<p class="p-title">
|
<slot name="title"></slot>
|
</p>
|
<i class="el-icon-close pointer fontSize1_2"
|
@click="$emit('cancel')"></i>
|
</div>
|
<div class="centent-modal">
|
<!-- <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%"> -->
|
<slot name="centent"></slot>
|
<!-- </el-scrollbar> -->
|
</div>
|
</div>
|
<!-- </draggable> -->
|
</div>
|
</template>
|
|
<script>
|
import { number } from 'echarts';
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
import draggable from 'vuedraggable';
|
export default {
|
data () {
|
//这里存放数据
|
return {
|
ismodal: false,
|
list: [{ name: '1' }]
|
};
|
},
|
props: {
|
modabg: {
|
type: Boolean,
|
default: false
|
},
|
modalStyle: {
|
type: Object,
|
default: {
|
width: '45%' //设置默认的宽度,原先是 40% 【EditBy shaocx,2022-11-10】
|
}
|
}
|
},
|
components: { draggable },
|
//方法集合
|
methods: {
|
cancel () {
|
this.$emit('cancel');
|
}
|
},
|
//监控data中的数据变化
|
watch: {},
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
activated () { }
|
};
|
</script>
|
<style lang="scss" scoped>
|
#deta-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.3);
|
// transition: all 0.3s;
|
z-index: 999;
|
.box-modal {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 40%;
|
height: 85%;
|
border-radius: 6px;
|
transform: translate(-50%, -50%);
|
background: #fff;
|
box-shadow: 0 0 4px #345;
|
// transition: all 0.5s;
|
overflow: hidden;
|
.title-modal {
|
padding: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #e6eaf1;
|
background: #f5f7fa;
|
.p-title {
|
font-size: 20px;
|
padding-left: 5px;
|
}
|
.fontSize1_2 {
|
font-size: 20px;
|
margin-right: 15px;
|
&:hover {
|
transition: all 0.3s;
|
transform: rotate(360deg);
|
}
|
}
|
}
|
.centent-modal {
|
width: 98%;
|
height: calc(100% - 62px);
|
padding: 1%;
|
overflow: hidden;
|
}
|
}
|
// .el-scrollbar__view {
|
// height: 100%;
|
// }
|
}
|
</style>
|
