Cropper 图片裁剪
对传入图片进行裁剪，可生成新的文件用于展示或保存。
基础用法
本示例裁剪后将在新窗口打开裁剪后的图片, 获取的数据可在控制台查看
带预览框的头像裁剪
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| src | string | 图片地址 | -- | -- |
| type | string | 裁剪类型，每种类型会设定一些默认值 | avatar | -- |
| init-tip | string | 插件初始化时的提示文字 | -- | 'cropper is initializing...' |
| options | object | 插件的配置对象，可以设置所有文档支持的配置，且可以组件覆盖默认配置 | -- | -- |
Events
组件会代理插件options中的各种事件，在调用传入的事件函数的同时，向外发送事件通知。
| 参数 | 说明 | 回调参数 |
|---|---|---|
| ready | 插件准备就绪时触发 | -- |
| cropstart | 裁剪框开始时触发 | (event: Event) |
| cropmove | 裁剪框移动时触发 | (event: Event) |
| cropend | 裁剪框停止变化时触发 | (event: Event) |
| crop | 裁剪框停止变化后触发 | (event: Event) |
| zoom | 裁剪框缩放时触发 | (event: Event) |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| resetCropper | 重置组件内插件，使其恢复初始状态 | -- |
| getCroppedFile | 获取裁剪内容，并输出为文件对象。方法返回一个Promise对象。 | -- |
| callCropperFn | 调用插件实例上的方法，可传递参数 | (fnName:String, ...args[]) |
提示
组件的实例上的$cropper属性为插件的实例，可以调用插件的方法或获取插件的属性。$cropper在有src属性且图片加载完后才能正常访问。
Slots
| name | 说明 | 作用域数据 |
|---|---|---|
| init | 此插槽可定制插件初始化时的等待界面 | -- |