elementui ui对el-image-viewer的简单封装及使用

这篇具有很好参考价值的文章主要介绍了elementui ui对el-image-viewer的简单封装及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目中,会有对图片预览查看的需求。当使用el-dialog进行图片预览实现时,会出现长图片占满整个浏览器,致使图片不能完整的显示的情况,这对使用者的体验非常不友好,使用elementui提供的el-image-viewer就能解决这个问题。

一,封装el-image-viewer组件

        

<template>
  <div>
    <el-image
    v-if="srcUrl"
    style="width: 160px; height: 116px"
    :src="srcUrl"
    :style=styleC
    @click="onPreview(srcUrl)"
    >
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>
    <el-image-viewer 
      v-if="showViewer" 
      :on-close="closeViewer" 
      :url-list="[showViewerUrl]"
      :zIndex="zIndex"
      />
  </div>

</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
  components: {
     ElImageViewer,
    },
    data() {
    return {
      showViewer: false, // 显示查看器
      showViewerUrl:"",
    }
  },
  name: 'KtButton',
  props: {
    srcUrl: {  // 图片链接
      type: String,
      default: null
    },
    styleC: {  // 图片链接,可不填
      type: String,
      default: null
    },
    zIndex: {//使预览图片置于浏览器最外层
      type: Number,
      default: 9999
    }
  },
  computed: {

  },
  methods: {
    // 关闭查看器
        closeViewer() {
          this.showViewer = false
        },
      //打开查看器
     onPreview(showViewerUrl) {
            this.showViewerUrl = showViewerUrl;
            this.showViewer = true
        },
   
  }
};
</script>

elementui ui对el-image-viewer的简单封装及使用

 文章来源地址https://www.toymoban.com/news/detail-510117.html

二,使用组件

1.注册组件

import customImg from "@/components/CustomImg"
 export default{
  components:{
    customImg
  },

2.使用组件

                                <el-carousel-item v-if="v.fileList && v.fileList.length>0"  v-for="(item,index) in v.fileList" trigger="click">
                                        <!-- <el-image v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_" :src="baseImgURL+item.url" @click.native="previewImgCard(baseImgURL+item.url)"  >
                                          <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                          </div>
                                        </el-image> -->
//在这里使用组件,srcUrl传入需要预览的url地址
                                        <customImg :srcUrl="baseImgURL+item.url"  v-if="item.type==0" style="margin-left:40px;cursor:pointer" class="imgUPload_"> </customImg>
                                  <video v-if="item.type == 1" style="margin-left:40px" width="200px"  controls  :autoplay="false" :src="baseImgURL+item.url"></video>
                                  <audio v-if="item.type == 2"  style="width:200px;margin-left:40px" controls :autoplay="false" :src="baseImgURL+item.url" ></audio>
                                </el-carousel-item>
                              </el-carousel>

三,效果展示

elementui ui对el-image-viewer的简单封装及使用

 

elementui ui对el-image-viewer的简单封装及使用

好了,一个简单的图片预览效果就出现了。

 

到了这里,关于elementui ui对el-image-viewer的简单封装及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用element-ui的el-image的src问题

    起初: 今天在学习vue的时候,遇到了一个问题,vue学的马马虎虎,语法也不扎实。遇到的问题在这里记录下来。 问题: 是使用el-image的src链接问题。 文件结构是这样的:  按照以往学习html的思想,在使用el-image标签的时候src我写成了src=\\\"../image/Anonymous.png\\\"。乍一看没什么问题

    2024年02月13日
    浏览(45)
  • 关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题

    当使用 el-image /el-image 在网页中加载本地图片时,会出现图片加载失败的问题,但使用 img / 标签可以正常显示。 在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。 将 el-image src=\\\"../assets/bg_login.jpeg\\\"/el-image 改为 el-image :src=\\\"require(\\\'../asset

    2024年02月06日
    浏览(48)
  • 使用Element UI图片容器报错 Unknown custom element: <el-image>

    记一次项目中使用el-image组件报错问题,报错如下: 查阅资料后发现项目中使用的element版本不支持该组件,查看项目的package.json文件,发现使用的element ui版本为:2.4.6。而el-image组件是在2.8.0引入的 Elemtnt UI更新日志这里可以看到在2.8.0的时候加入了Image组件 解决办法:升级

    2024年02月04日
    浏览(47)
  • Unknown custom element: <el-image>无法使用该组件,升级element-ui版本后项目报错

    需求背景: 项目中需要使用图片点击放大,想要使用 el-image 组件,引入后报了下面的错,需要升级element版本,element-ui版本过低,没有该组件。 过程: cnpm i element-ui@2.14.1 --save-dev 升级后,页面报了一千多个错,如Property or method “__v_isRef“ is not defined on the instance 项目页面较

    2023年04月19日
    浏览(44)
  • 基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    组件:MultipleSelect.vue 使用:index.vue 多选框多选不换行

    2024年01月22日
    浏览(49)
  • 【UI】elementui el-pagination分页位置靠右

    分页如何实现下面效果,位置靠右 以前都是align=“right”, 但是饿了么更新版本后将这个方法弃用了 跳转element-ui element-ui官网 ,分页的基础用法明确指出 -后的元素会靠右显示 ,也就是说 这个箭头符放在哪的前面,那后面的元素就会靠右 , 想要所有元素靠右的话,就将它放

    2024年02月11日
    浏览(39)
  • UI Automator Viewer的使用

    uiautomatorviewer是android SDK自带的工具。通过截屏并分析XML布局文件的方式,为用户提供控件信息查看服务。该工具位于SDK目录下的tools子目录下。可以看到,它是通过bat文件启动的。 (提前打开、连接手机、启动Appium) 启动界面如下 单击:第二按钮(Device Screenshoot uiautomator

    2024年02月09日
    浏览(42)
  • 最简单的使用css修改element-ui的el-select的高度

    个人博客同步csdn 首先给el-select的容器上面自定义一个类名,避免污染别的el-select 写css,注意这里用了less 效果图(前) 效果图(后)

    2024年02月12日
    浏览(38)
  • Element UI 表格 el-table 二次封装

    Tips: 文章末尾有完整封装代码 一、继承 element 表格属性 需要将element提供的表格属性使用props传入组件中 二、配置 element 表格的表头 使用 props 传入的表头数据遍历得到表格的表头。 有些列的数据需要自定义内容,例如:操作列、不同样式的数据展示等。 方式一 需要自定义

    2023年04月08日
    浏览(46)
  • element-ui el-image :initial-index 动态调整不生效

    vue 版本 2.6.11 element-ui 2.12.0 在使用 el-image 时需要展示图片列表并查看,但我无论怎么尝试 :initial-index=\\\"index\\\"都不会生效,或者是我的使用方法不对。 目前是使用了一个动态的集合来改变:preview-src-list=“showImageList(index)” 的值,从而实现点击任意图片即打开预览,并且不影响上

    2024年01月24日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包