页面点击跳出弹窗部分
<el-button @click="kanbanOpen()" size="small">看板</el-button>
<kanBan ref="refKanBan" width="93%" height="90%">
//内容部分
<helmet-List />
</kanBan>
import kanban from './kanban.vue'
import helmet from './helmet.vue'
components: {
'kanBan':kanban,
'helmet-List':helmet,
},
kanbanOpen(){
// 点击调用子组件方法
this.$refs.refKanBan.open()
},
弹窗的封装
<template>
<transition name="el-fade-in-linear">
<div class="cover-popup" v-if="isShow" :style="{ 'z-index': boxZindex + Number(zIndex) }">
<div class="popup-list" :style="[{ width: width }, { height: height }]">
<!-- <div class="close-btn" @click="close" title="关闭"></div> -->
<div class="close" @click="close">
<!-- <el-icon :size="20">X</el-icon> -->
<!-- <i icon="el-icon-delete" style="font-size:30px;color:#fff"></i> -->
<i class="closeImg">X</i>
</div>
<!-- 弹窗头部 -->
<!-- <div class="popup-header">
<div class="popup-con">
<span class=" title">{{ title }}</span>
</div>
</div> -->
<!-- 主要内容区 -->
<div class="popup-content ">
<slot />
</div>
</div>
</div>
</transition>
</template>
<script setup>
export default{
name:'kanban',
props:{
width: {
type: String,
default: "80%",
},
height: {
type: String,
default: "60%",
},
title: {
//标题
type: String,
default: "标题",
},
zIndex: {
//层级 多个弹出层 需要累加层级
type: [String, Number],
default: 0,
},
},
data(){
return{
isShow:false,
boxZindex:100
}
},
methods:{
// 开启
open(){
this.isShow = true;
},
// 关闭
close(){
this.isShow = false;
this.$emit("close");
},
}
}
</script>
<style lang="scss" scoped>
.popup-content{
flex:1;
display: flex;
overflow: hidden;
}
.cover-popup {
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
position:fixed ;
width:100% ;
height:100% ;
// flex-center
display: flex;
justify-content: center;
align-items: center;
.popup-list {
// padding: 1.2rem 1.5rem 1.2rem;
// box-sizing: border-box;
background: url('../../../assets/kanbanImg/img_popup_border.png') no-repeat;
background-size: 100% 100%;
z-index: 99999;
// color: #fff;
// box-shadow: 0 0 20px 10px #0a648b;
padding: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
// padding: 20px 30px;
// background: #00204d;
// border: 1px solid #004ab2;
border-radius: 4px;
right: 0;
left: 0;
margin: 0 auto;
.close {
position: absolute;
right: -1.75rem;
top: -1.75rem;
color: #57dcfe;
cursor: pointer;
.closeImg{
background: url('../../../assets/kanbanImg/btn_close.png') no-repeat;
background-size: 100% 100%;
}
}
.close:hover {
color: #d94440;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
width: 2.75rem;
height: 1.875rem;
// background: url("../assets/images/btn_close.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.popup-header {
width: 100%;
// height: 46px;
margin-bottom: 10px;
background: linear-gradient(-270deg, #003580 11%, #002a66 99%);
.popup-con{
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}
.title {
position: relative;
font-size: 16px;
font-weight: bold;
&::after,
&::before {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
// width: 48px;
// height: 26px;
}
&::after {
display: inline-block;
background: #ff5700;
box-shadow: 0 0.125rem 0.25rem 0 #ff5700;
width: 0.25rem;
height: 0.875rem;
margin-left: 1.25rem;
line-height: 0.875rem;
// position: absolute;
// top: 16px;
// left: 660px;
left: -3.125rem;
// background: url("../assets/images/title_left.png");
}
&::before {
right: -3.75rem;
// background: url("../assets/images/title_right.png");
}
}
}
}
}
</style>
赠送一个实用小技巧!!!!!(放到最大盒子下)
&::-webkit-scrollbar {
width: 6px;
height: 4px;
background-color: rgb(0, 32, 77);
}/* 滚动槽 */
&::-webkit-scrollbar-track {
border-radius: 3px;
}/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #01a8ff;
cursor: pointer;
}