Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog

效果图：

HTML部分：

<div class="tankuangClass"v-show="true"style="width:400px;height:300px;top:20%;left:60%;"><div class="bigtitle"><span class="lefttitle">门禁控制</span><span class="closeicon" ><i class="el-icon-circle-close" style="font-size: 18px;color: wheat;"></i></span></div><div class="content"><p>AAAAAAA</p><p>bbbbb</p><p>ccccccc</p><p>DDDDD</p></div></div>

CSS部分：

.tankuangClass {position: absolute;border-radius: 10px;background-color: rgba(0, 85, 116, 0.8); } .bigtitle {padding: 10px 10px 5px 10px;height: 25px;border-bottom: solid 1px wheat; } .lefttitle {font-size: 17px;float: left;color: wheat;letter-spacing: 2px; } .closeicon {float: right;cursor: pointer; } .content {padding: 10px;height: calc(100% - 60px); }

总结

以上是生活随笔为你收集整理的Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。