html 移动端缩小显示图片,Vue移动端可放大缩小图片vue-photo-preview

效果

与本文无关样式已马赛克

点击图片后：

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

使用插件

一、安装

npm install vue-photo-preview --save

二、引用

在view.vue中的中引用：

import Vue from "vue";

import preview from "vue-photo-preview";

import "vue-photo-preview/dist/skin.css";

Vue.use(preview);

export default {

name: "view",

// ....

}

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

步骤：

异步获取到文章内容

找到文章内容里的所有图片dom节点(通过ref来获取)

给图片dom节点都加上属性preview(使用序号来定义)，属性preview-text(使用图片名字来定义，图片的alt属性有)

调用this.$previewRefresh();

完整代码：

{{ note.title }}

import Vue from "vue";

import preview from "vue-photo-preview";

import "vue-photo-preview/dist/skin.css";

Vue.use(preview);

// 引入与后台数据交互的封装后的api

import { Document_ap } from "@/api";

export default {

name: "view",

data() {

return {

note: {

title: '',

content: ''

}

}

},

created() {

// 获取页面数据，写死id为1

this.getNote(1);

},

methods: {

async getNote(id) {

const params = {

Guid: id

};

const res = await Document_api.getDocumentDetail(params);

// 如果交互成功

if (res.data.Code === 0) {

this.note = res.data.Result;

// 重点来了！要写在回调函数里

setTimeout(() => {

// 获取到所有图片dom节点

const imgs = this.$refs.content.getElementsByTagName("img");

for (let i = 0; i < imgs.length; i++) {

const img = imgs[i];

// console.log(img)

// 给图片加上preview、preview-text属性，例如：

img.setAttribute("preview", i);

img.setAttribute("preview-text", img.getAttribute("alt"));

this.$previewRefresh();

}

}, 500);

}

}

}