成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Vue 自定義 directive 實(shí)現(xiàn)點(diǎn)擊放大顯示 wordpress wp-json 接口獲取的

AndroidTraveler / 1332人閱讀

摘要：在做一個(gè)項(xiàng)目，需要從中通過(guò)接口獲取內(nèi)容，然后用顯示出來(lái)，顯示出來(lái)的內(nèi)容中，圖片大小都只有寬，原始圖片較大，包含更多細(xì)節(jié)，因此希望能夠?qū)崿F(xiàn)點(diǎn)擊放大查看圖片細(xì)節(jié)。效果原內(nèi)容點(diǎn)擊圖片后

在做一個(gè)項(xiàng)目，需要從 wordpress 中通過(guò) wp-json 接口獲取 post 內(nèi)容，然后用 v-html 顯示出來(lái)，顯示出來(lái)的內(nèi)容中，圖片大小都只有 300px 寬，原始圖片較大，包含更多細(xì)節(jié)，因此希望能夠?qū)崿F(xiàn)點(diǎn)擊放大查看圖片細(xì)節(jié)。

仔細(xì)看了一下 post 內(nèi)容的 html 代碼中 img 元素本身的 src 屬性指向的圖片是 wordpress 經(jīng)過(guò)縮放之后的圖片，寬度只有 300px，細(xì)節(jié)丟失也較嚴(yán)重，同時(shí)這些 img 元素都有一個(gè) srcset 屬性，這個(gè)屬性主要是用來(lái)在不同的移動(dòng)設(shè)備中顯示不同分辨率圖片的，包含了不同分辨率的圖片地址，因此想到能夠通過(guò)這個(gè)屬性來(lái)顯示大圖片。

下面是相關(guān) directive 的代碼 SrcSet.js：

