VueCroppie

下载

VueCroppie

VueCroppie是一个Vue 2包装Croppie一个美丽的照片裁剪工具的Javascript由foliotek。
安装
NPM
安装vue-croppie—保存
使用
import Vue from ‘vue’;
import VueCroppie from ‘vue-croppie’;

Vue.use(VueCroppie);

样本
下面的示例将生成此内容。

<vue-croppie
ref=croppieRef
:enableOrientation=“true”
@result=“result”
@update=“update”>

    <!-- the result -->
    <img v-bind:src="cropped">

    <button @click="bind()">Bind</button>
    <!-- Rotate angle is Number -->
    <button @click="rotate(-90)">Rotate Left</button>
    <button @click="rotate(90)">Rotate Right</button>
    <button @click="crop()">Crop Via Callback</button>
    <button @click="cropViaEvent()">Crop Via Event</button>
</div>

利用期权
所有Croppie选项被转换成道具，以便能够在vue-croppie组件中使用它们。
使用
& lt; vue-croppie
ref = croppieRef
: enableOrientation = " true "
: mouseWheelZoom = " false "
:viewport="{width: 200, height: 200, type: ‘circle’}"
比;
& lt; / vue-croppie>
API
所有的属性和方法都基于农作物文档。如果你明白我的意思，那么所有的属性和方法名都是"==="。
除了下面的几件事。

选项
类型
默认的
描述

裁判(必需)
对象
没有一个
ref用于创建对子组件的引用，以便访问它的方法和属性。具体的例子是从组件外部访问vue-croppie的result()函数。

resultType
字符串
base64
通过result()对被裁剪的图像进行编码。也可在Croppie文档。

customClass
字符串
没有一个
您可以传递一个或多个自定义类到道具customClass，如customClass=“class1 class2 class3”

事件

选项
类型
使用
描述

更新
函数
@update = " fn "
当作物元素被缩放、拖动或裁剪时触发

结果
函数
@result = " fn "
当图像被裁剪时触发。返回裁剪的图像。

常见问题解答
如何清除/销毁副本?
我添加了一个名为refresh()的新方法，可以这样使用。$ref . croppierefs .refresh()，但是croppie实例现在会在每次调用crop()后自动刷新。
有用的链接
358 -官方农作物网页。
更新
1.3.0 - 2017年8月16日

添加webpack构建
修复# 5
修复# 14

1.2.5 - 2017年8月12日

裁剪的图像输出现在可以通过vue事件检索。
添加结果事件。
添加更新的事件。

1.2.3

增加了每次调用crop()后自动刷新croppie实例的功能。
新的方法refresh()，它会破坏和重新创建croppie实例。

1.2.x

结果选项现在通过this.$ref . croppieref传递。结果(选择,回调)。

许可证
麻省理工学院
使用和滥用自负风险。
& lt; / p>与❤️Jofferson Ramirez Tiquez本文转载于：http://www.diyabc.com/frontweb/news33283.html