{"id":13824406,"url":"https://github.com/mirari/vue3-viewer","last_synced_at":"2025-03-06T06:16:37.058Z","repository":{"id":37365003,"uuid":"372237480","full_name":"mirari/vue3-viewer","owner":"mirari","description":"Image viewer component for vue 3.x, supports rotation, scale, zoom and so on, based on viewer.js","archived":false,"fork":false,"pushed_at":"2024-11-02T02:13:14.000Z","size":22921,"stargazers_count":43,"open_issues_count":5,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T17:27:57.638Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/mirari.png","metadata":{"files":{"readme":"README.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":"2021-05-30T14:34:55.000Z","updated_at":"2024-12-30T10:15:18.000Z","dependencies_parsed_at":"2024-01-06T05:32:28.005Z","dependency_job_id":"a5632823-7ee5-4d16-a834-a7a187b1eef6","html_url":"https://github.com/mirari/vue3-viewer","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirari%2Fvue3-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirari","download_url":"https://codeload.github.com/mirari/vue3-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242157272,"owners_count":20081041,"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":[],"created_at":"2024-08-04T09:01:02.191Z","updated_at":"2025-03-06T06:16:37.032Z","avatar_url":"https://github.com/mirari.png","language":"Vue","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# v-viewer\n\nImage viewer component for vue, supports rotation, scale, zoom and so on, based on [viewer.js](https://github.com/fengyuanchen/viewerjs)\n\n[![npm version](https://img.shields.io/npm/v/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)\n[![language](https://img.shields.io/badge/language-Vue3-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)\n\n[![npm version](https://img.shields.io/npm/v/v-viewer/legacy.svg)](https://www.npmjs.com/package/v-viewer)\n[![language](https://img.shields.io/badge/language-Vue2-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)\n\n[![npm download](https://img.shields.io/npm/dw/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) \n\n## [v-viewer for vue2](https://github.com/mirari/v-viewer/tree/v2)\n\n## [Live demo](https://mirari.github.io/vue3-viewer/)\n\n## Quick Example\n\n- [directive](https://codepen.io/mirari/pen/yLMPPWy)\n- [component](https://codepen.io/mirari/pen/ZEeaaWZ)\n- [api](https://codepen.io/mirari/pen/qBrVpNV)\n- [thumbnail \u0026 source](https://codepen.io/mirari/pen/Vwpryax)\n- [viewer callback](https://codepen.io/mirari/pen/eYveypz)\n- [custom toolbar](https://codepen.io/mirari/pen/ZEXqyPq)\n- [filter images](https://codepen.io/mirari/pen/mdWqpwa)\n- [change images](https://codepen.io/mirari/pen/ExWbovw)\n\n## [中文文档](https://mirari.cc/posts/vue3-viewer)\n\n## Installation\n\nInstall from NPM\n\n```bash\nnpm install v-viewer viewerjs\n```\n\n## Usage\n\nTo use `v-viewer`, simply import it and the `css` file, and call `app.use()` to install.\n\nThe component, directive and api will be installed together in the global.\n\nTwo different API styles are both supported: **Options API** and **Composition API**.\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'viewerjs/dist/viewer.css'\nimport VueViewer from 'v-viewer'\nconst app = createApp(App)\napp.use(VueViewer)\napp.mount('#app')\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- directive --\u003e\n    \u003cdiv class=\"images\" v-viewer\u003e\n      \u003cimg v-for=\"src in images\" :key=\"src\" :src=\"src\"\u003e\n    \u003c/div\u003e\n    \u003c!-- component --\u003e\n    \u003cviewer :images=\"images\"\u003e\n      \u003cimg v-for=\"src in images\" :key=\"src\" :src=\"src\"\u003e\n    \u003c/viewer\u003e\n    \u003c!-- api --\u003e\n    \u003cbutton type=\"button\" @click=\"show\"\u003eClick to show\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c!-- Options API --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  export default defineComponent({\n    data() {\n      return {\n        images: [\n          \"https://picsum.photos/200/200\",\n          \"https://picsum.photos/300/200\",\n          \"https://picsum.photos/250/200\"\n        ]\n      }\n    },\n    methods: {\n      show() {\n        this.$viewerApi({\n          images: this.images\n        })\n      }\n    }\n  })\n\u003c/script\u003e\n\u003c!-- Composition API --\u003e\n\u003c!-- \u003cscript lang=\"ts\" setup\u003e\n  import { api as viewerApi } from 'v-viewer'\n  const images = [\n    \"https://picsum.photos/200/200\",\n    \"https://picsum.photos/300/200\",\n    \"https://picsum.photos/250/200\"\n  ]\n  const show = () =\u003e {\n    viewerApi({\n      images\n    })\n  }\n\u003c/script\u003e --\u003e\n```\n\n### Support UMD\n\n#### Browser\n\n```html\n\u003clink href=\"//unpkg.com/viewerjs/dist/viewer.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"//unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/viewerjs/dist/viewer.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/v-viewer/dist/index.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  app.use(VueViewer.default)\n\u003c/script\u003e\n```\n\n#### CommonJS\n\n```javascript\nvar VueViewer = require('VueViewer')\n```\n\n#### AMD\n\n```javascript\nrequire(['VueViewer'], function (VueViewer) {});\n```\n\n### Usage of directive\n\nJust add the directive `v-viewer` to any element, then all `img` elements in it will be handled by `viewer`.\n\nYou can set the options like this: `v-viewer=\"{inline: true}\"`\n\nGet the element by selector and then use `el.$viewer` to get the `viewer` instance if you need.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"images\" v-viewer=\"{movable: false}\"\u003e\n      \u003cimg v-for=\"src in images\" :src=\"src\" :key=\"src\"\u003e\n    \u003c/div\u003e\n    \u003cbutton type=\"button\" @click=\"show\"\u003eShow\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c!-- Options API --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  import 'viewerjs/dist/viewer.css'\n  import { directive as viewer } from \"v-viewer\"\n  export default defineComponent({\n    directives: {\n      viewer: viewer({\n        debug: true\n      })\n    },\n    data() {\n      return {\n        images: [\n          \"https://picsum.photos/200/200\",\n          \"https://picsum.photos/300/200\",\n          \"https://picsum.photos/250/200\"\n        ]\n      }\n    },\n    methods: {\n      show () {\n        const viewer = this.$el.querySelector('.images').$viewer\n        viewer.show()\n      }\n    }\n  })\n\u003c/script\u003e\n\u003c!-- Composition API --\u003e\n\u003c!-- \u003cscript lang=\"ts\" setup\u003e\n  import 'viewerjs/dist/viewer.css'\n  import { directive as viewer } from \"v-viewer\"\n  const vViewer = viewer({\n    debug: true\n  })\n  const images = [\n    \"https://picsum.photos/200/200\",\n    \"https://picsum.photos/300/200\",\n    \"https://picsum.photos/250/200\"\n  ]\n  const show = () =\u003e {\n    const viewer = document.querySelector('.images').$viewer\n    viewer.show()\n  }\n\u003c/script\u003e --\u003e\n```\n\n#### Directive modifiers\n\n##### static\n\nThe `viewer` instance will be created only once after the directive binded.\n\nIf you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.\n\n```vue\n\u003cdiv class=\"images\" v-viewer.static=\"{inline: true}\"\u003e\n  \u003cimg v-for=\"src in images\" :src=\"src\" :key=\"src\"\u003e\n\u003c/div\u003e\n```\n\n##### rebuild\n\nThe `viewer` instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.\n\nIf you encounter any display problems, try rebuilding instead of updating.\n\n```vue\n\u003cdiv class=\"images\" v-viewer.rebuild=\"{inline: true}\"\u003e\n  \u003cimg v-for=\"src in images\" :src=\"src\" :key=\"src\"\u003e\n\u003c/div\u003e\n```\n\n### Usage of component\n\nYou can simply import the component and register it locally too.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cviewer :images=\"images\"\n            @inited=\"inited\"\n            class=\"viewer\"\n            ref=\"viewer\"\n            \u003e\n      \u003ctemplate #default=\"scope\"\u003e\n        \u003cimg v-for=\"src in scope.images\" :src=\"src\" :key=\"src\"\u003e\n        {{scope.options}}\n      \u003c/template\u003e\n    \u003c/viewer\u003e\n    \u003cbutton type=\"button\" @click=\"show\"\u003eShow\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c!-- Options API --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  import 'viewerjs/dist/viewer.css'\n  import { component as Viewer } from \"v-viewer\"\n  export default defineComponent({\n    components: {\n      Viewer,\n    },\n    data() {\n      return {\n        images: [\n          \"https://picsum.photos/200/200\",\n          \"https://picsum.photos/300/200\",\n          \"https://picsum.photos/250/200\"\n        ]\n      }\n    },\n    methods: {\n      inited (viewer) {\n        this.$viewer = viewer\n      },\n      show () {\n        this.$viewer.show()\n      }\n    }\n  })\n\u003c/script\u003e\n\u003c!-- Composition API --\u003e\n\u003c!-- \u003cscript lang=\"ts\" setup\u003e\n  import 'viewerjs/dist/viewer.css'\n  import { component as Viewer } from \"v-viewer\"\n  const images = [\n    \"https://picsum.photos/200/200\",\n    \"https://picsum.photos/300/200\",\n    \"https://picsum.photos/250/200\"\n  ]\n  let $viewer:any = null\n  const inited = (viewer) =\u003e {\n    $viewer = viewer\n  }\n  const show = () =\u003e {\n    $viewer.show()\n  }\n\u003c/script\u003e --\u003e\n```\n\n#### Component props\n\n##### images\n\n- Type: `Array`\n\n##### trigger\n\n- Type: `Object`\n\nYou can replace `images` with `trigger`, to accept any type of prop.\nwhen the `trigger` changes, the component will re-render the viewer.\n\n```vue\n\u003cviewer :trigger=\"externallyGeneratedHtmlWithImages\"\u003e\n  \u003cdiv v-html=\"externallyGeneratedHtmlWithImages\"/\u003e\n\u003c/viewer\u003e\n```\n\n##### rebuild\n\n- Type: `Boolean`\n- Default: `false`\n\nThe viewer instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.\n\nIf you encounter any display problems, try rebuilding instead of updating.\n\n```vue\n\u003cviewer\n  ref=\"viewer\"\n  :options=\"options\"\n  :images=\"images\"\n  rebuild\n  class=\"viewer\"\n  @inited=\"inited\"\n\u003e\n  \u003ctemplate #default=\"scope\"\u003e\n    \u003cimg v-for=\"src in scope.images\" :src=\"src\" :key=\"src\"\u003e\n    {{scope.options}}\n  \u003c/template\u003e\n\u003c/viewer\u003e\n```\n\n#### Component events\n\n##### inited\n\n- viewer: `Viewer`\n\nListen for the `inited` event to get the `viewer` instance, or use `this.refs.xxx.$viewer`.\n\n### Usage of api\n\n\u003e Only available in modal mode.\n\nYou can call the function: `this.$viewerApi({options: {}, images: []})` to show gallery without rendering the `img` elements yourself.\n\nThe function returns the current viewer instance.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton type=\"button\" class=\"button\" @click=\"previewURL\"\u003eURL Array\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"button\" @click=\"previewImgObject\"\u003eImg-Object Array\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c!-- Options API --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  import 'viewerjs/dist/viewer.css'\n  import { api as viewerApi } from \"v-viewer\"\n  export default defineComponent({\n    data() {\n      return {\n        sourceImageURLs: [\n          'https://picsum.photos/200/200?random=1',\n          'https://picsum.photos/200/200?random=2'\n        ],\n        sourceImageObjects: [\n          {\n            'src': 'https://picsum.photos/200/200?random=3',\n            'data-source': 'https://picsum.photos/800/800?random=3'\n          },\n          {\n            'src': 'https://picsum.photos/200/200?random=4',\n            'data-source': 'https://picsum.photos/800/800?random=4'\n          }\n        ]\n      }\n    },\n    methods: {\n      previewURL () {\n        // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this\n        const $viewer = this.$viewerApi({\n          images: this.sourceImageURLs\n        })\n      },\n      previewImgObject () {\n        // Or you can just import the api method and call it.\n        const $viewer = viewerApi({\n          options: {\n            toolbar: true,\n            url: 'data-source',\n            initialViewIndex: 1\n          },\n          images: this.sourceImageObjects\n        })\n      }\n    }\n  })\n\u003c/script\u003e\n\u003c!-- Composition API --\u003e\n\u003c!-- \u003cscript lang=\"ts\" setup\u003e\nimport 'viewerjs/dist/viewer.css'\nimport { api as viewerApi } from 'v-viewer'\nconst sourceImageURLs = [\n  'https://picsum.photos/200/200?random=1',\n  'https://picsum.photos/200/200?random=2'\n]\nconst sourceImageObjects = [\n  {\n    src: 'https://picsum.photos/200/200?random=3',\n    'data-source': 'https://picsum.photos/800/800?random=3'\n  },\n  {\n    src: 'https://picsum.photos/200/200?random=4',\n    'data-source': 'https://picsum.photos/800/800?random=4'\n  }\n]\nconst previewURL = () =\u003e {\n  // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this\n  const $viewer = this.$viewerApi({\n    images: sourceImageURLs\n  })\n}\nconst previewImgObject = () =\u003e {\n  // Or you can just import the api method and call it.\n  const $viewer = viewerApi({\n    options: {\n      toolbar: true,\n      url: 'data-source',\n      initialViewIndex: 1\n    },\n    images: sourceImageObjects\n  })\n}\n\u003c/script\u003e --\u003e\n```\n\n## Options \u0026 Methods of Viewer\n\nRefer to [viewer.js](https://github.com/fengyuanchen/viewerjs).\n\n## Plugin options\n\n### name\n\n- Type: `String`\n- Default: `viewer`\n\nIf you need to avoid name conflict, you can import it like this:\n```ts\nimport { createApp } from 'vue'\nimport 'viewerjs/dist/viewer.css'\nimport VueViewer from 'v-viewer'\nimport App from './App.vue'\n\nexport const app = createApp(App)\napp.use(VueViewer, {\n  name: 'vuer',\n  debug: true,\n})\napp.mount('#app')\n\n```\n\n```vue\n\u003ctemplate\u003e\n\u003cdiv\u003e\n  \u003c!-- directive name --\u003e\n  \u003cdiv class=\"images\" v-vuer=\"{movable: false}\"\u003e\n    \u003cimg v-for=\"src in images\" :src=\"src\" :key=\"src\"\u003e\n  \u003c/div\u003e\n  \u003cbutton type=\"button\" @click=\"show\"\u003eShow\u003c/button\u003e\n  \u003c!-- component name --\u003e\n  \u003cvuer :images=\"images\"\u003e\n    \u003cimg v-for=\"src in images\" :src=\"src\" :key=\"src\"\u003e\n  \u003c/vuer\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003c!-- Options API --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  export default defineComponent({\n    data() {\n      return {\n        images: [\n          \"https://picsum.photos/200/200\",\n          \"https://picsum.photos/300/200\",\n          \"https://picsum.photos/250/200\"\n        ]\n      };\n    },\n    methods: {\n      show () {\n        // viewerjs instance name\n        const vuer = this.$el.querySelector('.images').$vuer\n        vuer.show()\n        // api name\n        this.$vuerApi({\n          images: this.images\n        })\n      }\n    }\n  })\n\u003c/script\u003e\n\u003c!-- Composition API --\u003e\n\u003cscript lang=\"ts\" setup\u003e\n  import { api as vuerApi } from 'v-viewer'\n  const images = [\n    \"https://picsum.photos/200/200\",\n    \"https://picsum.photos/300/200\",\n    \"https://picsum.photos/250/200\"\n  ]\n  const show = () =\u003e {\n    // viewerjs instance name\n    const vuer = document.querySelector('.images').$vuer\n    vuer.show()\n    // api name\n    vuerApi({\n      images\n    })\n  }\n\u003c/script\u003e\n```\n\n### defaultOptions\n\n- Type: `Object`\n- Default: `undefined`\n\nIf you need to set the viewer default options, you can import it like this:\n\n```ts\nimport { createApp } from 'vue'\nimport 'viewerjs/dist/viewer.css'\nimport VueViewer from 'v-viewer'\nimport App from './App.vue'\n\nexport const app = createApp(App)\napp.use(VueViewer, {\n  defaultOptions: {\n    zIndex: 9999\n  }\n})\napp.mount('#app')\n```\n\nAnd you can reset the default options at any other time:\n\n```javascript\nimport VueViewer from 'v-viewer'\n\nVueViewer.setDefaults({\n  zIndexInline: 2021,\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirari%2Fvue3-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirari%2Fvue3-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirari%2Fvue3-viewer/lists"}