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

相关推荐
海天胜景13 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘33 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾37 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端