hevue-img-preview

English

简体中文

English

简体中文

Theme

Getting Started ​

Using Package Managers ​

Installation ​

Using a package manager will directly install the source version of the plugin, which includes .vue files. This is suitable for projects created with scaffolding tools. The installation method is the same for both Vue 2 and Vue 3 versions.

sh
$ npm add -D hevue-img-preview
sh
$ pnpm add -D hevue-img-preview
sh
$ yarn add -D hevue-img-preview
sh
$ yarn add -D hevue-img-preview
sh
$ bun add -D hevue-img-preview

Usage ​

Vue 2 Version ​

Global Usage ​
js
import Vue from 'vue'
import App from './App.vue'
import hevueImgPreview from 'hevue-img-preview/v2'

Vue.use(hevueImgPreview) 

new Vue({
  render: (h) => h(App),
}).$mount('#app')
vue
<template>
  <div id="app">
    <img alt="Vue logo" src="/1.png" @click="handleClick" />  
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClick() {
      this.$hevueImgPreview('/1.png') 
    },
  },
}
</script>
Local Usage ​
home.vue
vue
<template>
  <div id="app">
    <img alt="Vue logo" src="/1.png" @click="handleClick" />  
  </div>
</template>

<script>
import { previewImages } from 'hevue-img-preview/v2'
export default {
  name: 'App',
  methods: {
    handleClick() {
      previewImages('/1.png') 
    },
  },
}
</script>

Vue 3 Version ​

Global Usage ​
js
import { createApp } from 'vue'
import App from './App.vue'
import hevueImgPreview from 'hevue-img-preview/v3'

const app = createApp(App)
app.use(hevueImgPreview) 
app.mount('#app')
vue
<template>
  <div id="app">
    <img alt="Vue logo" src="/1.png" @click="handleClick" />  
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
const global = getCurrentInstance().appContext.config.globalProperties 

const handleClick = () => { 
  global.$hevueImgPreview('/1.png') 
} 
</script>
Local Usage ​
home.vue
vue
<template>
  <div id="app">
    <img alt="Vue logo" src="/1.png" @click="handleClick" />  
  </div>
</template>

<script setup>
import { previewImages } from 'hevue-img-preview/v3'

const handleClick = () => { 
  previewImages('/1.png') 
} 
</script>

Direct Browser Import ​

Vue 2 Version ​

js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v2/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v2/index.js"></script>
js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v2/index.css"/>
<script src="https://app.unpkg.com/hevue-img-preview@7/files/v2/index.js"></script>

Usage in HTML ​

html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v2/index.css"/> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v2/index.js"></script> 
  </head>

  <body>
    <div id="app">
      <img src="/1.png" @click="handleClick" />
    </div>

    <script>
      Vue.use(hevueImgPreview.default) 
      var app = new Vue({
        el: '#app',
        methods: {
          handleClick() {
            this.$hevueImgPreview('/1.png') 
          },
        },
      })
    </script>
  </body>
</html>

Vue 3 Version ​

js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v3/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v3/index.js"></script>
js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v3/index.css"/>
<script src="https://app.unpkg.com/hevue-img-preview@7/files/v3/index.js"></script>

Usage in HTML ​

html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v3/index.css"/> 
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hevue-img-preview@7/dist/v3/index.js"></script> 
  </head>

  <body>
    <div id="app">
      <img src="http://localhost:3000/3.png" @click="handleClick" />
    </div>

    <script>
      const appVue = Vue.createApp({
        methods: {
          handleClick() {
            appVue.config.globalProperties.$hevueImgPreview('http://127.0.0.1:5173/3.png') 
          },
        },
      })

      appVue.use(hevueImgPreview.default) 
      appVue.mount('#app')
    </script>
  </body>
</html>