Vue前端开发-Vant之Signature 组件

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

相关推荐
码上佳人7 分钟前
Echarts如何生成没有上下两端线的箱线图
前端·echarts
AndyGoWei13 分钟前
Web Worker 简单使用,看这篇文章就够了
javascript
tianchang14 分钟前
React Hook 解析(一):useCallback 与 useMemo
前端·react.js
炊烟行者16 分钟前
foreignObject
前端
OEC小胖胖28 分钟前
组件化(一):重新思考“组件”:状态、视图和逻辑的“最佳”分离实践
前端·javascript·html5·web
拾光拾趣录30 分钟前
用 Web Worker 计算大视频文件 Hash:从“页面卡死”到流畅上传
前端·javascript
伟大的兔神1 小时前
cesium绘制动态柱状图
前端·gis·cesium
前端拿破轮1 小时前
字节面试官:你对Promise很熟是吧?试一下手写所有静态方法
前端·面试·promise
一颗奇趣蛋1 小时前
React- useMemo & useCallback
前端·react.js
索西引擎1 小时前
HTML5 新特性:MutationObserver 详解
javascript