element图片预览组件使用

最新推荐文章于 2024-04-20 12:38:57 发布

hy3528

最新推荐文章于 2024-04-20 12:38:57 发布

阅读量1.1k

点赞数

分类专栏： element Vue 文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/hy3528/article/details/121392821

版权

Vue 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

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>

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element图片预览组件使用

在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>
复制链接

扫一扫