vue 自定义dialog

最新推荐文章于 2024-02-01 15:15:33 发布

Ann_R

最新推荐文章于 2024-02-01 15:15:33 发布

阅读量190

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ann_52547/article/details/130507622

版权

这段代码展示了如何在Vue.js中创建一个带有背景遮罩的对话框组件。当dialogVisible为true时，会显示一个全屏的半透明遮罩和一个居中显示的白色对话框。对话框内容区域有最大高度限制并支持滚动条。

摘要由CSDN通过智能技术生成

1、

<div class="bg-cover" v-if="dialogVisible"></div>
    <div class="dialog" v-if="dialogVisible">
    	这里是dialog内容
    	<div class="content">
    	</div>
    </div>
</div>

2、

.bg-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 98;
}

.dialog {
  z-index: 99;
  background: #FFFFFF;
  border-radius: 10px;
  position: fixed;
  padding: 26px;
  //居中显示
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content{
	max-height:500px; //设置一个最大高度之类的。。
	overflow: hidden; // 超出部分隐藏
	overflow-y: scroll; // 设置y轴方向的滚动条
}