vue3-img-viewer - 仿知乎图片预览组件

迷途小前端_99

2023-02-22 358 阅读1分钟

预览

在组件中使用

只需一步操作，将其包裹在含有图片的组件内，它将自动识别组件内容里所有的img元素，使其在点击后丝滑预览。

// in any.vue

<template>
    <ImgViewer>
      <div>... put any thing ...</div>
      <img src="..." alt="..." />
      <img src="..." alt="..." />
      <img src="..." alt="..." />
      <div>... put any thing ...</div>
    </ImgViewer>
</template>

下载与引用

下载

// npm
npm install vue3-img-viewer

// yarn
yarn add vue3-img-viewer

// pnpm
yarn install vue3-img-viewer

全局安装

执行下步即可在所有页面随意引用

// in main.ts

// import ts and css
import ImgViewer from "vue3-img-viewer";
import "vue3-img-viewer/dist/style.css";

// use it
const app = createApp(App);
app.use(ImgViewer);
app.mount("#app");

局部引用

或在需要它的地方直接引用

// in any.vue

// import ts and css
<script >
import ImgViewer from "vue3-img-viewer";
import "vue3-img-viewer/dist/style.css";
</script>

特性

丝滑动画
```
使用 FLIP 实现，符合直觉
```
监听window滚动，退出预览
```
在预览状态下滚动即可退出
```

待开发

监听自定义滚动源
ts类型声明
持续开发，敬请期待