el-dialog 对话框
<el-dialog :title="showTitle" :visible.sync="myDialogVisible" append-to-body @open="showMap()" destroy-on-close
:close-on-click-modal="false"
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>
走马灯分片,如下为评论分片
每片中7行,设置 height: 14%,
<el-carousel class="comment-carousel" style="height: calc(100% - 52px);" height="calc(100% - 0px)" direction="horizontal" indicator-position="none" arrow="always" :autoplay="true"> <el-carousel-item v-for="(item,index) in commentTableData" :key="index"> <div v-for="(i, index) in item" :key="index" style="height: 14%; display: flex"> <el-tooltip :content="i.content" placement="top" :popper-class="'comment-tooltip'"> <div class="comment-body2" style=" 100%;">{{ i.content }}</div> </el-tooltip> </div> </el-carousel-item> </el-carousel>
自定义tooltip样式,设置在popper-class中,对应样式需要设置在全局样式中
<style lang="scss" > .el-tooltip__popper.comment-tooltip { font-size: 26px; } .el-tooltip__popper { font-size: 26px; max- 50vw; line-height: 1.5; } </style>
数据处理,将所有评论重新分组存入列表中,使用$set触发页面DOM更新
var lineNum = this.commentTableDataLine // 7个为一组 var tmp = [] allComment.forEach((item, index) => { tmp.push(item) if (index % lineNum == (lineNum-1)) { // this.commentTableData[Math.floor(index/lineNum)] = tmp // 不会触发DOM更新 this.$set(this.commentTableData, Math.floor(index / lineNum), tmp) // floor 向下去尾取整 tmp = [] } })