用el走马灯组件做图片的翻页效果,并具有预览功能。

image.pngimage.png

1.拿到el内部组件image-viewer做自定义的预览功能。

<el-image-viewer
      v-if="showViewer"
      :initial-index="initialIndex"
      :on-close="
        () => {
          handleViewer(false);
        }
      "
      :url-list="urlList"
    />
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

2.走马灯组件里的el-image组件添加lazy属性会导致图片加载失败。

补充:
可以用initial-index属性指定预览图片下标


一个大秤砣
0 声望0 粉丝