Vue 自定义 directive 实现点击放大显示 wordpress wp-json 接口获取的 post 内容中的图片

2019年9月18日 143次阅读 来源: KingMario

在做一个项目，需要从 wordpress 中通过 wp-json 接口获取 post 内容，然后用 v-html 显示出来，显示出来的内容中，图片大小都只有 300px 宽，原始图片较大，包含更多细节，因此希望能够实现点击放大查看图片细节。

仔细看了一下 post 内容的 html 代码中 img 元素本身的 src 属性指向的图片是 wordpress 经过缩放之后的图片，宽度只有 300px，细节丢失也较严重，同时这些 img 元素都有一个 srcset 属性，这个属性主要是用来在不同的移动设备中显示不同分辨率图片的，包含了不同分辨率的图片地址，因此想到能够通过这个属性来显示大图片。

下面是相关 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 中引入并注册 directive：

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

最后，在需要用到的地方，添加 v-srcset 指令 <div class="m-b-lg" v-html="post.content" v-srcset></div>。

效果：

原 post 内容：
《Vue 自定义 directive 实现点击放大显示 wordpress wp-json 接口获取的 post 内容中的图片》

点击图片后：
《Vue 自定义 directive 实现点击放大显示 wordpress wp-json 接口获取的 post 内容中的图片》

    原文作者：KingMario
    原文地址: https://segmentfault.com/a/1190000007961028
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