vue3签名组件

安装

pnpm install gao-canvas-sign

使用

<template>
   <Sign ref="signRef" color="#000" :lineWidth="2" background-color="#ccc" :width="100" :height="300"></Sign>
</template>

<script>
import { ref } from 'vue';
import Sign from './Sign/index.vue'
let signRef = ref<InstanceType<typeof Sign>>()


function getUrl() {
  // 获取临时url地址
  let url = signRef.value!.getUrl()
  console.log('url::::::::::::::::', url)
}

function getBlob() {
  signRef.value?.getBlob().then(blob => {
    console.log('blob::::::::::::::::', blob)
    // 转成file对象  用于文件上传
    let file = new File([blob!], 'sign.png', { type: 'image/png' })
    console.log('file::::::::::::::::', file)
  })
}
</script>

参数

| 参数名 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | color | 签名文字颜色 | string | #000 | | lineWidth | 签名线条宽度 | number | 2 | | background-color | 签名区域背景颜色 | string | #ccc | | width | 签名区域宽度 | number | 300 | | height | 签名区域高度 | number | 300 |

事件

| 事件名 | 描述 | 参数 | 返回值 | | --- | --- | --- | --- | | getUrl | 获取签名图片的临时url地址 | - | - | | getBlob | 获取签名图片的blob对象 | - | Primise | | reset | 清空签名 | - | - |