vue 自定义dialog

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轴方向的滚动条
}

猜你喜欢

转载自blog.csdn.net/Ann_52547/article/details/130507622