ZBaseUi

Appearance

SignBoard 签字版 ​

签字版。

何时使用 ​

当需要签字时使用

  • 当有文件需要用户电子签字时。

设备支持 ​

  • 支持PC和H5，其余类型暂未测试


代码演示 ​

1. 默认效果 ​

默认效果
最原始的形态，不需要其它设置
<template>
  <div class="page">
    <z-sign-board ref="board"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>

2. 简约画板 ​

simple
主题风格之简约画板，要求版本 >= 0.0.19
<template>
  <div class="page">
    <z-sign-board ref="board" them="simple"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>

3. 纸张 ​

paper
主题风格之纸张，要求版本 >= 0.0.19
<template>
  <div class="page">
    <z-sign-board ref="board" them="paper"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>

3. 信纸 ​

notepaper
主题风格之信纸，要求版本 >= 0.0.19
<template>
  <div class="page">
    <z-sign-board ref="board" them="notepaper"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>

3. 样式设置 ​

样式设置
搭配其它属性更快速的修改背景、画笔颜色、画笔大小等
<template>
  <div class="page">
    <z-sign-board ref="board" background="#eceff7" color="pink" size="8"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>

2. 高级设置 ​

高级设置
通过函数updateCvs、update自定义更多的样式和属性
<template>
  <div class="page">
    <z-sign-board ref="board"></z-sign-board>

    <div class="btnGroup">
      <a-button @click="() => board.save()" type="primary">保存</a-button>
      <a-button @click="() => board.clear()">清除</a-button>
      <a-button @click="() => board.queryUrl()">获取url</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted} from "vue";

const board = ref<any>(null);

onMounted(() => {
  setTimeout(() => {
    if (board.value) {
      // 使用update函数，修改颜色，大小等，它等于canvas.getContext("2d");
      board.value.update({
        strokeStyle: "red"
      });

      // 使用updateCvs，修改canvas元素，它等于canvas自身DOM元素document.getElementById(el)
    }
  })
})
</script>

<style scoped>
.page{
  display: flex;
}
.btnGroup{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}
.btnGroup button{
  margin-bottom: 12px;
}
</style>





API ​

props ​

参数说明类型默认值版本
width宽度string | number400px>= 0.0.18
height高度string | number300px>= 0.0.18
size画笔大小number4>= 0.0.18
color画笔颜色string#000000>= 0.0.18
background画布背景，支持url,rgb,rgba,hexstring透明>= 0.0.18
them主题样式：simple、paper、notepaperstring->= 0.0.19
bodyStyle修改canvas样式ObjectborderColor: #c1c1c1;borderRadius:4px;>= 0.0.18

background

背景默认为全透明，支持四种形式

  • URL：图片，网络图片不能跨域，不然无法获取、保存
  • RGB
  • RGBA
  • HEX

them

主题风格，除默认样式外，内置三种主题。
值得注意的是不管使用那种主题风格，在你保存时样式都不会被保存下来，如果你想给它添加一个能跟随保存的背景， 那么你应该使用 background 属性或使用 update 函数自定义

  • simple，简约画板
  • paper，纸张效果
  • notepaper，便签，信纸

事件 ​

在获取组件ref后调用

事件说明类型返回值版本
update更新canvas属性和配置，详见示列function(e: Object)boolean>= 0.0.18
updateCvs操作canvas自身DOM，详见示列function(e: Object)boolean>= 0.0.18
queryUrl获取签名，详见queryUrlfunction(type: string)string |File>= 0.0.18
clear清除签名，详见示列function>= 0.0.18
save保存下载签名，详见示列function>= 0.0.18
destroyed销毁canvas DOM元素，详见示列function>= 0.0.18

queryUrl ​

用于获取可被预览或上传的信息，接收一个string参数，参数说明如下

  • base64：返回一个base64字符串
  • file：返回一个File对象，版本要求 >= 0.0.19
vue
<template>
  <z-sign-board ref="board"></z-sign-board>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);

board.value.queryUrl("file");

代码示列 ​

vue
<template>
  <z-sign-board ref="board"></z-sign-board>
</template>

<script setup lang="ts">
import { ref } from "vue";

const board = ref<any>(null);

board.value.clear(); // 事件名称
</script>

高阶函数说明 ​

update，updateCvs ​

update 接收一个参数，参数类型为Object，用于修改canvas属性配置如画笔颜色、大小、曲线圆弧等

javascript
// 它的实质是：const ctx = canvas.getContext("2d")
board.value.update({
  // 属性配置
});
// 等同于：ctx.属性配置 = value;

updateCvs 接收一个参数，参数类型为Object ，用于操作canvas本身DOM元素

javascript
// 它的实质是：const el = document.getElementById(el);
board.value.updateCvs({
  // 属性配置
});
// 等同于：el.属性配置 = value;