0.0.2 • Published 4 years ago

vue-crop-region v0.0.2

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Vue Crop Region

vue-crop-region 是一个区域裁剪组件,可自由移动与缩放,实时获取所在区域的坐标信息。
设计初衷是为了解决大量散点图无法精确点击的问题,通过区域选取批量点可进行二次处理。

Demo

https://theoxiong.github.io/vue-crop-region/

Demo

安装

$   npm install vue-crop-region --save

使用

引入模块

import CropRegion from 'vue-crop-region'

注册

全局注册

Vue.use(CropRegion)

组件内注册

<script>
export default {
  components: { CropRegion }
}
</script>

基础用法

<template>
  <div class="base-demo" style="width:400px; height:400px; position: relative;">
    <CropRegion ref="cropper"></CropRegion>
  </div>
</template>

<script>
import CropRegion from 'vue-crop-region'

export default {
  name: 'Demo',
  mounted () {
    this.$refs.cropper.show()
  },
  components: { CropRegion }
}

</script>

API

属性

属性名说明类型可选值默认值
borderColor边框颜色string-'#409EFF'
pointColor点的颜色string-'#409EFF'
confirmColor确认按钮颜色string-'#409EFF'
modalColor遮盖层颜色string-'rgba(0, 0, 0, 0.5)'
movable是否可以移动booleantrue/falsetrue
resizable是否可以改变大小booleantrue/falsetrue
showInfo是否显示infobooleantrue/falsetrue
showTool是否显示toolbooleantrue/falsetrue

方法

方法名说明参数返回
show打开options: {x:number, y:number, w:number, h:number} 指定打开的位置/大小
close关闭--

事件

事件名说明回调参数
confirm确认事件axis: {x1:number, y1:number, x2:number, y2:number} 坐标信息
close关闭事件axis: {x1:number, y1:number, x2:number, y2:number} 坐标信息