首页 > 其他分享 >给弹框添加关闭按钮

给弹框添加关闭按钮

时间:2024-04-30 14:23:05浏览次数:30  
标签:color 25px height width 添加 rgba 按钮 弹框 255

效果如下:

代码:

父组件

<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

相关文章

  • vxe-table,设置某列不显示时,表头表体对应错乱,添加一行,定位到当前行
    key值原先绑定的是索引,应该绑strfield refreshTable(){this.tableKey= Math.random()}//添加一行<vxe-table     ref="table"     :key="tableKey">methods:{//滚动到左侧this.tableKey=+newDate()setTimeout(()=>{     ......
  • zabbi添加自定义监控项——检查文件是否存在
    1、检查脚本D:/check.pyimportosimportdatetimeimportargparse#获取文件名parser=argparse.ArgumentParser()parser.add_argument('filename')args=parser.parse_args()file_name=args.filename#获取今天日期today=datetime.datetime.today().strftime......
  • 在密码学中,“加盐”(Salting)是指在存储用户密码的哈希值之前,向原始密码添加一个随机生
    在密码学中,“加盐”(Salting)是指在存储用户密码的哈希值之前,向原始密码添加一个随机生成的字符串(称为“盐”Salt)的过程。这个盐值通常是全球唯一的,并且与每个用户账户相关联,存储在数据库中与哈希值一起。加盐的目的主要有两个:抵御彩虹表攻击:彩虹表是一种预先计算好的哈希值对照表......
  • 8.Java异常(后续将添加编辑)
    异常最全最详细的Java异常处理机制异常处理机制抛出异常捕获异常处理异常关键字:try,catch,finally,throw,throws;packagecom.exception;publicclassText{publicstaticvoidmain(String[]args){inta=1;intb=0;try{......
  • jenkins上添加项目配置
    网上配置的没找到,自己记录一个方便后续添加1.选择左上角新建任务 2.选择流水线 3.勾选丢弃旧的构建  4.填写git仓库地址 5.获取到ColonewithSSH地址,把地址gitlab.asb.com改成ip形式的 6.git授权用户,先在配置里找到需要设置的用户 添加权限 7.在项目下......
  • uniapp中导航栏的返回按钮使用 autoBackButton:false不生效
    uni-appH5端修改pages.json"autoBackButton":false不生效pages.json中配置autoBackButton是不生效的,因为这个属性只支持程序方面,H5不支持这个属性的设置 解决方法:在 mounted 这添加如下一句就好了,意思是在页面渲染完成后,找到返回按钮,把它隐藏 ......
  • yum安装mysql报错--您可以尝试添加 --skip-broken 选项来解决该问题 清除缓存命令
    yum安装mysql报错--您可以尝试添加--skip-broken选项来解决该问题    安装mysql时,如果安装报错,首先删除缓存,    1、清除缓存  yumcleancache    2、重新加载  yummakecache    3、重新安装  yuminstallmysql    此......
  • SAP MM 定义物料类型的属性配置里的New entries按钮
    SAPMM定义物料类型的属性配置里的Newentries按钮  在SAP的很多后台配置界面上都有NewEntries(新条目)按钮,方便企业用户可以根据企业特有业务需求来增加新的配置条目。 事实上,并不是所有的配置界面里,都能很随意很方便的允许企业用户点击’NewEntries’按钮来做定制配......
  • 博客添加评论功能及定制化样式
    哈喽大家好,我是咸鱼。(博客网址:https://xxxsalted.github.io/)在搭建了博客并换了主题之后,发现有许多细节方面的东西还需要完善和定制化一下,比如说行距和引用的样式我不是很喜欢,以及没有评论功能。于是决定自己动手,说干就干。PS:下文的修改操作仅限于博客主题(Klise),不同主题的配......
  • python将图片添加到视频底层中(提高处理单个视频的效率)
    代码: importcv2importnumpyasnpimportosimportrandomfromconcurrent.futuresimportThreadPoolExecutor#图片文件夹路径image_folder_path=r'F:\jingguan\tu'#视频文件所在的文件夹路径video_folder_path=r'F:\jingguan\yuan'#输出视频文件夹路径ou......