Vue3-Image-Preview

Vue3的图片预览插件，内置图片预览组件、图片预览指令以及图片预览函数。使用起来灵活方便，可以满足大部分针对图片预览的需求。

安装 Install

npm install vue3-image-preview

yarn add vue3-image-preview

局部引入 Part Import

在要使用的.vue文件中，引入vue3-image-preview。

import {preview, vPreview, Vue3ImagePreview} from 'vue3-image-preview';

其中preview为图片预览函数，vPreview为图片预览指令（v-preview：需要在directives属性中注册），Vue3ImagePreview为图片预览组件（需要在components属性中注册）。

全局引入 Global Import

在入口文件中引入vue3-image-preview，并且使用.use()安装全局插件。 v-preview已注册为全局指令，Vue3ImagePreview已注册为全局组件。

import { createApp } from 'vue';
import App from './App.vue';
import preview from 'vue3-image-preview';

createApp(App).use(preview).mount('#app');

preview函数需要通过getCurrentInstance(Vue3的Composition Api)来引入。

const {proxy} = getCurrentInstance() as any;

proxy.preview({
    images: state.images1,
    index: state.index
});

preview函数

示例

<button @click="preview1Event">预览1</button>
<button @click="preview2Event">预览2</button>
<button @click="preview3Event">预览3</button>
...
setup() {
    // 响应式数据
    const state: any = reactive<any>({
        image: 'https://www.43cx.com/d/file/20220704/e1eb727dc76e4dfc916048b32ab9d50c.jpg',
        images1: [
          'https://img.phb123.com/uploads/allimg/200615/60-2006151H317-52.jpg',
          'https://img.phb123.com/uploads/allimg/200615/60-2006151H318.jpg'
        ],
        images2: [
          {url: 'https://www.43cx.com/d/file/20220704/87fb4397c47fab8b9fb9496e5279591d.jpg'},
          {url: 'https://www.43cx.com/d/file/20220704/a958a8b2ae53bdf22d318ce0356d3ab8.jpg'}
        ],
        index: 0
    });
    
    const preview1Event = () => {
        preview({
          images: state.image
        });
    };
    
    const preview2Event = () => {
        preview({
          images: state.images1,
          index: state.index
        });
    };
    
    const preview3Event = () => {
        preview({
            images: state.images2,
            index: state.index
        });
    };
    
    return {
        ...toRefs(state),
        preview1Event,
        preview2Event,
        preview3Event
    };
}

参数

属性	描述	类型	默认值	必填
images	当前预览的图片资源或图片资源数组。	String/Array	""	是
index	初始化预览图片的索引，仅当images类型为Array时可用。	Number	0	否
key	仅当images为对象数组时，key为数组里对象的图片资源的属性名。	String	"url"	否
zoom	缩放事件的缩放速度。	Number	1.2	否

v-preview指令

示例

默认，直接使用v-preview指令，会打开单个预览组件。

<img v-preview src="https://img.phb123.com/uploads/allimg/200615/60-2006151H317-52.jpg"/>

分组，使用v-preview:name指令，指令值相同的都会在同一个预览组件中打开。

<img v-preview:name="name1" src="https://img.phb123.com/uploads/allimg/200615/60-2006151H318-52.jpg"/>
<img v-preview:name="name1" src="https://img.phb123.com/uploads/allimg/200615/60-2006151H318-51.jpg"/>

<img v-preview:name="name2" src="https://img.phb123.com/uploads/allimg/200615/60-2006151H317-50.jpg"/>
<img v-preview:name="name2" src="https://img.phb123.com/uploads/allimg/200615/60-2006151H317-51.jpg"/>

缩放，使用v-preview:zoom指令，会改变缩放事件的缩放速度。

<img v-preview:zoom="zoom1" src="https://www.pipicats.com/uploadfile/2022/1214/202212141670990665241976.jpg"/>

配置，v-preview的值为属性包含"name"，"zoom"的对象。

<img v-preview="config1" src="https://www.pipicats.com/uploadfile/2022/1214/202212141670990664685286.jpg"/>
<img v-preview="config2" src="https://www.pipicats.com/uploadfile/2022/1214/202212141670990665512352.jpg"/>
<img v-preview="config3" src="https://www.pipicats.com/uploadfile/2022/1214/202212141670990665810075.jpg"/>
<img v-preview="config4" src="https://www.pipicats.com/uploadfile/2022/1214/202212141670990665451069.jpg"/>

响应式数据

setup() {
  const {proxy} = getCurrentInstance() as any;
  // 响应式数据
  const state: any = reactive<any>({
    name1: 'name1',
    name2: 'name2',
    zoom1: 1.4,
    zoom2: 1.1,
    config1: {name: 'name3'},
    config2: {zoom: 1.1},
    config3: {name: 'name4', zoom: 1.4},
    config4: {name: 'name4', zoom: 1.1}
  });

  return {
    ...toRefs(state)
  };
}

参数	描述	类型	默认值	必填
name	图片分组的名称。	String	-	否
zoom	缩放事件的缩放速度。	Number	1.2	否