第一步 在html中设置一个存放模态框的盒子mask
html样式
<div class="mask" v-show="shownav">
<div class="top" @click="shownav = false">X</div>
<jiugongge :bg="'transparent'" :color="'#fff'"></jiugongge>
<myHeader @showModel="showModel"></myHeader>
<!--myHeader是你封装的子组件 然后使用自定义事件接受子组件传递过来的值-->
</div>
<!--jiugongge是你封装的子组件 然后使用自定义属性父组件传值给子组件-->
<jiugongge :bg="'#fff'" :color="'#666'"></jiugongge>
css样式
.mask {
width: 100%;
height: 514px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
z-index: 99999;
.top {
color: #fff;
text-align: right;
font-size: 40px;
padding: 10px;
}
}
js逻辑
<script>
import myHeader from '@/components/myHeader'
import jiugongge from '@/components/Jiugongge.vue'
export default {
data() {
return {};
},
mounted() {},
methods: {
showModel(val) {
this.shownav = val
}},
components:{}
};
</<script>
子组件的代码
在components目录里面的jiugongge.vue中
html样式
给模态框加入动态样式来显示两个不同样式的模态框
<div class="nav" :style="{'backgroundColor':bg,'color':color}">
</div>
css样式
.nav {
width: 100%;
height: 440px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #fff;
margin: 10px 0 20px 0;
}
js逻辑
<script>
export default {
props:["bg","color"], //父组件传递过来的值
data() {
return {};
},
mounted() {},
methods: {},
components:{}
};
</script>
在components目录里面的myHeader.vue中
html样式
给模态框加入动态样式来显示两个不同样式的模态框
<div class='head'>
<div class="right" @click="show">
<i class="iconfont icon-nav"></i>
<span>导航</span>
</div>
</div>
css样式
.head {
width: 100%;
height: 150px;
background-color: #fff;
padding: 23px 26px;
overflow: hidden;
display: flex;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
align-items: center;
justify-content: space-between;
.right {
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30px;
color: #999;
i {
font-size: 32px;
}
span {
margin-top: 10px;
}
}
}
js逻辑
<script>
export default {
props:["bg","color"], //父组件传递过来的值
data() {
return {};
},
mounted() {},
methods: {
show() { //使用子传父 把属性传递到父组件
this.$emit('showModel',true)
}},
components:{}
};
</script>