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代码
<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元素原有内容，重新签名。
