Vue.js图像裁剪组件– vuejs-clipper

Vue.js图像裁剪组件– vuejs-clipper
插件名称 vuejs-clipper
发布时间 2020年6月17日
插件作者 timtnleeProject

使用Vue-Rx的一组Vue.js图像裁剪组件。

变更日志:

v3.1.1(12/03/2020)

  • 更改布局和图像位置计算

v3.1.0(11/10/2020)

  • 修复Clipper基本的错误布局

v3.0.4(2020年10月12日)

  • clipper-upload接受其余道具作为输入属性。

v3.0.2(09/10/2020)

  • 修复Clipper基本的初始化/重置位置

v3.0.0(08/10/2020)

  • 将rxjs,vue-rx从依赖关系移动到对等依赖关系。

v2.1.2(08/04/2020)

  • 错误修正:Clipper基本的缩放比例和旋转位置错误。

v2.1.1(07/29/2020)

  • 错误修正

v2.1.0(06/15/2020)

  • 错误修正

安装和下载:

# NPM
$ npm install vuejs-clipper --save

(1)使用vuejs-clipper插件

使用vuejs-clipper插件还将vue-rx插件添加到Vue。

默认情况下,它将所有组件注册到Vue全局范围。

import Vue from 'vue'
import VuejsClipper from 'vuejs-clipper'
// 安装
Vue.use(VuejsClipper)

使用默认组件名称将某些组件注册为全局组件

Vue.use(VuejsClipper, {
 components: {
    clipperBasic: true,
    clipperPreview: true
 }
})

具有定制的组件名称

Vue.use(VuejsClipper, {
 components: {
  clipperBasic: 'image-clipper-basic',
  clipperPreview: 'my-preview'
 }
})

没有注册任何组件,但是带有一些插件选项

Vue.use(VuejsClipper, {
  components: null,
 parentPropName: 'myCustomerName'
  /*
parentPropName:
添加属性到Vue实例来存储“clipper-preview”列表。
您可以更改属性名称
默认值:“_imgPreviewLists”
  */
})

(2)单独导入组件

安装vue-rx及其对等依赖性rxjs

$npm install --save vue-rx rx-js

使用vue-rx

import Vue from 'vue'
import VueRx from 'vue-rx'
//安装 vue-rx
Vue.use(VueRx)

然后导入您的组件(SFC)

import { clipperBasic, clipperPreview } from 'vuejs-clipper'

export default {
  components: {
    clipperBasic,
    clipperPreview
  }
}