@bylqwjc/media-editor-vue

@bylqwjc/media-editor-vue

Vue3 适配包，提供 MediaEditor、ImageEditor、VideoEditor 和 useVideoEditor。图片编辑器内部 React 已封装在 @media-editor/image 中，不需要 veaury。

安装

pnpm add @bylqwjc/media-editor-vue

locale 支持 zh、en、es 和 zh-Hant。

示例

<script setup lang="ts">
import { ImageEditor, VideoEditor } from '@bylqwjc/media-editor-vue';
import '@bylqwjc/media-editor-vue/style.css';

defineProps<{
  type: 'image' | 'video';
  source?: string | File;
}>();
</script>

<template>
  <ImageEditor
    v-if="type === 'image'"
    :source="source"
    locale="zh"
    :options="{ theme: 'auto' }"
    @save="saveImageToYourApp"
  />
  <VideoEditor
    v-else
    :source="source instanceof File ? source : undefined"
    base-url="/api/editor"
    locale="zh"
    theme="auto"
    @exported="saveVideoToYourApp"
  />
</template>

style.css 已经包含 theme.css 和 filerobot.css，接入时保留这一行即可。

统一入口

<template>
  <MediaEditor
    base-url="/api/editor"
    locale="zh"
    theme="auto"
    @image-save="saveImageToYourApp"
    @exported="(blob) => saveVideoToYourApp(blob, 'video.mp4')"
  />
</template>