美文网首页
elementui-Image组件,图片点击放大展示

elementui-Image组件,图片点击放大展示

作者: 逸笛 | 来源:发表于2021-04-20 17:41 被阅读0次

    单个图片点击放大

    <el-image 
       style="width: 100px; height: 50px"
       :src="scope.row.picUrl"
       :preview-src-list="[scope.row.picUrl]">
    </el-image>
    
    图片.png

    主要是preview-src-list方法,直接把url通过[] 包起来即可

    图片列表内点击放大

    <div class="demo-image__preview">
      <el-image 
        style="width: 100px; height: 100px"
        :src="url" 
        :preview-src-list="srcList">
      </el-image>
    </div>
    
    <script>
      export default {
        data() {
          return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
              'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
              'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
          }
        }
      }
    </script>
    

    相关文章

      网友评论

          本文标题:elementui-Image组件,图片点击放大展示

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