CoverImageAdjuster

一个用于调整封面图片位置的Vue 3组件，支持拖拽调整图片位置，适用于封面图片裁剪场景。

特性

• 支持鼠标拖拽和触摸拖拽
• 自动适应容器尺寸
• 支持设置初始位置
• 支持禁用拖拽
• 支持自定义容器尺寸
• TypeScript支持

安装

npm install cover-image-adjuster
# 或
yarn add cover-image-adjuster

使用

全局注册

import { createApp } from 'vue'
import CoverImageAdjuster from 'cover-image-adjuster'

const app = createApp(App)
app.use(CoverImageAdjuster)

局部注册

<script setup lang="ts">
import { CoverImageAdjuster } from 'cover-image-adjuster'
</script>

<template>
  <CoverImageAdjuster
    src="path/to/your/image.jpg"
    :width="400"
    :height="300"
    @positionChange="handlePositionChange"
  />
</template>

Props

属性名	类型	默认值	说明
src	string	-	图片URL（必填）
width	number	200	容器宽度（像素）
height	number	200	容器高度（像素）
draggable	boolean	true	是否可拖拽
initialPosition	{ x: number, y: number }	{ x: 0, y: 0 }	图片初始位置

事件

事件名	参数	说明
positionChange	{ x: number, y: number }	图片位置变化时触发

示例

基础用法

<template>
  <CoverImageAdjuster
    src="/example.jpg"
    :width="400"
    :height="300"
    @positionChange="(pos) => console.log('Position changed:', pos)"
  />
</template>

设置初始位置

<template>
  <CoverImageAdjuster
    src="/example.jpg"
    :width="400"
    :height="300"
    :initialPosition="{ x: -50, y: -30 }"
  />
</template>

禁用拖拽

<template>
  <CoverImageAdjuster
    src="/example.jpg"
    :width="400"
    :height="300"
    :draggable="false"
  />
</template>

许可证

MIT