z-base-ui

Appearance

ZSign ​

签字版，用于某些场景下的电子签名。 版本要求 >= 1.0.36

基础用法 ​

您的游览器暂不支持Canvas！ 
<template>
  <div class="box">
    <z-sign width="858" fill="#f0f0f0"></z-sign>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>

</style>

背景 ​

使用 src 和 fill 进行背景设置。

  • src 通过传入一个本地或是在线的图片地址，进行背景图设置。
  • fill 通过传入一个色值，进行单色背景设置。
  • 您可以将两者结合使用，这并不冲突。

fill

您的游览器暂不支持Canvas！

src

您的游览器暂不支持Canvas！

fill + src

您的游览器暂不支持Canvas！ 
<template>
  <div class="box">
    <div class="item">
      <h1>fill</h1>
      <z-sign width="400" height="400" fill="#f0f0f0"></z-sign>
    </div>


    <div class="item">
      <h1>src</h1>
      <z-sign width="400" height="400" src="https://images.unsplash.com/photo-1733173523386-3006dec1a835?q=80&w=2705&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></z-sign>
    </div>

    <div class="item">
      <h1>fill + src</h1>
      <z-sign
        width="858"
        fill="#f0f0f0"
        src="/logo.png"
      ></z-sign>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px 0;
}
</style>

画笔 ​

您的游览器暂不支持Canvas！
0
画笔大小
画笔颜色
<template>
  <div class="box">
    <z-sign fill="#f0f0f0" :config="config"></z-sign>

    <div class="menu">
      <z-slider v-model:value="config.size"></z-slider>
      <div class="mb24">画笔大小</div>

      <input type="color" v-model="config.color"/>
      <div>画笔颜色</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import type { ISignCanvasConfig } from "@d7ee/z-base-ui/dist/types/components/ZSign";

const config = reactive<ISignCanvasConfig>({
  color: "#000",
  size: 5
});
</script>

<style scoped>
.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.menu {
  margin-top: 42px;
  width: 300px;
}
.mb24{
  margin-bottom: 24px;
}
</style>

功能一览 ​

受支持的各项功能，包括但不限于下载，导出，撤销，橡皮擦。

您的游览器暂不支持Canvas！ 
<template>
  <div class="box">
    <z-sign ref="signRef" width="858" fill="#f0f0f0"></z-sign>

    <div class="btn">
      <z-button type="primary" @click="download">下载</z-button>
      <z-button type="warning" @click="quash">撤销</z-button>
      <z-button type="warning" @click="eraser">橡皮擦</z-button>
      <z-button type="danger" @click="clearCanvas">清空画布</z-button>
    </div>
  </div>
</template>

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

const signRef = ref<HTMLDivElement | null>(null);

const download = () => {
  if (!signRef.value) return;
  signRef.value.exportImg().then(() => {
    //
  }).catch(() => {
    //
  })
}

const quash = () => {
  if (!signRef.value) return;
  signRef.value.quash();
}

const eraser = () => {
  if (!signRef.value) return;
  signRef.value.eraser();
}

const clearCanvas = () => {
  if (!signRef.value) return;
  signRef.value.clearCanvas();
}
</script>

<style scoped>
.btn {
  margin-top: 24px;
}
</style>

API 属性 ​

属性名说明类型默认值
width画布宽度number | string500
height画布高度number | string500
src背景图string—
fill背景色string—
transparently下载导出时背景为透明boolean—
color橡皮擦颜色string—
config画笔配置项ISignCanvasConfig—

config ​

属性名说明类型默认值
size画笔、橡皮擦大小number5
color画笔颜色string#000

slot 插槽 ​

slotName说明参数
eraser橡皮擦

event 事件 ​

以下事件均通过refs.xxx的形式调佣

事件名称说明参数返回值
updateConfig手动更新configISignCanvasConfig无
exportImg导出或下载图片使用(state:? boolean, fileName?: string)Promise
quash撤销，恢复到上一个动作
eraser进入橡皮擦模式，再调用一次关闭
clearCanvas清除画布

exportImg ​

用于导出或下载签名，接收两个可选参数state和fileName。

  • state: 类型为 boolean，默认为 true，下载，false 时取消下载并返回一个base64
  • fileName：自定义文件名，不传递时默认以当前时间戳为文件名，传递时无需携带后缀名
vue
<template>
  <z-sign ref="signRef"></z-sign>
</template>

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

const signRef = ref<any>(null);

const donwload = () => {
  signRef.value.exportImg(true, "自定义文件名").then(res => {
    console.log(res);
  }).catch(e => {
    console.log(e);
  });
}
</script>

类型声明 ​

ISignCanvasConfig ​

typescript
interface ISignCanvasConfig {
  // 画笔颜色
  color?: number;
  // 画笔、橡皮擦大小
  size?: number;
}