export default {
  update (el) {
    el.querySelectorAll("img[srcset]").forEach(i => {
      i.style.cursor = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxnIGlkPSJtYWduaWZ5aW5nX2dsYXNzX2FkZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cGF0aCBkPSJNMjMuMzQxMTI1LDIwLjE1OTI1IEwxNi43NDY3NSwxMy41NjQ4NzUgQzE3LjUzOCwxMi4yMjU3NSAxOCwxMC42NjgzNzUgMTgsOSBDMTgsNC4wMjkzNzUgMTMuOTcwNjI1LDAgOSwwIEM0LjAyOTM3NSwwIDAsNC4wMjkzNzUgMCw5IEMwLDEzLjk3MDYyNSA0LjAyOTM3NSwxOCA5LDE4IEMxMC42NjgzNzUsMTggMTIuMjI1NzUsMTcuNTM4IDEzLjU2NDg3NSwxNi43NDY3NSBMMjAuMTU5MjUsMjMuMzQwNzUgQzIwLjU2NjEyNSwyMy43NDgzNzUgMjEuMTI4NjI1LDI0IDIxLjc1LDI0IEMyMi45OTI3NSwyNCAyNCwyMi45OTI3NSAyNCwyMS43NSBDMjQsMjEuMTI4NjI1IDIzLjc0OCwyMC41NjYxMjUgMjMuMzQxMTI1LDIwLjE1OTI1IFogTTksMTUuNzUgQzUuMjcyMTI1LDE1Ljc1IDIuMjUsMTIuNzI3ODc1IDIuMjUsOSBDMi4yNSw1LjI3MjEyNSA1LjI3MjEyNSwyLjI1IDksMi4yNSBDMTIuNzI3ODc1LDIuMjUgMTUuNzUsNS4yNzIxMjUgMTUuNzUsOSBDMTUuNzUsMTIuNzI3ODc1IDEyLjcyNzg3NSwxNS43NSA5LDE1Ljc1IFogTTEyLjc1LDcuODc1IEwxMC4xMjUsNy44NzUgTDEwLjEyNSw1LjI1IEMxMC4xMjUsNC42Mjg2MjUgOS42MjEzNzUsNC4xMjUgOSw0LjEyNSBDOC4zNzg2MjUsNC4xMjUgNy44NzUsNC42Mjg2MjUgNy44NzUsNS4yNSBMNy44NzUsNy44NzUgTDUuMjUsNy44NzUgQzQuNjI4NjI1LDcuODc1IDQuMTI1LDguMzc4NjI1IDQuMTI1LDkgQzQuMTI1LDkuNjIxMzc1IDQuNjI4NjI1LDEwLjEyNSA1LjI1LDEwLjEyNSBMNy44NzUsMTAuMTI1IEw3Ljg3NSwxMi43NSBDNy44NzUsMTMuMzcxMzc1IDguMzc4NjI1LDEzLjg3NSA5LDEzLjg3NSBDOS42MjEzNzUsMTMuODc1IDEwLjEyNSwxMy4zNzEzNzUgMTAuMTI1LDEyLjc1IEwxMC4xMjUsMTAuMTI1IEwxMi43NSwxMC4xMjUgQzEzLjM3MTM3NSwxMC4xMjUgMTMuODc1LDkuNjIxMzc1IDEzLjg3NSw5IEMxMy44NzUsOC4zNzkgMTMuMzcxMzc1LDcuODc1IDEyLjc1LDcuODc1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogIDwvZz4KPC9zdmc+), auto"

      let srcset = i.attributes.getNamedItem("srcset").value
      let originalSrc = srcset && srcset.split(", ").map(src => (src.split(" ")[0])).pop()
      if (originalSrc) {
        let img = new window.Image()
        img.src = originalSrc
        img.style.position = "fixed"
        img.style.left = img.style.top = "5%"
        img.style.maxWidth = img.style.maxHeight = "90%"
        img.style.zIndex = 10086
        img.style.cursor = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxnIGlkPSJtYWduaWZ5aW5nX2dsYXNzX21pbnVzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0yMy4zNDExMjUsMjAuMTU5MjUgTDE2Ljc0Njc1LDEzLjU2NDg3NSBDMTcuNTM4LDEyLjIyNTc1IDE4LDEwLjY2ODM3NSAxOCw5IEMxOCw0LjAyOTM3NSAxMy45NzA2MjUsMCA5LDAgQzQuMDI5Mzc1LDAgMCw0LjAyOTM3NSAwLDkgQzAsMTMuOTcwNjI1IDQuMDI5Mzc1LDE4IDksMTggQzEwLjY2ODM3NSwxOCAxMi4yMjU3NSwxNy41MzggMTMuNTY0ODc1LDE2Ljc0Njc1IEwyMC4xNTkyNSwyMy4zNDA3NSBDMjAuNTY2MTI1LDIzLjc0ODM3NSAyMS4xMjg2MjUsMjQgMjEuNzUsMjQgQzIyLjk5Mjc1LDI0IDI0LDIyLjk5Mjc1IDI0LDIxLjc1IEMyNCwyMS4xMjg2MjUgMjMuNzQ4LDIwLjU2NjEyNSAyMy4zNDExMjUsMjAuMTU5MjUgWiBNOSwxNS43NSBDNS4yNzIxMjUsMTUuNzUgMi4yNSwxMi43Mjc4NzUgMi4yNSw5IEMyLjI1LDUuMjcyMTI1IDUuMjcyMTI1LDIuMjUgOSwyLjI1IEMxMi43Mjc4NzUsMi4yNSAxNS43NSw1LjI3MjEyNSAxNS43NSw5IEMxNS43NSwxMi43Mjc4NzUgMTIuNzI3ODc1LDE1Ljc1IDksMTUuNzUgWiBNMTIuNzUsNy44NzUgTDUuMjUsNy44NzUgQzQuNjI4NjI1LDcuODc1IDQuMTI1LDguMzc4NjI1IDQuMTI1LDkgQzQuMTI1LDkuNjIxMzc1IDQuNjI4NjI1LDEwLjEyNSA1LjI1LDEwLjEyNSBMMTIuNzUsMTAuMTI1IEMxMy4zNzEzNzUsMTAuMTI1IDEzLjg3NSw5LjYyMTM3NSAxMy44NzUsOSBDMTMuODc1LDguMzc5IDEzLjM3MTM3NSw3Ljg3NSAxMi43NSw3Ljg3NSBaIiBpZD0iU2hhcGUiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICA8L2c+Cjwvc3ZnPg==), auto"

        img.addEventListener("click", () => {
          document.body.removeChild(img)
        })

        i.addEventListener("click", () => {
          document.body.appendChild(img)
        })
      }
    })
  }
}

然后在 main.js 中引入并注冊(cè) directive：

import SrcSet from "./SrcSet"
Vue.directive("srcset", SrcSet)

最后，在需要用到的地方，添加 v-srcset 指令

。

效果：

