组件目录结构如下：

options.ts文件用来存储配置文件， 代码如下：

import {isFirefox} from './tools';

export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clocelise' | 'anticlocelise';

export const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';

// 键盘按键值
export const EVENT_CODE = {
  space: "Space",
  left: "ArrowLeft", // 37
  up: "ArrowUp", // 38
  right: "ArrowRight", // 39
  down: "ArrowDown", // 40
  esc: "Escape",
};

// icon对应的svg
export const ICON_SVG = {
  close: `<svg t="1628759850204" viewBox="0 0 1024 1024" width="24" height="24"><path d="M764 215.008L512 467.008 260 215.008q-10.016-8.992-22.496-8.992t-22.016 9.504-9.504 22.016 8.992 22.496l252 252-252 252q-12.992 12.992-8.512 31.008t22.016 22.496 31.488-8.512l252-252 252 252q10.016 8.992 22.496 8.992t22.016-9.504 9.504-22.016-8.992-22.496L556.992 512l252-252q12.992-12.992 8.512-31.008t-22.496-22.496-31.008 8.512z" p-id="3923" fill="#ffffff"></path></svg>`,
  arrowLeft: '<svg t="1628762138411" viewBox="0 0 1024 1024" width="24" height="24"><path d="M608.992 148.992L277.984 489.984q-8.992 8.992-8.992 21.504t8.992 22.496l331.008 340.992q8.992 8 20.992 8t20.992-8.992 8.992-20.992-8.992-20.992l-312-320 312-320q8.992-8.992 8.992-20.992t-8.992-20.992-20.992-8.992-20.992 8z" p-id="5372" fill="#ffffff"></path></svg>',
  arrowRight: '<svg t="1628762150860" viewBox="0 0 1024 1024" width="24" height="24"><path d="M340.992 148.992q-8.992 10.016-8.992 22.016t8.992 20.992l312 320-312 320q-8.992 8.992-8.992 20.992t8.992 20.992 20.992 8.992 20.992-8l331.008-340.992q8.992-8.992 8.992-22.016t-8.992-22.016L382.976 148.96q-8.992-8-20.992-8t-20.992 8z" p-id="5663" fill="#ffffff"></path></svg>',
  zoomOut: '<svg t="1628761969296" viewBox="0 0 1024 1024" width="24" height="24"><path d="M796 751.008l124.992 124.992q8.992 10.016 8.992 22.496t-9.504 22.016-22.016 9.504-22.496-8.992l-124.992-124.992q-132.992 108.992-295.008 99.488t-280.992-132.512q-114.016-128.992-111.008-291.008t122.016-286.016q124-119.008 286.016-122.016t291.008 111.008q123.008 119.008 132.512 280.992t-99.488 295.008zM480 832q150.016-4 248.992-103.008T832 480q-4-150.016-103.008-248.992T480 128q-150.016 4-248.992 103.008T128 480q4 150.016 103.008 248.992T480 832z m-128-384h256q14.016 0 23.008 8.992T640 480t-8.992 23.008T608 512h-256q-14.016 0-23.008-8.992T320 480t8.992-23.008T352 448z" p-id="4889" fill="#ffffff"></path></svg>',
  zoomIn: '<svg t="1628761724109" viewBox="0 0 1024 1024" width="24" height="24"><path d="M796 751.008l124.992 124.992q8.992 10.016 8.992 22.496t-9.504 22.016-22.016 9.504-22.496-8.992l-124.992-124.992q-132.992 108.992-295.008 99.488t-280.992-132.512q-114.016-128.992-111.008-291.008t122.016-286.016q124-119.008 286.016-122.016t291.008 111.008q123.008 119.008 132.512 280.992t-99.488 295.008zM480 832q150.016-4 248.992-103.008T832 480q-4-150.016-103.008-248.992T480 128q-150.016 4-248.992 103.008T128 480q4 150.016 103.008 248.992T480 832z m-32-384v-96q0-14.016 8.992-23.008T480 320t23.008 8.992T512 352v96h96q14.016 0 23.008 8.992T640 480t-8.992 23.008T608 512h-96v96q0 14.016-8.992 23.008T480 640t-23.008-8.992T448 608v-96h-96q-14.016 0-23.008-8.992T320 480t8.992-23.008T352 448h96z" p-id="4358" fill="#ffffff"></path></svg>',
  original: '<svg t="1628762365130" viewBox="0 0 1024 1024" width="24" height="24"><path d="M812.992 180.992q26.016 0 43.008 16.992t16.992 43.008v482.016q0 24.992-17.504 42.496t-42.496 17.504H210.976q-24.992 0-42.496-17.504t-17.504-42.496V240.992q0-26.016 16.992-43.008t43.008-16.992h602.016z m0-60.992H210.976q-24 0.992-46.016 10.016t-39.008 26.016-26.496 39.008-9.504 46.016v482.016q0 24 9.504 46.016t26.496 39.008 39.008 26.016 46.016 8.992h602.016q24 0 46.016-8.992t39.008-26.016 26.496-39.008 9.504-46.016V241.056q0-24-9.504