最近要寫個彈框，發現element-ui彈框樣式還可以，就copy下來改吧改吧。

html程式碼

<!--彈框-->	
<div class="el-dropdown-menu el-popper" :style="'position: absolute; top:'+listDialogTop+'; left: '+listDialogLeft+'; transform-origin: center top 0px; z-index: 2110;'" >
  	<!-- 上箭頭 -->
		<div  class="popper__arrow" style="left: 40px;"></div>
		<label style="padding: 5px;">任務執行人設定預覽</label>
		<div id="" v-loading="listLoading" style="padding: 10px;">
				這裡放你的要顯示的內容
		</div>
</div>  
 

css程式碼

.el-dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.el-popper .popper__arrow {
    border-width: 6px;
    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
}
.el-popper[x-placement^=bottom] .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
}
.el-popper .popper__arrow::after {
    content: " ";
    border-width: 6px;
}