<Rule :showRule="showRule" />
<template>
<div class="xn-container">
<div class="mask" v-show="showRule" @click="close()"></div>
<div class="popup-content" :class="{'show': showRule}">
<p>通過(guò)css3的transition實(shí)現(xiàn)</p>
<p>我是彈窗內(nèi)容</p>
<p>可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我可以點(diǎn)擊遮罩關(guān)閉我</p>
</div>
</div>
</template>
<script>
export default {
props: ['showRule'],
data() {
return {}
},
methods: {
close() {
this.$parent.showRule = false
}
}
}
</script>
<style lang="less" scoped>
.xn-container {
height: 100%;
}
.mask {
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
transition: all 0.6s;
}
.popup-content {
position: absolute;
height: 0;
bottom: 0;
left: 0;
width: 100%;
overflow-y: scroll;
background-color: white;
-webkit-transition: all 0.6s;
transition: all 0.6s;
&.show {
height: 400px;
}
p {
line-height: 30px;
text-align: center;
}
}
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
