vue項目中使用viewer.js

因項目需求,需要實現(xiàn)點擊圖片可以預覽放大旋轉(zhuǎn)切換等撑教,這個時候3铡醉拓!自己寫比較麻煩伟姐,所以選擇了站在巨人的肩膀上...

插件 viewer.js,GitHub地址:https://github.com/fengyuanchen/viewerjs
它的功能很全面亿卤,各位有需求請移步文檔~~以下簡單示例:


  1. 安裝:
    npm install viewerjs

  2. 引入:
    import Vue from 'vue';
    import Viewer from 'v-viewer'愤兵;
    import 'viewerjs/dist/viewer.css';

  3. 代碼中使用:

<template>
    <div id="imgTooles">
        <ul>
            <li v-for="(item,index)in this.imgList " :key="index">
                <img :data-original='`${item}`' :src="item">
            </li>
        </ul>
    </div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
    mounted(){
        this.getInfo();
    },
    data(){
        return{
            imgList : [],
        }
    },
    methods:{
        getInfo(){
            //發(fā)送ajax請求圖片list
            //...
            //this.imgList = res.data.list;

            //重點:要在圖片已經(jīng)請求到再調(diào)用E盼狻秆乳!
            this.$nextTick(() => {
                this.initImageTools();
            });
        },
        initImageTools(){
            //初始化 viewerjs
            const ViewerDom = document.getElementById('imgTooles');
            const viewer = new Viewer(ViewerDom, {
                url: "data-original",
                show: function(){
                      viewer.update();
                }
            });

        },
    }
}
</script>
  1. 總結(jié):如dom結(jié)構(gòu)為js動態(tài)插入,初始化會失效钻哩,此時應將初始化操作放在dom結(jié)構(gòu)插入完成后進行 屹堰。

  2. 近期使用遇到一些問題,比如圖片點擊兩次才能打開街氢;或者報錯Cannot read property 'update' of undefined,所以優(yōu)化了一下扯键。
    思路是,在點擊圖片的時候再創(chuàng)建實例珊肃,圖片關(guān)閉荣刑,銷毀實例。

methods:{
      getInfo(){
      //---
      },
      //去掉getInfo里的調(diào)用
       initImageTools(){
            //如果綁定了ref="imgTooles"伦乔,也可以這樣寫
            const viewer = new Viewer(this.$refs.imgTooles, {
                url: "data-original",
                show: function (){
                    viewer.update();
                },
                hide:function(){ //在圖片消失的時候銷毀viewer
                    viewer.destroy()
                }
            });
        },
        //點擊圖片創(chuàng)建實例 點擊事件綁定在圖片上
        imageChange(e){
            if (e.target.nodeName == 'IMG') {
                this.initImageTools();
            }
        },
    },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厉亏,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖塔沃,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仑乌,死亡現(xiàn)場離奇詭異,居然都是意外死亡晶伦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來忘渔,“玉大人,你說我怎么就攤上這事缰儿∑枇福” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長宣赔。 經(jīng)常有香客問我预麸,道長,這世上最難降的妖魔是什么儒将? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任吏祸,我火速辦了婚禮,結(jié)果婚禮上钩蚊,老公的妹妹穿的比我還像新娘贡翘。我一直安慰自己,他們只是感情好砰逻,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布鸣驱。 她就那樣靜靜地躺著,像睡著了一般蝠咆。 火紅的嫁衣襯著肌膚如雪踊东。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天刚操,我揣著相機與錄音闸翅,去河邊找鬼。 笑死菊霜,一個胖子當著我的面吹牛坚冀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播占卧,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼遗菠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了华蜒?” 一聲冷哼從身側(cè)響起辙纬,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎叭喜,沒想到半個月后贺拣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡捂蕴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年譬涡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啥辨。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡涡匀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出溉知,到底是詐尸還是另有隱情陨瘩,我是刑警寧澤腕够,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站舌劳,受9級特大地震影響帚湘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜甚淡,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一大诸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧贯卦,春花似錦资柔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽盈厘。三九已至睁枕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沸手,已是汗流浹背外遇。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留契吉,地道東北人跳仿。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像捐晶,于是被迫代替她去往敵國和親菲语。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 33惑灵、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方(存儲到物理硬盤中)1山上、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,085評論 0 2
  • 摘要: 2016年最火的前端框架當屬Vue.js了,很多使用過vue的程序員這樣評價它英支,“vue.js兼具angu...
    OSC開源社區(qū)閱讀 23,675評論 2 149
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計架構(gòu)和**解決方案**佩憾。> > 庫(lib...
    Rui_bdad閱讀 2,917評論 1 4
  • 第一章 Vue概述 what? Vue是實現(xiàn)UI層的漸進式js框架,核心庫關(guān)注視圖層干花,簡單的ui構(gòu)建妄帘,復雜的路由控...
    fastwe閱讀 719評論 0 0
  • 一:什么是閉包?閉包的用處池凄? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)抡驼。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,633評論 1 52