Vue+element |
您所在的位置：网站首页 › 图片预览图 › Vue+element |
Vue+element
|
Vue+element-ui轮播图+放大预览 最开始是采用Vue+element-ui轮播图+v-viewer实现的,npm引入v-viewer，不过里面的图片必须是原生的 urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: { type: Function, default: () => {} }, onClose: { type: Function, default: () => {} }, initialIndex: { type: Number, default: 0 }, appendToBody: { type: Boolean, default: true }, maskClosable: { type: Boolean, default: true } }, 找到前面的路径，先引入 在我的一个Matching.vue文件中引入,只贴了用到的,名字都起一样的elImageViewer,懒得改 import elImageViewer from 'element-ui/packages/image/src/image-viewer' export default { name: 'Matching', components: { elImageViewer }, data() { return { towerPhoto: [ require('@/assets/towerPhotos/Tower1.jpg'), require('@/assets/towerPhotos/Tower2.jpg'), require('@/assets/towerPhotos/Tower3.jpg'), require('@/assets/towerPhotos/Tower4.jpg'), ], viewerImgList: [], } } }我的HTML页面，循环轮播图的el-carousel-item，用于展示有几个轮播图，里面加入展示图片的 传入index用于判断从哪一张图片打开放大预览。 methods: { //打开查看器 onPreview(index) { this.showViewer = true let tempImgList = [...this.towerPhoto]; let temp = []; for (let i = 0; i this.showViewer = false }, }最后实现效果 完结。 |
【本文地址】