Element-ui Image圖片按需引入大圖預(yù)覽

更新時(shí)間：2023年07月06日 11:54:47 作者：菜園前端

這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預(yù)覽實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Element-ui Image 圖片

在原生圖片的基礎(chǔ)上做了二次封裝，擴(kuò)展了更多功能。

按需引入方式

如果是完整引入可跳過(guò)此步驟

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)

基礎(chǔ)使用

<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>

大圖預(yù)覽

<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圖片按需引入大圖預(yù)覽的詳細(xì)內(nèi)容，更多關(guān)于Element-ui Image圖片預(yù)覽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

詳解vue express啟動(dòng)數(shù)據(jù)服務(wù)
本篇文章主要介紹了vue express啟動(dòng)數(shù)據(jù)服務(wù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
詳解vue-template-admin三級(jí)路由無(wú)法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級(jí)路由無(wú)法緩存的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
將Vue組件庫(kù)更換為按需加載的方法步驟
這篇文章主要介紹了將Vue組件庫(kù)更換為按需加載的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue監(jiān)聽(tīng)屬性圖文實(shí)例詳解
監(jiān)聽(tīng)屬性可以針對(duì)某個(gè)屬性進(jìn)行監(jiān)聽(tīng),當(dāng)監(jiān)聽(tīng)的屬性的值發(fā)生了變化,則會(huì)執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽(tīng)屬性的相關(guān)資料,需要的朋友可以參考下
2021-11-11
element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
詳解Vue如何使用$emit進(jìn)行組件通信
$emit是Vue實(shí)例的一個(gè)方法,它用于觸發(fā)自定義事件,本文主要為大家詳細(xì)介紹了Vue如何使用$emit進(jìn)行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下
2023-12-12
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程
getters用于獲取state里的數(shù)據(jù),它類(lèi)似于計(jì)算屬性,如果要獲取的數(shù)據(jù)并沒(méi)有發(fā)生變化的話(huà),就會(huì)返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程,需要的朋友可以參考下
2022-10-10
vue 移動(dòng)端記錄頁(yè)面瀏覽位置的方法
這篇文章主要介紹了vue 移動(dòng)端記錄頁(yè)面瀏覽位置的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03