原 post 內(nèi)容：

點(diǎn)擊圖片后：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86699.html

相關(guān)文章

  • WordPress REST API的基本使用

    摘要：所以通常使用這種易于編寫(xiě)閱讀解析的數(shù)據(jù)格式規(guī)范來(lái)進(jìn)行數(shù)據(jù)通信。插件地址安裝啟用后，除了已經(jīng)登陸的管理員，其他用戶(hù)無(wú)權(quán)限訪問(wèn)數(shù)據(jù)。 WordPress系統(tǒng)默認(rèn)開(kāi)放REST API，也就是說(shuō)，除了以HTML格式輸出內(nèi)容， 還可以以JSON格式輸出文章/用戶(hù)/評(píng)論等數(shù)據(jù)。 之所以支持JSON數(shù)據(jù)格式響應(yīng)，是由于目前各種智能終端設(shè)備，如手機(jī)/平板/電視/路由器/家電/玩具等， 都要與云端服務(wù)器...

    fancyLuo 評(píng)論0 收藏0

  • 收集整理適用博客建站免費(fèi)開(kāi)源Wordpress主題-簡(jiǎn)約好看的WP主題

    摘要：最重要的就是找一個(gè)適合自己的主題了。事實(shí)上，免費(fèi)主題也非常多，而且很多的免費(fèi)主題在功能上和界面美觀上已經(jīng)大大超過(guò)了付費(fèi)的主題。加上這些主題都是開(kāi)源的，基本上可以在上找得到源碼，安全性是沒(méi)有問(wèn)題，主題的作者也在不斷更新當(dāng)中。WordPress最重要的就是找一個(gè)適合自己的主題了。好一點(diǎn)的WordPress主題基本上都是要收費(fèi)的，而且價(jià)格還不便宜，這導(dǎo)致了不少的新手朋友們很為難。而有時(shí)我們僅僅根據(jù)...

    番茄西紅柿 評(píng)論0 收藏2637

  • vuejs2 + wp-rest-api開(kāi)發(fā)web app

    摘要：之前我寫(xiě)了一篇利用，與制作一個(gè)屬于自己博客的移動(dòng)，使用的是的方式進(jìn)行的開(kāi)發(fā)，今天我就說(shuō)一下使用與開(kāi)發(fā)一個(gè)的方法。 之前我寫(xiě)了一篇《利用Cordova，jqurey與wp-rest-api制作一個(gè)屬于自己博客的移動(dòng)APP》，使用的是jQuery mobile的方式進(jìn)行web app的開(kāi)發(fā)，今天我就說(shuō)一下使用vuejs 與 wp-reset-api開(kāi)發(fā)一個(gè)web app的方法。先看看做好以...

    djfml 評(píng)論0 收藏0

  • Vue 實(shí)現(xiàn)的音樂(lè)項(xiàng)目 music app 知識(shí)點(diǎn)總結(jié)分享

    摘要：后兩個(gè)屬性可選。屬性定義了項(xiàng)目的縮小比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。它的默認(rèn)值為，即項(xiàng)目的本來(lái)大小。結(jié)合的異步組件和的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。 項(xiàng)目總結(jié) 這是我第二個(gè)用 Vue 實(shí)現(xiàn)的項(xiàng)目，下面內(nèi)容包括了在實(shí)現(xiàn)過(guò)程中所記錄的知識(shí)點(diǎn)以及一些小技巧 項(xiàng)目演示地址：https://music-vue.n-y.io源...

    meteor199 評(píng)論0 收藏0

  • quill深入淺出

    摘要：與的關(guān)系既是表達(dá)文檔，又表達(dá)文檔修改。然后會(huì)監(jiān)聽(tīng)事件，然后觸發(fā)的方法，傳入?yún)?shù)，然后在的方法中，會(huì)依據(jù)構(gòu)建出對(duì)應(yīng)的數(shù)組，與已有的合并，使當(dāng)前保持最新。 背景分析/技術(shù)選型 quillAPI驅(qū)動(dòng)設(shè)計(jì),自定義內(nèi)容和格式化,跨平臺(tái),易用. CKEditor功能強(qiáng)，配置靈活，ui漂亮，兼容性差 TinyMCE文檔好，功能強(qiáng)，bug少，無(wú)外部依賴(lài)。 UEditor功能齊全，但是不維護(hù)了，依賴(lài)j...

    hlcfan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<