Vue组件-图片预览

码上有源

已于 2022-05-22 11:07:42 修改

阅读量260

点赞数

分类专栏：前端 vue 文章标签： vue.js elementui 前端

于 2022-05-22 10:59:29 首次发布

本文链接：https://blog.csdn.net/zhweixi/article/details/124908079

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

演示

正常显示缩小图
在这里插入图片描述
单击可放大图片

用法

<template>
	<image-view src="http://www.ab.com/a.jpg" />
</template>

依赖

依赖于element-ui

代码

<template>
  <div>
    <img :src="src" width="50px" @click="centerDialogVisible = true">
    <el-dialog center :visible.sync="centerDialogVisible" @click="centerDialogVisible = false">
      <img :src="src" style="max-width: 60vw; max-height: 70vh; display: block; margin:auto;">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ImageView',
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      centerDialogVisible: false
    }
  }
}
</script>