@composy/compress-vue

@composy/compress-vue

Vue ^3.5.32 适配层，为 @composy/compress-core 提供上传组件、组合式函数和插件。

安装与样式

pnpm add @composy/compress-vue @composy/compress-core vue

组件会使用 tdesign-icons-vue-next 的 UploadIcon。样式中的颜色、字号、尺寸、间距和圆角引用 LDesign 颜色与尺寸包生成的 --ld-* CSS 变量。应用需先加载相应的全局变量样式。

CompressUpload

<script setup lang="ts">
import { CompressUpload } from '@composy/compress-vue'
import type { CompressResult } from '@composy/compress-vue'

const options = { quality: 0.75, maxWidth: 1600 }

function handleCompress(result: CompressResult) {
  console.info(result.outputName, result.savedRatio)
}
</script>

<template>
  <CompressUpload
    :options="options"
    :multiple="true"
    :max-count="12"
    :auto-compress="false"
    @compress="handleCompress"
  />
</template>

Props：

• options：传给核心压缩器的选项。
• multiple：允许选择多个文件，默认 true。
• accept：文件选择器的 accept 值，默认 image/*；组件只压缩 JPEG、PNG 和 WebP。
• maxCount：列表最多文件数，默认 20。
• disabled：禁用选择，默认 false。
• autoCompress：新增文件后立即排队压缩，默认 false。
• showStats：显示压缩汇总，默认 true。
• allowDownload：允许下载单个或全部结果，默认 true。

options.maxSizeIterations 可限制目标大小搜索次数；成功结果中的 targetSizeReached、targetSizeBytes 和 targetSizeIterations 会保留在 compress 事件及 fileList 的 result 中。若组件运行在 iframe，可在 options 中传入该 iframe 的 ownerDocument，预览对象 URL 和下载链接会跟随该文档。

Events：

• change(files)：文件列表改变。
• compress(result)：单个文件压缩成功。
• compressAll(results)：一次压缩调用结束时返回本轮成功结果。
• error(error, file)：文件类型不支持或压缩失败。
• remove(index)、clear：文件移除或列表清空。

通过模板引用可调用 compressAll()、clearAll()、downloadAll() 和 cancel()，并访问响应式 fileList。

useCompress

在 Vue setup() 中调用：

import { useCompress } from '@composy/compress-vue'

const {
  compress,
  compressBatch,
  compressing,
  progress,
  currentFile,
  results,
  batchErrors,
  cancel,
  clearResults,
  destroy,
} = useCompress({ quality: 0.75 })

组合式函数跟踪并发调用；所有活动操作结束后才会将 compressing 设为 false。清空结果后，已开始的旧操作不会再把结果写回已清空的状态。由组合式函数自行创建的实例会在组件卸载时销毁；显式注入的实例由调用方管理。

插件

import { createApp } from 'vue'
import { createCompressPlugin } from '@composy/compress-vue'
import App from './App.vue'

createApp(App)
  .use(
    createCompressPlugin({
      componentName: 'LCompressUpload',
      defaultOptions: { quality: 0.8 },
    })
  )
  .mount('#app')

应用卸载时，插件创建的压缩器会自动销毁。createCompressEnginePlugin() 可用于 LDesign Engine 插件上下文，并通过引擎容器注册压缩服务。

配置

builder、ESLint 与 ESM/CJS TypeScript 权威配置位于本包 .ldesign/；包根旧配置文件保留为兼容入口。

构建与验证

在 libraries/compress 执行 pnpm run quality:check。构建采用 @composy/builder / rolldown，输出 dist、es、esm、lib 和类型声明，并在 postbuild 阶段归一化及核对包导出目标。