{"id":22489490,"url":"https://github.com/XiongAmao/vue-easy-lightbox","last_synced_at":"2025-08-02T21:32:51.993Z","repository":{"id":41243297,"uuid":"120056380","full_name":"XiongAmao/vue-easy-lightbox","owner":"XiongAmao","description":"A tiny lightbox component for Vue.js 3.0 :tada::tada: https://xiongamao.github.io/vue-easy-lightbox/","archived":false,"fork":false,"pushed_at":"2024-04-03T11:58:42.000Z","size":3293,"stargazers_count":392,"open_issues_count":17,"forks_count":65,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-18T00:41:35.604Z","etag":null,"topics":["image","images","lightbox","viewer","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XiongAmao.png","metadata":{"files":{"readme":"README-CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-03T03:36:33.000Z","updated_at":"2024-06-18T12:32:09.018Z","dependencies_parsed_at":"2023-12-23T04:23:53.104Z","dependency_job_id":"7b6ee7fe-365e-4f80-93d1-418105cf2ae0","html_url":"https://github.com/XiongAmao/vue-easy-lightbox","commit_stats":{"total_commits":325,"total_committers":8,"mean_commits":40.625,"dds":0.03384615384615386,"last_synced_commit":"073681273cb6e999aef4853b4ac1a438eb9df3cd"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiongAmao%2Fvue-easy-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiongAmao%2Fvue-easy-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiongAmao%2Fvue-easy-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiongAmao%2Fvue-easy-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XiongAmao","download_url":"https://codeload.github.com/XiongAmao/vue-easy-lightbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500262,"owners_count":17930026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","images","lightbox","viewer","vue"],"created_at":"2024-12-06T17:19:57.610Z","updated_at":"2024-12-06T17:22:22.146Z","avatar_url":"https://github.com/XiongAmao.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-easy-lightbox\n\n\u003e 基于Vue.js 3.0 与 TypeScript 构建的图片阅览插件， 提供了旋转、放大、拖拽功能。可自定义各种功能。\n\n[![npm](https://img.shields.io/npm/v/vue-easy-lightbox.svg)](https://www.npmjs.com/package/vue-easy-lightbox)\n[![npm](https://img.shields.io/npm/l/vue-easy-lightbox.svg)](https://www.npmjs.com/package/vue-easy-lightbox)\n[![npm](https://img.badgesize.io/https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.esm.min.js?compression=gzip\u0026style=flat-square\u0026label=gzip%20size\u0026color=#4fc08d)](https://www.npmjs.com/package/vue-easy-lightbox)\n\n\n简体中文 | [English](https://github.com/XiongAmao/vue-easy-lightbox) | [Homepage](https://xiongamao.github.io/vue-easy-lightbox/)\n\n\u003e `Vue-easy-lightbox@1.x` 只支持Vue.js 3, 如果你需要使用Vue.js 2版本，请点击[这里](https://github.com/XiongAmao/vue-easy-lightbox/tree/vue2.x)查看.\n\n## 安装\n\n### 包管理器\n\n```shell\n$ npm install --save vue-easy-lightbox@next\n# OR\n$ yarn add vue-easy-lightbox@next\n```\n\n### 直接下载\n\n在html中直接引入CDN链接文件。\n\n```html\n\u003cscript src=\"https://unpkg.com/vue@next\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const app = Vue.createApp({\n    // ... 根组件选项\n  })\n  app.use(VueEasyLightbox) // 全局变量\n  app.mount('#app')\n\u003c/script\u003e\n```\n\n### 不同构建版本的区别\n\n由于 `Vue 3.x` 使用 `ES2015` ([docs faq](https://staging-cn.vuejs.org/about/faq.html#what-browsers-does-vue-support)), 不再需要构建`ES5`版本，`1.6.0`版本开始不再提供`ES5`构建包.\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eModule\u003c/th\u003e\n      \u003cth\u003eFilename\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eUMD(for browsers)\u003c/td\u003e\n      \u003ctd\u003evue-easy-lightbox.umd.min.js\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCommonJS\u003c/td\u003e\n      \u003ctd\u003evue-easy-lightbox.common.min.js (pkg.main)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eES Module(for bundlers)\u003c/td\u003e\n      \u003ctd\u003evue-easy-lightbox.esm.min.js (pkg.module)\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### 单独导入CSS文件\n\n\u003e Added in: `v1.2.3`\n\n默认情况下， CSS被包含在了  `dist/*.min.js`. 在一些特殊情况，你可能需要单独引入CSS文件来避免一些问题 ([CSP Violation](https://github.com/XiongAmao/vue-easy-lightbox/issues/75)). 你可以从`dist/external-css/`导入不包含CSS的构建文件和单独的样式文件.\n\n```js\nimport VueEasyLightbox from 'vue-easy-lightbox/external-css'\n// or\nimport VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'\n\n// 单独引入组件样式\nimport 'vue-easy-lightbox/external-css/vue-easy-lightbox.css'\n// or\nimport 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.css'\n```\n\n#### TypeScript Checking error:\n\n如果你使用TypeScript，并遇到了以下报错：\n\n\u003e `Could not find the declaration file for module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'`\n\n这里有两种办法解决这个问题\n\n方法 1: 项目本地添加 `d.ts`，补充模块信息:\n```ts\ndeclare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' {\n  import VueEasyLightbox from 'vue-easy-lightbox'\n  export * from 'vue-easy-lightbox'\n  export default VueEasyLightbox\n}\n```\n\n方法 2:\n如果你使用的是Webpack工程，参考以下方法:  [webpack alias docs](https://webpack.js.org/configuration/resolve/#resolvealias)\n\n```js\n// wepback.config.js\nmodule.exports = {\n  //...\n  resolve: {\n    alias: {\n      'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js',\n    },\n  },\n};\n\n// in your component\nimport VueEasyLightbox from 'vue-easy-lightbox' // work\n```\n\nor vitejs: [vitejs alias](https://cn.vitejs.dev/config/shared-options.html#resolve-alias)\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'\n    }\n  }\n})\n```\n\n## 使用方式\n\n### HTML中使用 `UMD` 包导入\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cscript src=\"https://unpkg.com/vue@next\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\n      \u003cdiv class=\"\"\u003e\n        \u003cdiv v-for=\"(src, index) in imgs\" :key=\"index\" class=\"pic\" @click=\"() =\u003e showImg(index)\"\u003e\n          \u003cimg :src=\"src\" /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cvue-easy-lightbox :visible=\"visibleRef\" :imgs=\"imgs\" :index=\"indexRef\" @hide=\"onHide\"\u003e\u003c/vue-easy-lightbox\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n      const { ref } = Vue\n      const app = Vue.createApp({\n        setup() {\n          const visibleRef = ref(false)\n          const indexRef = ref(0)\n          const imgs = [\n            'https://via.placeholder.com/450.png/',\n            'https://via.placeholder.com/300.png/',\n            'https://via.placeholder.com/150.png/',\n            { src: 'https://via.placeholder.com/450.png/', title: 'this is title' }\n          ]\n          const showImg = (index) =\u003e {\n            indexRef.value = index\n            visibleRef.value = true\n          }\n          const onHide = () =\u003e visibleRef.value = false\n          return {\n            visibleRef,\n            indexRef,\n            imgs,\n            showImg,\n            onHide\n          }\n        }\n      })\n      // 注册全局组件\n      app.use(VueEasyLightbox)\n      app.mount('#app')\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 注册VueApp组件\n\n```javascript\nimport Vue from 'vue'\nimport VueEasyLightbox from 'vue-easy-lightbox'\n\nconst app = Vue.createApp({\n  // ... 根组件选项\n})\napp.use(VueEasyLightbox)\napp.mount('#app')\n```\n\n#### 单文件组件中使用\n\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"showSingle\"\u003eShow single picture.\u003c/button\u003e\n    \u003cbutton @click=\"showMultiple\"\u003eShow a group of pictures.\u003c/button\u003e\n\n    \u003cvue-easy-lightbox\n      :visible=\"visibleRef\"\n      :imgs=\"imgsRef\"\n      :index=\"indexRef\"\n      @hide=\"onHide\"\n    \u003e\u003c/vue-easy-lightbox\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// 如果VueApp已经注册组件，则这里不需要单独引入\nimport VueEasyLightbox from 'vue-easy-lightbox'\nimport { ref, defineComponent } from 'vue'\n\nexport default defineComponent({\n  components: {\n    VueEasyLightbox\n  },\n  setup() {\n    const visibleRef = ref(false)\n    const indexRef = ref(0) // default 0\n    const imgsRef = ref([])\n    // Img Url , string or Array of string\n    // ImgObj { src: '', title: '', alt: '' }\n    // 'src' 是必须值\n    // 允许混合\n\n    const onShow = () =\u003e {\n      visibleRef.value = true\n    }\n    const showSingle = () =\u003e {\n      imgsRef.value = 'http://via.placeholder.com/350x150'\n      // or\n      // imgsRef.value  = {\n      //   title: 'this is a placeholder',\n      //   src: 'http://via.placeholder.com/350x150'\n      // }\n      onShow()\n    }\n    const showMultiple = () =\u003e {\n      imgsRef.value = [\n        'http://via.placeholder.com/350x150',\n        'http://via.placeholder.com/350x150'\n      ]\n      // or\n      // imgsRef.value = [\n      //   { title: 'test img', src: 'http://via.placeholder.com/350x150' },\n      //   'http://via.placeholder.com/350x150'\n      // ]\n      indexRef.value = 0 // 图片顺序索引\n      onShow()\n    }\n    const onHide = () =\u003e (visibleRef.value = false)\n\n    return {\n      visibleRef,\n      indexRef,\n      imgsRef,\n      showSingle,\n      showMultiple,\n      onHide\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n\n### 使用slot定制你的按钮或者工具栏\n\n```html\n\u003cvue-easy-lightbox\n  ...\n\u003e\n  \u003ctemplate v-slot:prev-btn=\"{ prev }\"\u003e\n    \u003cbutton @click=\"prev\"\u003e上一张\u003c/button\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate v-slot:next-btn=\"{ next }\"\u003e\n    \u003cbutton @click=\"next\"\u003e下一张\u003c/button\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate v-slot:close-btn=\"{ close }\"\u003e\n    \u003cbutton @click=\"close\"\u003e关闭\u003c/button\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate v-slot:toolbar=\"{ toolbarMethods }\"\u003e\n    \u003cbutton @click=\"toolbarMethods.zoomIn\"\u003e放大图片\u003c/button\u003e\n    \u003cbutton @click=\"toolbarMethods.zoomOut\"\u003e缩小图片\u003c/button\u003e\n    \u003cbutton @click=\"toolbarMethods.rotateLeft\"\u003e逆时针旋转\u003c/button\u003e\n    \u003cbutton @click=\"toolbarMethods.rotateRight\"\u003e顺时针旋转\u003c/button\u003e\n  \u003c/template\u003e\n\u003c/vue-easy-lightbox\u003e\n```\n\n参考：[插槽 - Vue.js](https://staging-cn.vuejs.org/guide/components/slots.html)\n\n### 组合式函数 Composables\n\n\u003e Added in `v1.7.0`\n\n`useEasyLightbox` 提供了一些简单的方法和state，方便你使用`setup()`。\n这个composable是可选的。你可以自定义自己的状态和方法。\n\nUsage:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"show\"\u003eshow\u003c/button\u003e\n    \u003cvue-easy-lightbox\n      :visible=\"visibleRef\"\n      :imgs=\"imgsRef\"\n      :index=\"indexRef\"\n      @hide=\"onHide\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { defineComponent } from 'vue'\nimport VueEasyLightbox, { useEasyLightbox } from 'vue-easy-lightbox'\n\nexport default defineComponent({\n  components: {\n    VueEasyLightbox\n  },\n  setup() {\n    const {\n      // methods\n      show, onHide, changeIndex,\n      // refs\n      visibleRef, indexRef, imgsRef\n    } = useEasyLightbox({\n      // src / src[]\n      imgs: [\n        'http://via.placeholder.com/250x150',\n        'http://via.placeholder.com/300x150',\n        'http://via.placeholder.com/350x150'\n      ],\n      // initial index\n      initIndex: 0\n    })\n\n    return {\n      visibleRef,\n      indexRef,\n      imgsRef,\n      show,\n      onHide\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n#### Type declaration\n\n```ts\nexport interface Img {\n  src?: string\n  title?: string\n  alt?: string\n}\nexport interface UseEasyLightboxOptions {\n  /**\n   * image src/Img or list of images src/Img\n   * @default ''\n   */\n  imgs: Img | string | (Img | string)[];\n  /**\n   * initial index of imgList\n   * @default 0\n   */\n  initIndex?: number;\n}\nexport declare const useEasyLightbox: (options: UseEasyLightboxOptions) =\u003e {\n  imgsRef: Ref\u003cImg | string | (Img | string)[]\u003e;\n  indexRef: Ref\u003cnumber | undefined\u003e;\n  visibleRef: Ref\u003cboolean\u003e;\n  show: (index?: Ref\u003cnumber\u003e | number | Event) =\u003e void;\n  onHide: () =\u003e void;\n  changeIndex: (index?: number) =\u003e void;\n};\n```\n\n## 配置项\n\nProps\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e属性\u003c/th\u003e\n      \u003cth\u003e类型\u003c/th\u003e\n      \u003cth\u003e默认值\u003c/th\u003e\n      \u003cth\u003e说明\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evisible\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003erequired\u003c/td\u003e\n      \u003ctd\u003e控制组件的显示\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eimgs\u003c/td\u003e\n      \u003ctd\u003eString/String[]/ImgObject:{ src: string, title?: string, alt?: string }/ImgObject[]\u003c/td\u003e\n      \u003ctd\u003erequired\u003c/td\u003e\n      \u003ctd\u003e图片的src字符串或图片对象(地址和标题) { src, title?, alt? }，传入数组则可以轮播显示\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eindex\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003e打开图片组时，展示索引位置的图片\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eloop\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e允许循环切换图片\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003escrollDisabled (scroll-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003e传true时，禁用背景滚动\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eescDisabled (esc-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e默认情况下，展示时按下esc键关闭Modal\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emoveDisabled (move-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e传true时，禁用拖动图片功能，并启用swipe功能\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003erotateDisabled (rotate-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e传true时，禁用图片旋转功能\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoomDisabled (zoom-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e传true时，禁用图片缩放功能\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epinchDisabled (pinch-disabled)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e传true时，禁用双指触摸缩放功能\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaskClosable (mask-closable)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003e控制点击蒙板关闭预览.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edblclickDisabled (dblclick-closable)\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e控制双击缩放功能.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eteleport\u003c/td\u003e\n      \u003ctd\u003estring | Element\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n      \u003ctd\u003e指定挂载的节点\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eswipeTolerance (swipe-tolerance)\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e50\u003c/td\u003e\n      \u003ctd\u003e指定swipe距离，单位为px\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoomScale\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0.12\u003c/td\u003e\n      \u003ctd\u003e指定缩放步进的比例\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxZoom\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e3\u003c/td\u003e\n      \u003ctd\u003e指定图片最大缩放比例\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eminZoom\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0.1\u003c/td\u003e\n      \u003ctd\u003e指定图片最小缩放比例.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ertl\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003e指定RTL布局\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nEvent\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e事件名\u003c/th\u003e\n      \u003cth\u003e说明\u003c/th\u003e\n      \u003cth\u003e返回值\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ehide\u003c/td\u003e\n      \u003ctd\u003e当点击遮罩或者关闭按钮时，会触发该事件\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eon-error\u003c/td\u003e\n      \u003ctd\u003e图片加载错误，触发error事件\u003c/td\u003e\n      \u003ctd\u003eevent (event.target 不是实际展示的图片)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eon-prev / \u003cbr\u003e on-prev-click\u003c/td\u003e\n      \u003ctd\u003e切换上一张图片时触发\u003c/td\u003e\n      \u003ctd\u003e(oldIndex, newIndex)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eon-next / \u003cbr\u003e on-next-click\u003c/td\u003e\n      \u003ctd\u003e切换下一张图片时触发\u003c/td\u003e\n      \u003ctd\u003e(oldIndex, newIndex)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eon-index-change\u003c/td\u003e\n      \u003ctd\u003e当图片索引被改变时触发，比如点击或更改传给组件index\u003c/td\u003e\n      \u003ctd\u003e(oldIndex, newIndex)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eon-rotate\u003c/td\u003e\n      \u003ctd\u003e当图片旋转时触发事件\u003c/td\u003e\n      \u003ctd\u003edeg: number (顺时针角度)\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nSlot \u0026 Scoped Slot\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e名称\u003c/th\u003e\n      \u003cth\u003eslot props\u003c/th\u003e\n      \u003cth\u003eslot props 类型\u003c/th\u003e\n      \u003cth\u003e说明\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eprev-btn\u003c/td\u003e\n      \u003ctd\u003eprev\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e当点击时显示上一页\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enext-btn\u003c/td\u003e\n      \u003ctd\u003enext\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e当点击时显示下一页\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eclose-btn\u003c/td\u003e\n      \u003ctd\u003eclose\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e当点击时关闭弹窗\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etoolbar\u003c/td\u003e\n      \u003ctd\u003e\n          toolbarMethods: {\n            zoomIn,\n            zoomOut,\n            rotate(rotateLeft),\n            rotateLeft,\n            rotateRight\n          }\n      \u003c/td\u003e\n      \u003ctd\u003e{ Function }\u003c/td\u003e\n      \u003ctd\u003e放大、缩小、逆时针/顺时针旋转\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eloading\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n      \u003ctd\u003e加载图标\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonerror\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n      \u003ctd\u003e-\u003c/td\u003e\n      \u003ctd\u003e图片加载错误占位图\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXiongAmao%2Fvue-easy-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FXiongAmao%2Fvue-easy-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXiongAmao%2Fvue-easy-lightbox/lists"}