Vue3+element 实现双轮播效果

最新推荐文章于 2024-08-09 10:27:16 发布

原创

最新推荐文章于 2024-08-09 10:27:16 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

文章描述了一个使用Vue框架开发的功能，其中父组件传递图片列表给子组件，子组件包含一个轮播图和缩略图。用户点击父组件的图片可以打开预览弹框，大图和小图可以同步切换。子组件通过监听父组件传递的图片URL和索引来实现大图和小图的切换效果，同时利用ElementPlus的Carousel组件实现轮播功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果。点击父页面图片，进入放大图页面。点击大图切换，小图片也进行切换，点击小图片，大图片跟着切换
一：弹框页面接收父组件传递的图片列表数据，以及当前点击放大的图片url

   <el-dialog
      v-model="dialogVisible"
      @close="closeDialog"
      destroy-on-close
      :close-on-click-modal="false"
      width="500px"
    >
//引用子组件
      <PlusImage
        :dialogImageUrl="dialogImageUrl"
        :fileList="fileList"
      ></PlusImage>
    </el-dialog>  
<script lang="ts" setup>
import { defineProps, ref, watch, defineEmits } from "vue";
import PlusImage from "./PlusImage.vue";
//定义弹框的显示隐藏
const dialogVisible = ref(false);
const emit = defineEmits(["closeVisible"]);
const dialogImageUrl: any = ref("");
//接收父组件传递的数据
const props = defineProps({
  dialogImageUrl: String,
  fileList: Array,
  dialogVisible: Boolean,
});
const fileList: any = ref