vue 走马灯使用轮播图

使用
        <welcomeImg style="margin-bottom: 20px"></welcomeImg>


组件
welcomeImg.vue
<template>
  <div class="box">
    <!-- 没有上传轮播图 -->
    <template v-if="imgsrc.length == 0">
      <el-carousel v-if="BannerShow"
        :interval="RefreshTime"
        indicator-position="none"
        arrow="hover"
      >
        <el-carousel-item v-for="(list, i) in imgsrc" :key="i">
          <img :src="HttpHost + list.url" class="image" />
        </el-carousel-item>
      </el-carousel>
    </template>
    <!-- 有上传轮播图 -->
    <template v-else>
      <el-carousel v-if="BannerShow"
        :interval="RefreshTime"
        indicator-position="none"
        arrow="hover"
      >
        <el-carousel-item v-for="(list, i) in imgsrc" :key="i">
          <img :src="list.url" class="image" />
        </el-carousel-item>
      </el-carousel>
    </template>


  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { TableDate, Remove } from "@/myApi/HomepageSetting.js";

export default {
  computed: {
    ...mapGetters(["HttpHost"])
  },
  data() {
    return {
      BannerShow:false,
      RefreshTime: null,
      imgsrc: []
    };
  },
  mounted() {
    // this.GetTableData()
  },
  created() {
    // this.HomeRemove("homepagesetting");
    this.GetTableData();
  },
  methods: {
    /**
     * 移除后台缓存
     */
    HomeRemove(params) {
      Remove(params)
        .then(res => {
          this.GetTableData();
        })
        .catch(error => {});
    },

    GetTableData() {
      TableDate()
        .then(res => {
          this.RefreshTime = res.data.RefreshTime * 1000; //分钟换算毫秒
          this.BannerShow = true; 
          if (res.data.Banner.length) {
            this.imgsrc = res.data.Banner.map(item => {
              return { url: "/" + item.UrlPath };
            });
          } else {
            this.imgsrc = [{url:require('../../assets/image/home_banner/1601429536848_3500_547.jpg')},{url:require('../../assets/image/home_banner/1601429536861_3500_547.jpg')}]
          }
        })
        .catch(error => {
          return;
        });
    }
  }
};
</script>

<style scoped>
.box /deep/ .el-carousel__container {
  width: 100%;
  height: 150px;
}

.image {
  width: 100%;
  height: 100%;
}
</style>