hevue-img-preview

简体中文

English

简体中文

English

主题

快速使用 ​

使用包管理器 ​

安装 ​

使用包管理器将会直接安装插件的源码版本，也就是包含.vue文件，适用于脚手架创建的项目。安装方式不区分vue2和vue3版本

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

使用 ​

vue2版本 ​

全局使用 ​
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>
局部使用 ​
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>

vue3版本 ​

全局使用 ​
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>
局部使用 ​
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>

浏览器直接引入 ​

vue2版本 ​

cdn 地址 ​

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>

页面中使用 ​

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>

vue3版本 ​

cdn 地址 ​

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>

页面中使用 ​

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>