JSPM

vue-crop-region

0.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q15599F
  • License MIT

A vue component of crop region

Package Exports

  • vue-crop-region

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-crop-region) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 是否可以移动 boolean true/false true
resizable 是否可以改变大小 boolean true/false true
showInfo 是否显示info boolean true/false true
showTool 是否显示tool boolean true/false true

方法

方法名 说明 参数 返回
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} 坐标信息