Vue移动端可放大缩小图片vue-photo-preview

效果

与本文无关样式已马赛克

点击图片后:


可通过手指来放大缩小查看图片

使用插件

vue-photo-preview

一、安装

npm install vue-photo-preview --save

二、引用

view.vue中的中引用:


三、给异步获取到的文章内容里的图片加上功能插件

步骤:

  1. 异步获取到文章内容
  2. 找到文章内容里的所有图片dom节点(通过ref来获取)
  3. 给图片dom节点都加上属性preview(使用序号来定义),属性preview-text(使用图片名字来定义,图片的alt属性有)
  4. 调用this.$previewRefresh();

完整代码:




你可能感兴趣的:(Vue移动端可放大缩小图片vue-photo-preview)