scc-element

基于vue的自定义组件

组件1 scc-cnavas 用于用户截图当前页面，并具有简单标注功能。

全局引入方式

  import SccElement from 'scc-element'
  import 'scc-element/lib/theme/canvas.css'

  Vue.use(SccElement)

组件属性与事件

|名称|类型|是否必需|默认值|描述| |---|---|---|---|---| |contentId|String|true|-- |需要截图的内容区域DOM的id| |fillStyle|String|false|'rgba(255,106,0,.5)'|矩形工具填充颜色| |getImgFile|Function|false|-- |获取截图后的生成的图片函数|

示例：

<template>
    <div>
      <div id="content">我是正文内容</div>
      <scc-canvas contentId="content" @getImgFile="getImgFile"></scc-canvas>
    </div>
</template>

<script>
import {upfile} from '@/api'
export default {
  methods: {
    async getImgFile(file, data) {
      let form = new FormData();
      form.append("file",file);
      let data = await upfile(form) // 将图片上传服务端
    }
  }
}
</script>