vue中使用viewer查看圖片插件注意事項

【HTML部分】

        <div  id="imgContainer">

               <img :src="item.img" v-for="item in imgArr">

        </div>

【JS部分】

    data:{

        viewer:null,

    },

 

    this. $nextTick(() => {

            //動態添加圖片需要更新viewer插件:

            if ( this. viewer) {

                this. viewer. destroy();

            }

            this. viewer = self. $viewer(

                document. getElementById( "imgContainer")

            );

    });

1.在vue中經常會使用v-if,可能會導致document . getElementById獲取不到element,

報錯：Error: The first argument is required and must be an element.

解決：v-if 換為 v-show

2.動態添加圖片時，需要銷毀viewer插件對象this . viewer，然后再次獲取圖片外層容器元素,作為viewer插件初始化函數的第一個參數