效果
与本文无关样式已马赛克
点击图片后：
可通过手指来放大缩小查看图片
使用插件
一、安装
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);
}
}
}
