element ui 常用配置

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>

 

上一篇:vue element 弹窗 新增修改 同一个Dialog展示


下一篇:Android对话框