需求:
点击小图可以放大,放大后,通过手势等比例放大缩小、左右切换图、旋转、关闭。由于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]';
}
下一篇:zabbix监控网络连接状态