el-dialog 对话框
<el-dialog :title="showTitle" :visible.sync="myDialogVisible" append-to-body @open="showMap()" destroy-on-close custom-class="my-class" top="5vh" width="85%" > <el-row style="height: 600px"> <div class="h-100" id="map-container" /> </el-row> </el-dialog>
dialog中的元素调用找不到时,使用@open打开对话框后回调
showMap() { this.$nextTick(() => { this.setTouristRouteChart('placeHotRouteChart', 14.9) }) },
样式修改在全局样式中自定义 my-class 样式
el-carousel走马灯
<el-carousel class="comment-carousel" style="height: calc(100% - 0px);" height="calc(100% - 0px)" direction="horizontal" indicator-position="none" arrow="always" :autoplay="true"> <el-carousel-item class="h-100"> <el-row style="height: 32px;"> <div class="i-inner-title">关系图1</div> </el-row> <el-row style="height: calc(100% - 32px);"> <div id="placeTrafficChart" class="h-100"></div> </el-row> </el-carousel-item> <el-carousel-item class="h-100"> <el-row style="height: 32px;"> <div class="i-inner-title">路线图</div> </el-row> <el-row style="height: calc(100% - 32px);"> <div id="placeHotRouteChart2" class="h-100" @click="routeMapVisible=!routeMapVisible"></div> </el-row> </el-carousel-item> </el-carousel>