1.2.5 • Published 3 years ago
wang-image-clip v1.2.5
wang-image-clip
Using npm:
npm i wang-image-clip --saveparams:
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| src | 传入的图片地址 | image | -- |
| height | 图片的高度(宽度将进行等比缩放) | number | 500 |
| clipHeight | 裁剪区域初始高度 | number | 200 |
| clipWidth | 裁剪区域初始宽度 | number | 200 |
| showPreview | 是否显示预览区域 | boolen | true |
| showControls | 是否显示操作栏 | boolen | true |
event
| 事件名 | 返回值 |
|---|---|
| clipCallBack | 裁剪后的图片 |
$ref api
clipImage: 手动触发裁剪，可用于用户自定义何时触发裁剪事件
attention
仅支持同域和设置了跨域的图片地址
example:
<template>
<div id="app">
<clip :src="require('./assets/logo.png')" />
</div>
</template>
<script>
import clip from "wang-image-clip";
import "wang-image-clip/dist/wang-image-clip.css";
export default {
name: 'app',
components: {
clip
}
}
</script>