签名组件

1. 适配了PC端和移动端，PC端高度为500， 默认层级为101， 按钮组高度默认为54
2. 除直接生成签名图片外，还包含撤回、重做和清空的功能
3. 追加了背景色、画笔颜色以及画笔宽度的配置

参数说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | |:---------:|:------:|:--------------------------------------------------------------:|:----:|:-----------:| | height | 盒子高度 | number | 否 | 正置时有效默认为500 | | isRotate | 是否旋转 | boolean | 否 | false | | zIndex | 盒子层级 | number | 否 | 101 | | penColor | 画笔颜色 | string | 否 | '#000' | | penWidth | 画笔宽度 | string丨number | 否 | 2 | | bgc | 背景色 | string | 否 | '#f5f5f5' | | btnHeight | 按钮组的高度 | number | 否 | 54 | | btns | 按钮组 | Array<'back'丨'redo'丨'clear'>丨'back'丨'redo'丨'clear'丨'all' | 否 | 'all' |

插槽

| 插槽名 | 说明 | 接收参数 | |:----------------:|:-----:|:-------------------------------------------------------------------------------------------------------------------------------------------------------:| | custom-btn-group | 自定义按钮 | {generatePicture:()=>void;/* 生成图片 */handleGoBack:()=>void;/* 撤回 */handleOverwrite:()=>void;/* 清空 */handleRedo:()=>void;/* 重做 */} |

方法

| 函数名 | 参数类型 | 说明 | |-----------|-------------------|--------------------| | @buildImg | Promise<string> | 成功返回图片字符串，失败返回错误提示 |

使用方式

在main.ts中引入

import YkSignPad from "@yuke_2022/yk-sign-pad";

createApp(App)
  .use(YkSignPad)
  .mount('#app');

在*.vue中单独引入

import { YkSignPad } from "@yuke_2022/yk-sign-pad";

在*.vue文件使用

<script setup lang="ts">
import { ref } from 'vue';
import { message } from "ant-design-vue";
import 'ant-design-vue/es/message/style/index.css'

const signImg = ref("");

function getImg(result: Promise<string>) {
  result.then((img)=>{
    signImg.value = img;
  })
    .catch((err)=>{
      message.error(err);
    });
}
</script>

<template>
  <img v-if="signImg" :src="signImg" alt="" />
  <YkSignPad @buildImg="getImg"></YkSignPad>
</template>

相关地址

Github

npm