Element-ui Image图片按需引入大图预览

 更新时间:2023年07月06日 11:54:47   作者:菜园前端  
这篇文章主要为大家介绍了Element-ui Image图片按需引入大图预览实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Element-ui Image 图片

在原生图片的基础上做了二次封装,扩展了更多功能。

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Image } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/image.css'
Vue.use(Image)

基础使用

<template>
    <div class="block" v-for="fit in fits" :key="fit">
        <span class="demonstration">{{ fit }}</span>
        <el-image style="width: 100px; height: 100px" :src="url" :fit="fit"></el-image>
    </div>
</template>
<script>
export default {
    data() {
        return {
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
    }
}
</script>

大图预览

<template>
    <div class="demo-image__preview">
        <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"> </el-image>
    </div>
</template>
<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>

Tabs Attributes

以上就是Element-ui Image图片按需引入大图预览的详细内容,更多关于Element-ui Image图片预览的资料请关注脚本之家其它相关文章!

相关文章

  • Vue中component标签解决项目组件化操作

    Vue中component标签解决项目组件化操作

    这篇文章主要介绍了Vue中component标签解决项目组件化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue beforeDestroy clearInterval清除定时器失效的解决

    vue beforeDestroy clearInterval清除定时器失效的解决

    这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue实现内部组件轮播切换效果的示例代码

    Vue实现内部组件轮播切换效果的示例代码

    这篇文章主要介绍了Vue实现内部组件轮播切换效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • el-select组件绑定change事件的踩坑记录

    el-select组件绑定change事件的踩坑记录

    这篇文章主要介绍了el-select组件绑定change事件的踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    本文主要介绍了vue项目中data数据之间互相访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue.js+Echarts开发图表放大缩小功能实例

    vue.js+Echarts开发图表放大缩小功能实例

    本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue路由中前进后退的一些事儿

    vue路由中前进后退的一些事儿

    这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue路由具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • vue如何判断dom的class

    vue如何判断dom的class

    这篇文章主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件,具体内容详情大家参考下本文
    2018-04-04
  • 详解elementUI中input框无法输入的问题

    详解elementUI中input框无法输入的问题

    这篇文章主要介绍了详解elementUI中input框无法输入的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue过滤器,生命周期函数和vue-resource简单介绍

    Vue过滤器,生命周期函数和vue-resource简单介绍

    这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-01-01

最新评论