Vue封装组件-图片轮播图-LjCarousel-蒲公英云

Vue封装组件-图片轮播图-LjCarousel

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

LjCarousel.vue:

<!--LjCarousel-->
<template>
  <div>
    <el-carousel
      ref="ref_carouselMenu"
      :interval="interval"
      :height="height"
      :autoplay="autoplay"
      indicator-position="none"
      :style="{ width: width }"
    >
      <el-carousel-item v-for="(item, index) in imgs" :key="index" :name="item">
        <el-image :src="item"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div :style="imgListStyle">
      <el-image
        v-for="(item, index) in imgs"
        :key="index"
        :src="item"
        @click="$refs.ref_carouselMenu.setActiveItem(item)"
        :style="imgItemStyle"
      ></el-image>
    </div>
  </div>
</template>
<script>
export default {
  name: "LjCarousel",
  components: {},
  props: {
    //显示的图片数组
    imgs: {
      type: Array,
      default: () => [],
      required: true,
    },
    //轮播间隔
    interval: {
      type: Number,
      default: 4000,
    },
    //大图片高度
    height: {
      type: String,
      default: "250px",
    },
    //大图片宽度
    width: {
      type: String,
      default: "400px",
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
    //小图片最大高度
    maxHeight: {
      type: String,
      default: "60px",
    },
    //小图片最大宽度
    maxWidth: {
      type: String,
      default: "60px",
    },
    // 小图片布局
    justifyContent: {
      type: String,
      default: "start",
    },
  },
  data() {
    return {
      imgListStyle: {
        display: "flex",
        justifyContent: this.justifyContent,
        gap: "10px",
        width: this.width,
        marginTop: "15px",
      },
      imgItemStyle: {
        cursor: "pointer",
        maxHeight: this.maxHeight,
        maxWidth: this.maxWidth,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.LjCarousel {
}
</style>

使用：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1

imgs:图片数组。必传

<LjCarousel
  :imgs="imgs_treeType"
  :interval="4000"
  height="250px"
  width="400px"
  :autoplay="true"
  maxHeight="60px"
  maxWidth="60px"
  justifyContent="start"
></LjCarousel>