vue 手写签名（v1.1.4）_html vue签字写法-CSDN博客

本文链接：https://blog.csdn.net/u010911649/article/details/126319970

vue-esign是一款用于Vue项目的轻量级手写签名组件，支持生成图片、清空画板等功能。本文介绍如何安装及使用该组件，并提供详细的配置选项说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件：vue-esign可实现手写签名，支持生成图片、清空画板等操作。目前不支持撤回笔画。

vue-esign GitHub地址

demo地址

步骤：

1、安装

npm install vue-esign --save

2、使用

2.1、全局使用

2.1.1、vue2

import vueEsign from 'vue-esign';
Vue.use(vueEsign);

2.1.2、vue3

import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'
const app = createApp(App)
app.use(vueEsign)

2.2、局部使用

import vueEsign from 'vue-esign'
components: { vueEsign }

3、html部分

3.1、vue2

<vue-esign 
    ref="esign" 
    :width="800" 
    :height="300" 
    :isCrop="isCrop" 
    :lineWidth="lineWidth" 
    :lineColor="lineColor" 
    :bgColor.sync="bgColor" />

3.2、vue3

<vue-esign 
    ref="esign" 
    :width="800" 
    :height="300" 
    :isCrop="isCrop" 
    :lineWidth="lineWidth" 
    :lineColor="lineColor" 
    v-model:bgColor="bgColor" />

3.3、操作按钮

<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>

4、script

4.1、数据

data () {
    return {
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        resultImg: '',
        isCrop: false
    }
},

4.2、操作方法

methods: {
    //清空画板
    handleReset () {
        this.$refs.esign.reset()
    },
    //生成图片
    handleGenerate () {
        this.$refs.esign.generate().then(res => {
            console.log(res)
        }).catch(err => {
            alert(err) // 画布没有签字时会执行这里 'Not Signned'
        })
    }
}

5、组件相关设置

属性	类型	默认值	说明
width	Number	800	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	Number	4	画笔粗细
lineColor	String	#000000	画笔颜色
bgColor	String	空	画布背景色，为空时画布背景透明，支持多种格式： '#ccc' '#E5A1A1' 'rgb(229,161,161)' 'rgba(0,0,0,0.6)' 'red'
isCrop	Boolean	false	是否裁剪在画布设定尺寸基础上裁掉四周空白部分
isClearBgColor	Boolean	true	清空画布时（reset）是否同时清空设置的背景色（bgColor）
format	String	image/png	生成图片格式 image/jpeg：jpg格式下生成的图片透明背景会变黑色，请慎用或指定背景色 image/webp
quality	Number	1	生成图片质量在指定图片格式为image/jpeg 或 image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其它参数会被忽略。