element图片预览组件使用

11 篇文章 0 订阅

在vue-cli使用

<template>
    <div>
        <el-button @click="onPreview">预览</el-button>
        <el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
    </div>
</template>
<script>
    // 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    
    export default {
      name: 'Index',
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 显示查看器
          url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      },
      methods: {
        onPreview() {
          this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false
        }
      }
</script>

摘抄:https://www.cnblogs.com/zjianfei/p/15192619.html

由于el-image-viewer是一个单独的组件,我们在单页面无法使用 此组件,单页面使用方法如下:

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>标题</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

  
    </style>
</head>

<body>
    <div v-cloak id="Vue">
 	<el-image v-for="(item,index) in thankFileList" :key="index"
 	 :src="item.img" @click="openPreview(index)"
  	:preview-src-list="thankFileListImage"></el-image>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/vant.min.js"></script>
<script>
    new Vue({
        el: "#Vue",
        data: {
        thankFileList:[],//展示图片数组
		thankFileListImage: [],//预览图片数组
        },
        created() {
                
        },
        methods: {
			openPreview(index){
				this.thankFileListImage = this.thankFileList.slice(index).concat(this.thankFileList.slice(0, index))
			}
        }
    })
</script>
</html>

点击按钮触发图片预览功能

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>标题</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }
        /* 隐藏el-image组件 */
	    .hideDiv>.el-image__inner {
	        display: none;
	    }
  
    </style>
</head>

<body>
    <div v-cloak id="Vue">
    <div v-for="(item,index) in thankFileList" :key="index"  @click="openPreview(index)">图片{{index}}</div>
    <el-image
 	 ref="preview" class="hideDiv" :src="hideImg"
  	:preview-src-list="thankFileListImage"></el-image>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/vant.min.js"></script>
<script>
    new Vue({
        el: "#Vue",
        data: {
        hideImg:"默认图片",
        thankFileList:[],//展示图片数组
		thankFileListImage: [],//预览图片数组
        },
        created() {
                
        },
        methods: {
			openPreview(index){
				this.thankFileListImage = this.thankFileList.slice(index).concat(this.thankFileList.slice(0, index))
				//调用image组件中的大图浏览图片方法
                this.$refs.preview.clickHandler();
			}
        }
    })
</script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值