我用的是uniapp插件市场里面 “手写板-签名签字-lime-signature”
下面直接是代码 copy即用
<template>
<view style="width: 750rpx; height: 750rpx">
<l-signature disableScroll landscape ref="signatureRef" :penColor="penColor" :penSize="penSize"></l-signature>
</view>
<view>
<button @click="clear">清空</button>
<button @click="undo">撤消</button>
<button @click="save">保存</button>
</view>
</template>
<script setup>
import { ref } from 'vue';
const penColor = ref('red');
const penSize = ref(5);
const url = ref('');
const signatureRef = ref(null);
/* 保存 */
const save = () => {
signatureRef.value.canvasToTempFilePath({
success: (res) => {
console.log(res);
url.value = res.tempFilePath;
console.log(url.value);
}
});
};
/* 清空 */
const clear = () => {
signatureRef.value.clear();
};
/* 撤回 */
const undo = () => {
signatureRef.value.undo({
success: (res) => {
// 是否为空画板 无签名
console.log(res);
}
});
};
</script>
最终实现效果: