美文网首页
使用 element 图片放大全屏

使用 element 图片放大全屏

作者: 魔仙堡杠把子灬 | 来源:发表于2021-11-15 09:34 被阅读0次

    你要藏好软弱,世界大雨滂沱。万物苟且而活,无人为你背负更多。

    我的github: 李大玄
    我的私人博客: 李大玄
    我的npm开源库: 李大玄
    我的简书: 李大玄
    我的CSDN: 李大玄
    我的掘金: 李大玄
    哔哩哔哩: 李大玄
    语雀文档: 李大玄

    在这里插入图片描述

    饿了么源码里面有一个未开放的组件ElImageViewer

    <ElImageViewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
    
    // 导入的时候这样
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
    
    components: {
       ElImageViewer,
     },
     data(){
     return {
        showViewer: false,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          ],
       }
    },
    methods: {
        onPreview() {
          this.showViewer = true;
        },
        closeViewer() {
          this.showViewer = false;
        },
      },
    

    相关文章

      网友评论

          本文标题:使用 element 图片放大全屏

          本文链接:https://www.haomeiwen.com/subject/jdnftrtx.html