效果如下:
代码:
父组件
<template> <el-container class="container"> <h1>这是父组件</h1> <HelloWorld v-if="detailVisible" msg="Welcome to Your Vue.js App" @detailClose="detailClose"/> </el-container> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'HomeView', components: { HelloWorld }, data() { return { detailVisible: true } }, methods:{ detailClose(){ this.detailVisible = false } } } </script> <style scoped> .container{ width: 100%; height: 800px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #CAE1FF; } </style>
子组件
<template> <div class="hello"> <div class="panel"> <div class="panel-header"> <span>标题</span> <i class="el-icon-circle-close" @click="close"></i> </div> <h1>{{ msg }}</h1> 这是子组件 </div> </div> </template> <script> let that export default { name: 'HelloWorld', props: { msg: String }, created(){ that = this }, methods:{ close(){ this.$emit('detailClose'); } } } </script> <style scoped lang="less"> .hello{ z-index: 999; width: 320px; height: 600px; padding: 10px; position: fixed; top: 100px; right: 20px; background-color: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 8px; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.12); .panel{ width: 100%; height: 200px; .panel-header{ //width: 100%; height: 40px; line-height: 30px; //font-weight: bolder; background-color: #647DFA; text-indent: 10px; padding-left: 8px; padding-right: 8px; border-radius: 4px; font-family: MiSans-Medium; font-size: 16px; color: rgba(255,255,255,0.85); display: flex; align-items: center; .el-icon-circle-close{ position: absolute; top: 18px; right: 14px; z-index: 1; width: 25px; height: 25px; cursor: pointer; color: rgba(255,255,255,0.45) } .el-icon-circle-close:hover{ position: absolute; top: 18px; right: 14px; z-index: 1; width: 25px; height: 25px; cursor: pointer; color: rgba(255,255,255,1) } } } } </style>
标签:color,25px,height,width,添加,rgba,按钮,弹框,255 From: https://www.cnblogs.com/zwh0910/p/18167942