vue3 数据可视化大屏 开发中，需要进行内容切换，因为很多个模块都需要切换，所以把这一块的代码单独抽离出来不用再额外花费精力来关心切换了。这样就只需要集中精力处理逻辑即可。

代码

<template>
  <div class="itemOutBody">
    <el-carousel :autoplay="false" arrow="never" indicator-position="inside">
      <el-carousel-item>

      </el-carousel-item>
      <el-carousel-item>

      </el-carousel-item>
      <el-carousel-item>

      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

import pageData from "./pageData.vue";
export default {
  name: "title",
  data() {
    return {

    }
  },
  components: {pageData},
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    }
  },
  watch: {},
  mounted() {
    var that = this;

  },
  methods: {},
}
</script>
<style lang="scss">
.el-carousel__button {
  width: 8px;
  height: 8px;
  opacity: 0.6;
  border-radius: 50%;

}

.el-carousel__indicators--horizontal {
  //bottom: 15px;
}

.is-active {
  .el-carousel__button {
    width: 8px;
    height: 8px;
    background: rgba(28, 233, 249, 1);
    opacity: 0.6;
    border-radius: 50%;
  }
}

.el-carousel--horizontal {
  position: relative;
  height: calc(100% - 0px);
}

.el-carousel__container {
  position: relative;
  height: calc(100% - 0px);
}
</style>
<style lang="scss" scoped>
.itemOutBody {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: calc(100% - 0px);
}

.itemBodys {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: calc(100% - 30px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
}


.TitleRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  p {
    line-height: 30px;
  }

  .icon_right {
    width: 12px;
    margin-left: 14px;
  }
}

.itemBodys2 {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
}
</style>