Vue前端开发-Vant之Signature 组件

川石教育2025-03-04 8:41

Signature组件用于页面的手写签名，它的功能基于Canvas实现，Vant版本必须大于或等于4.3.0才能使用该组件，当完成签名并触发绑定的submit事件后，在事件中，可以获取格式为base64字符串的签名图片，用于保存签名数据和显示签名效果。

Signature组件常用的属性如下表11-8所示。

　　Signature组件常用的事件如下表11-9所示。

　　接下来通过一个完整的案例来演示使用Signature组件实现的效果。

实例11-6 Signature组件

1. 功能描述

创建一个页面，添加van-signature组件，设置组件的背景色和笔的线宽及颜色，当签名完成后，点击"确认"按钮后，将签名后的内容显示在图片中。

2. 实现代码

在项目的components 文件夹中，添加一个名为"Sign"的.vue文件，该文件的保存路径是"components/ch11/form/"，在文件中加入如清单11-6所示代码。

代码清单11-6 Sign.vue代码

typescript 复制代码

<template>
    <h3>Signature 组件</h3>
    <div class="row">
        <p>请书写签名</p>
        <van-signature pen-color="#ff0000" 
	   :line-width="6" background-color="#eee"
 @submit="onSubmit" @clear="onClear" />
        <van-image v-if="imgUrl" :src="imgUrl" />
    </div>
</template>
<script>
import { showToast } from 'vant';
export default {
    data() {
        return {
            imgUrl: ""
        }
    },
    methods: {
        onSubmit(data) {
            this.imgUrl = data.image;
        },
        onClear() {
            showToast('clear')
        }
    }
}
</script>
<style scoped>
.row {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: solid 1px #eee;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图11-8所示

　　4. 源码分析

van-signature 组件签名完成后，只有绑定了submit事件后，才能在该事件中获取签名保存的图片，图片的格式是base64位的字符串，点击"清空"按钮时，将会触发绑定的 clear事件，在clear事件中，自动清空canvas元素原有内容，重新签名。