当前位置：首页 > article >正文

vue vue3 走马灯Carousel

article 2025/4/1 23:26:25

背景：

在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。

实现效果：

官网链接：点击跳转

核心代码：

<el-carousel
                  style="width: 100%; height: 100%"
                  :interval="5000"
                  :trigger="'click'"
                  :indicator-position="'none'"
                >
                  <el-carousel-item
                    v-for="(item, index) of state.ferryPortdata.photoList"
                    :key="index"
                  >
                    <div class="aspect-container">
                      <el-image
                        class="carousel-image"
                        :src="BASEUrl + '/file/' + item.file"
                        :preview-src-list="[BASEUrl + '/file/' + item.file]"
                        :preview-teleported="true"
                        alt=""
                        fit="cover"
                      />
                    </div>
                  </el-carousel-item>
                </el-carousel>

组件的属性：

走马灯组件的属性，如下：

autoplay：是否自动切换。默认值true

interval：自动切换的时间间隔，单位为毫秒。默认值3000

trigger：指示器的触发方式。属性值：'hover' | 'click' 。默认值hover

indicator-position：指示器的位置。属性值3种：'' | 'none' | 'outside'

默认情况下，它会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。

el-image图片组件的属性，如下：

src ：图片源地址

fit：图片如何适应容器框。属性值：'' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

preview-src-list：开启图片预览功能。string[]

preview-teleported：image-viewer 是否插入至 body 元素上。

嵌套的父元素属性会发生修改时应该将此属性设置为 true【即图片放大到全局】

写到这儿。。。走马灯轮播图的效果就实现了。。。

下面是走马灯的图片的点击放大效果。

走马灯点击放大：

思路如下：

走马灯的图片点击放大实现思路如下：：

1、查看走马灯组件是否有click点击事件。

2、自定义一个click事件，绑定在图片身上，当点击图片触发图片放大的效果。

3、el-image图片组件，图片点击放大的属性且放大到全局。推荐用法！！！

1、走马灯组件是否有点击事件：

通过访问走马灯组件的官网知道，走马灯没有相应的点击事件

2、自定义图片的点击事件：

给走马灯组件内部的每一张图片绑定click自定义事件，自定义事件实现图片放大效果

实现效果：

核心代码：

点击事件：

const showPreview = ref(false);
const handleClick = (data) => {
  showPreview.value = true;
  state.imgSrc = BASEUrl + "/file/" + data.file;
};

图片预览组件：

//图片预览el-image-viewer组件
//state.imgSrc是每次点击图片的地址
<el-image-viewer
    v-if="showPreview"
    :url-list="[state.imgSrc]"
    @close="showPreview = false"
  />

图片预览官网链接：点击跳转

3、el-image图片组件的点击放大【推荐】：

实现效果：

图片能够实现点击放大，并且放大到全局。放大到全局需要设置el-image的一个属性preview-teleported=“true”，用于控制image-viewer 是否插入至 body 元素上。

官网链接：点击跳转

未设置效果：

设置代码及效果：

//el-image图片预览效果，image-viewer相对于标签body
//:preview-teleported="true"
        <el-image
                  v-if="state.sixNoData.photo"
                  class="img-style"
                  :src="BASEUrl + '/file/' + state.sixNoData.photo"
                  alt=""
                  fit="cover"
                  :preview-src-list="[BASEUrl + '/file/' + state.sixNoData.photo]"
                  :preview-teleported="true"
                />

备注：

问：走马灯组件和图片预览组件的代码应该怎么组合使用？

走马灯组件和图片预览组件放置在同级，如下：

不能这样放：

问题：图片为什么显示加载失败？

答：图片涉及到了跨域处理，前端做了对一个图片地址src的访问代理。

接口返回的数据如下：

other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg

前端能够展示的src形式是：

/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg是文件存放路径

BASEUrl + '/file/' + item.file

即：

/apiproxy/pa/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg

/apiproxy/pa是前端代理

问题：state.ferryPortdata.photoList响应式变量的数据结构是什么样的？

答：是接口返回的数据，其中涉及到的数据，示例如下：

//涉及到的数据
[
    {
        "pid": 142,
        "category": null,
        "type": 6,
        "file": "other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg",
        "associationId": 119,
        "dateOfIssue": "2025-03-13 14:06:45",
        "deadline": null,
        "isValid": null
    },
    {
        "pid": 143,
        "category": null,
        "type": 6,
        "file": "other/e1ce36cc-7085-490c-bb9d-b4589590c751.jpg",
        "associationId": 119,
        "dateOfIssue": "2025-03-13 14:06:45",
        "deadline": null,
        "isValid": null
    },
    {
        "pid": 144,
        "category": null,
        "type": 6,
        "file": "other/c2fc72b8-ec93-4f4d-bdaf-866fe8e3ad31.jpg",
        "associationId": 119,
        "dateOfIssue": "2025-03-13 14:06:45",
        "deadline": null,
        "isValid": null
    },
    {
        "pid": 145,
        "category": null,
        "type": 6,
        "file": "other/a091bb95-66c3-4870-84ce-a9d34a0f81a1.jpg",
        "associationId": 119,
        "dateOfIssue": "2025-03-13 14:06:45",
        "deadline": null,
        "isValid": null
    },
    {
        "pid": 146,
        "category": null,
        "type": 6,
        "file": "other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg",
        "associationId": 119,
        "dateOfIssue": "2025-03-13 14:06:45",
        "deadline": null,
        "isValid": null
    }
]

查看全文

http://www.kler.cn/a/611203.html