vue后台实现点击图片放大
创始人
2024-03-03 00:58:51
0

需求:
点击小图可以放大,放大后,通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。
在这里插入图片描述

代码
父组件:


子组件
base/image/image-viewer.vue



dom.js

/* istanbul ignore next */import Vue from 'vue';const isServer = Vue.prototype.$isServer;
const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = isServer ? 0 : Number(document.documentMode);/* istanbul ignore next */
export const on = (function () {if (!isServer && document.addEventListener) {return function (element, event, handler) {if (element && event && handler) {element.addEventListener(event, handler, false);}};} else {return function (element, event, handler) {if (element && event && handler) {element.attachEvent('on' + event, handler);}};}
})();/* istanbul ignore next */
export const off = (function () {if (!isServer && document.removeEventListener) {return function (element, event, handler) {if (element && event) {element.removeEventListener(event, handler, false);}};} else {return function (element, event, handler) {if (element && event) {element.detachEvent('on' + event, handler);}};}
})();

/util.js

import Vue from 'vue';
import {isString,isObject
} from './types';const hasOwnProperty = Object.prototype.hasOwnProperty;export const isFirefox = function () {return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
};export const autoprefixer = function (style) {if (typeof style !== 'object') return style;const rules = ['transform', 'transition', 'animation'];const prefixes = ['ms-', 'webkit-'];rules.forEach(rule => {const value = style[rule];if (rule && value) {prefixes.forEach(prefix => {style[prefix + rule] = value;});}});return style;
};export function rafThrottle(fn) {let locked = false;return function (...args) {if (locked) return;locked = true;window.requestAnimationFrame(_ => {fn.apply(this, args);locked = false;});};
}

/types.js

export function isString(obj) {return Object.prototype.toString.call(obj) === '[object String]';
}
export function isObject(obj) {return Object.prototype.toString.call(obj) === '[object Object]';
}

相关内容

热门资讯

日本多名学校教职人员因性暴力或... 新华社东京12月22日电 据日本文部科学省22日公布的数据,日本2024财年(2024年4月至202...
俄罗斯免签政策落地!BLINB... 2025年12月1日起,俄罗斯对中国公民正式实施临时免签政策,有效期至2026年9月14日。持中国普...
【“粤车南下”首批4地私家车今... 【“粤车南下”首批4地私家车今起可驶入香港市区】今天(12月23日)零时,“粤车南下”驶入香港市区政...
2026年征兵报名通道已开启!... 广大适龄青年及家长朋友们: 2026年征兵工作全面展开,为使广大群众和应征青年及时了解征兵的政策规定...
海昌海洋公园(02255.HK... 海昌海洋公园(02255.HK)公布,公司于2025 年12月22日收到公司董事会主席、执行董事兼行...
“底线”从未动摇!个人信用如何... 央视网消息:中国人民银行12月22日发布一次性信用修复政策,符合相关条件的逾期信息,将不会在个人信用...
美国参议院Murphy:将通过... 美国参议院Murphy:将通过法律手段阻止美国总统特朗普针对风电场采取的命令。
“免申即享”,一次性信用修复政... 蓝鲸新闻12月22日讯(记者 严沁雯)个人信用重塑支持政策正式落地。12月22日,中国人民银行发布关...
一次性信用修复政策公布,将帮助... 新华社北京12月22日电题:一次性信用修复政策公布,将帮助哪些人重塑个人信用? 12月22日,中国人...
*ST惠程(002168)披露... 截至2025年12月22日收盘,*ST惠程(002168)报收于3.69元,较前一交易日上涨5.13...