fox-preview-image 图片预览

安装

npm i fox-preview-image #vue2.x 请使用 @1.x 版本

使用

// main.js
import { createApp } from "vue";
import App from "./App.vue";

import foxPreviewImage from "fox-preview-image"; // 引入
import "fox-preview-image/lib/style.css";

const app = createApp(App);
// ...

app.use(foxPreviewImage); // 注册组件

// App.vue
<script setup>
    import { ref } from "vue";
    const visible = ref(false);
    const visible = ref("");
</script>
<template>
    <for-preview-image v-model="visible" :src="src"></for-preview-image>
</template>

Attrs

属性	说明	参数类型	默认值
src	预览图片的地址	String/Array<string>
visiable/v-model	是否显示预览窗口	Boolean	false
initial-index	默认显示图片的下标(当有多张图片时可以设置)	Number	0
z-index	预览窗口的层级-css 的 zIndex	Number	9000

示例

单张图片

当图片只有一张时，不显示左右切换按钮

点击查看预览界面-没有切换按钮

多张图片

通过 initial-index 属性设置默认显示第二张图片

点击查看预览界面

和 elementPlus 公用 ZIndex

element-plus 导出了 useZIndex hook

<script setup>
import { ref } from "vue";
import { useZIndex } from "element";
const { nextZIndex } = useZIndex();

const zIndex = ref(nextZIndex());
const openFoxPreviewImage = () => {
    // ...
    zIndex.value = nextZIndex();
};
</script>
<template>
    <fox-preview-image :z-index="zIndex"></fox-preview-image>
</template>