效果圖：

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); }

總結(jié)

以上是生活随笔為你收集整理的Vue中css自定义实现div层，并在右上角有个叉叉，模仿dialog的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。