open-index/open-npm huggingface dataset:
npm package: @liujiaoteng/vue-image-preview
Description: Vue3 富文本图片点击预览指令，基于 Element Plus el-image-viewer
Latest version: 1.0.0

# @liujiaoteng/vue-image-preview

Vue3 富文本图片点击预览指令，基于 Element Plus 的 `el-image-viewer`。

## 安装

```bash
npm install @liujiaoteng/vue-image-preview element-plus vue
```

## 使用

### 1. 注册插件

在 `main.js` 中：

```js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ImagePreviewPlugin from '@liujiaoteng/vue-image-preview'

const app = createApp(App)
app.use(ElementPlus)
app.use(ImagePreviewPlugin)
app.mount('#app')
```

### 2. 挂载 Provider

在 `App.vue` 中挂载 `<ImagePreviewProvider />`（用于渲染预览弹窗）：

```vue
<template>
  <div id="app">
    <router-view />
    <ImagePreviewProvider />
  </div>
</template>
```

### 3. 使用指令

在包含 `img` 的容器上添加 `v-image-preview`：

```vue
<template>
  <div v-image-preview v-html="content"></div>
</template>
```

或：

```vue
<template>
  <div v-image-preview>
    <span v-html="content"></span>
  </div>
</template>
```

点击富文本中的图片即可放大预览，支持多图切换。

## API

### 方法

- `showImagePreview(url, index)`：代码方式打开预览  
  - `url`：单张 URL 或 URL 数组  
  - `index`：初始显示的索引（默认 0）
- `hideImagePreview()`：关闭预览

### 导出

```js
import {
  ImagePreviewProvider,
  imagePreviewState,
  showImagePreview,
  hideImagePreview,
  imagePreviewDirective
} from '@liujiaoteng/vue-image-preview'
```

## 依赖

- Vue 3
- Element Plus（需引入 `el-image-viewer` 样式）

## License

MIT