@allfile-preview/vue3

@allfile-preview/vue3

@allfile-preview/core 的 Vue3 封装组件：类型完整的 props / emits，无需配置 isCustomElement，在 SFC / JSX / 模板中直接使用。

支持预览的文件类型与全部功能（图片 / 视频 / 音频 / PDF / TXT / Markdown / Word / Excel 全家族、缩放、水印、下载、自定义操作栏等）见 core 文档。在线体验：https://allfile-preview.softinstall.top/

支持的文件格式：图片（jpg / jpeg / jfif / png / gif / webp / bmp / svg / avif / ico）、视频（mp4 / webm / mov / m4v / ogv）、音频（mp3 / wav / ogg / m4a / flac / aac / opus）、PDF、Word（docx）、Excel 家族（xlsx / xls / xlsm / xlt / xltm / xlam / xla / ods / fods / ots）、Markdown（md）、文本（txt / log / json / xml / csv / tsv / yaml / ini / sql / js / ts / css / html / vue / eml / rtf / java / php / py 等所有纯文本）。完整格式说明与暂不支持清单见 core 文档。

安装

npm install @allfile-preview/vue3 @allfile-preview/core

• @allfile-preview/core 为 peer 依赖，必须同时安装（负责注册 <file-preview> 自定义元素）
• 组件导出 ESM 与 CJS 两种格式

快速开始

<script setup lang="ts">
import { ref } from 'vue'
import { FilePreview } from '@allfile-preview/vue3'
import '@allfile-preview/core'

const url = ref('/media/movie.mp4')
const preview = ref()

function onZoom(detail: { scale: number }) {
  console.log('缩放：', detail.scale)
}
function play() {
  preview.value?.play() // 命令式 API
}
</script>

<template>
  <FilePreview
    ref="preview"
    :src="url"
    type="video"
    name="示例.mp4"
    color="#10b981"
    downloadable
    @load="onZoom"
    @zoom="onZoom"
    @error="(d) => console.log(d.message)"
    @timeupdate="(d) => console.log(d.currentTime)"
  />
</template>

Props

与 <file-preview> 元素属性一一对应（组件内部以 DOM property 方式透传，与 Lit 响应式属性语义一致）：

事件

与 core 的 CustomEvent 一一对应，回调参数即 event.detail：

@load @error @zoom @rotate @reset @play @pause @ended @timeupdate @seek @volumechange @ratechange @fullscreenchange @pagechange @download @action

各事件 detail 结构见 core 文档事件表。

命令式方法（ref 调用）

const preview = ref()

preview.value?.play()            // 播放
preview.value?.pause()           // 暂停
preview.value?.seek(30)          // 跳转
preview.value?.skip(-15)         // 快退 15 秒
preview.value?.setRate(1.5)      // 倍速
preview.value?.goToPage(3)       // PDF 跳页
preview.value?.zoomTo(2)         // 缩放
preview.value?.fitWidth()        // 适应宽度
preview.value?.rotateBy(90)      // 旋转
preview.value?.reset()           // 重置
preview.value?.download()        // 下载
preview.value?.reload()          // 重新加载
preview.value?.el                // 内部 <file-preview> 元素

与直接使用自定义元素的对比

License

MIT