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

今天药忘吃喽~ 2022-09-02 13:47 166阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

LjCarousel.vue:

<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>

使用：

![2021080317150281.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

imgs:图片数组。必传

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20220829/26b74a85252e4b5a99227af9556688e5.png
[2021080317150281.png]: https://img-blog.csdnimg.cn/2021080317150281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20220829/8530f9e6bfeb4e8a8d8ba05775ffd55e.png