签名组件

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

参数说明

参数	说明	类型	是否必填	默认值
height	盒子高度	number	否	pc时有效：500
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'

方法

函数名	参数类型	说明
@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