欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)

 更新時(shí)間:2023年02月09日 09:23:31   作者:小花皮豬  
v-viewer是一個(gè)基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化,這篇文章主要介紹了Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下

前言

昨天不是做了一個(gè)動(dòng)態(tài)的圖片展示嗎,今天就尋思著能不能完善下功能,可以通過點(diǎn)擊圖片的方式進(jìn)行放大縮小,甚至旋轉(zhuǎn)。

圖片展示可以參考:Vue顯示圖片的幾種方式

然后我一頓收搜,發(fā)現(xiàn)了vue中有這么一款插件:v-viewer

wc,不看不知道,一看嚇一跳,這個(gè)插件居然如此nb,最主要的是,這么厲害的插件,使用其他特別簡(jiǎn)單!

先給大家簡(jiǎn)單科普下v-viewe這個(gè)插件吧

科普:v-viewer

簡(jiǎn)單來說:v-viewer是一款支持vue項(xiàng)目中的圖片瀏覽組件,它支持圖片旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,支持配置化.非常強(qiáng)大

下面的代碼,我都是用的默認(rèn)配置,因?yàn)槲矣X得默認(rèn)配置功能過于厲害,當(dāng)然也根據(jù)自己的需求進(jìn)行調(diào)整

官網(wǎng)目錄:v-viewer

安裝依賴

直接執(zhí)行命令:

npm install v-viewer --save

這個(gè)依賴很小,如果網(wǎng)絡(luò)正常的話幾秒就可以下載完成

引入并使用依賴

下載完成之后,就可以配置了,具體操作就是引入并使用依賴了。

找到vue項(xiàng)目中的main.js 文件并加入如下代碼:

// 引入Viewer插件
import VueViewer, { directive as viewerDirective } from 'v-viewer';
// 引入Viewer插件的圖片預(yù)覽器的樣式
import 'viewerjs/dist/viewer.css'; 
// 使用Viewer圖片預(yù)覽器
Vue.use(VueViewer)
// 用于圖片預(yù)覽的指令方式調(diào)用 在元素上加上會(huì)處理元素下所有的圖片,為圖片添加點(diǎn)擊事件,點(diǎn)擊即可預(yù)覽
Vue.directive('viewer', viewerDirective({
  debug: true
}));

頁面代碼使用

所有前提工作都做完之后,我們就來到了重點(diǎn),讓圖片可以進(jìn)行預(yù)覽,旋轉(zhuǎn),放大縮小等

其實(shí)用了這個(gè)插件之后特別簡(jiǎn)單,只需要給圖片這個(gè)容器一個(gè)指令,就可以擁有這些功能。

v-viewer

查看效果

然后刷新下頁面,這時(shí)候點(diǎn)擊圖片。

旋轉(zhuǎn),縮小,等功能都是可以的。

其他的功能就不演示了。大家感興趣的話可以下去自己玩玩。

消除日志打印

好歸好,但是有一個(gè)問題,就是控制臺(tái)打印太多了:

這么多日志肯定是不利于開發(fā)的,所以我想著把插件相關(guān)的日志給去掉

想要解決這個(gè)問題,只能是修改源碼嘍,一般情況下,盡量還是不要碰源碼,但是這種情況,是肯定得碰的啦

打開項(xiàng)目的node_modules目錄,往下翻,找到v-viewer這個(gè)文件夾的dist文件夾下的v-viewer.js文件

這個(gè)就是這個(gè)插件的js代碼,作者在里面為了方便調(diào)試打印了一些日志,我們需要手動(dòng)關(guān)閉:

我主要是通過控制臺(tái)的日志,收到進(jìn)行ctrl+f搜索的,找到對(duì)應(yīng)的內(nèi)容進(jìn)行關(guān)閉,以下我將通過大家相關(guān)日志的行號(hào),大家找到對(duì)應(yīng)的行號(hào)進(jìn)行注釋或者刪除即可,個(gè)人建議注釋而不是刪除!

以下行號(hào)只是解決插件默認(rèn)展示的日志。

行號(hào):268,315,260,223

相關(guān)截圖:

這四個(gè)地方修改完之后重啟項(xiàng)目,再次訪問,這次控制臺(tái)一干二凈的,是不是舒服多了!

功能也是正常支持的!

總結(jié)

這個(gè)插件我覺得太厲害了,最主要是使用起來也很簡(jiǎn)單。大家一定要下去試試!

相關(guān)文章

  • Vue+webpack+Element 兼容問題總結(jié)(小結(jié))

    Vue+webpack+Element 兼容問題總結(jié)(小結(jié))

    這篇文章主要介紹了Vue+webpack+Element 兼容問題總結(jié)(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue的安裝及element組件的安裝方法

    vue的安裝及element組件的安裝方法

    下面小編就為大家分享一篇vue的安裝及element組件的安裝,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口

    vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口

    這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue?數(shù)據(jù)綁定事件綁定樣式綁定語法示例

    Vue?數(shù)據(jù)綁定事件綁定樣式綁定語法示例

    這篇文章主要為大家介紹了Vue?數(shù)據(jù)綁定事件綁定樣式綁定語法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決

    Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決

    這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue組件watch屬性實(shí)例講解

    vue組件watch屬性實(shí)例講解

    這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue中如何進(jìn)行異步請(qǐng)求

    vue中如何進(jìn)行異步請(qǐng)求

    前端的數(shù)據(jù)均是通過接口請(qǐng)求拿到的,而Vue本身不支持ajax請(qǐng)求,那么該怎么解決Vue中的異步請(qǐng)求呢?這兒提供了幾種方法,希望對(duì)大家有所幫助
    2022-05-05
  • 在vue中利用v-html按分號(hào)將文本換行的例子

    在vue中利用v-html按分號(hào)將文本換行的例子

    今天小編就為大家分享一篇在vue中利用v-html按分號(hào)將文本換行的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • ElementPlus表單rules校驗(yàn)的方法步驟

    ElementPlus表單rules校驗(yàn)的方法步驟

    相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下
    2023-04-04
  • 在vue中使用css modules替代scroped的方法

    在vue中使用css modules替代scroped的方法

    本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03

最新評(píng)論