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();

完整代码：

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);

}

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

移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动思路1:移动放大缩小操作都直接放到图片上面图片的放大缩小使用transform的scale属性操作,移动使用tran ...
vue动效：放大缩小与上下移动
vue动效:放大缩小与上下移动标题: Vue动效技巧:流畅放大缩小与优雅上下移动在现代Web开发中,Vue.js已经成为了最受欢迎的JavaScript框架之一.它的简洁性和灵活性使得开发人员能够 ...
javascript实现对图片的随意拖拽,放大缩小
[JS]基于javascript实现对图片的随意拖拽,放大缩小最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢 ...
css鼠标图片hover移入移出缓慢放大缩小
css鼠标图片hover移入移出缓慢放大缩小 /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */.image{width: 10 ...
[css] 如何做图片预览，如何放大一个图片？
[css] 如何做图片预览,如何放大一个图片? 图片不跨域的话用 canvas 来 drawImage 放大裁剪也可以. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
vue图片查看器，支持放大缩小还原
Vue中使用图片查看器如何使用项目中使用的是 vue + element-ui 要求查看图片时能够实现图片放大缩小翻转等功能,于是找到一个适合的插件,首先看下效果: 功能与我们设想的一样,下面看 ...
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
前言: openlayers中渲染图片是有多种方法的, Icon ,Image 等等都可以实现将图片放到地图上面,但是操作图片的话,方法比较少了,这里是配合 ol-ext 来实现的. 相关资料: 1. ...
android 自定义ImageView实现图片手势滑动多点触摸放大缩小效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转自:h ...
Qt图片交互——QGraphicsView+鼠标选点+放大缩小+OpenCV
1.功能目标通过 QGraphicsView 实现 OpenCV Mat 的显示,并且可以响应鼠标事件,绘制选择的点,同时可以进行放大缩小操作. 备注:QLabel 也能够完成同样的操作,但是QLa ...
前端图片拖拽，滚轮放大缩小
拖拽 var offX = 0,offY = 0; onMouseDown(ev) {var svgId = document.getElementById("svgId");sv ...

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

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

最新文章

热门文章