【Vue/Js】通过jSignature插件实现h5签名的完整可运行实例，横屏、竖屏两个实例（代码完整，直接运行）

原创

已于 2023-03-19 16:45:24 修改 · 2.4k 阅读

标签

#javascript #vue.js #前端

于 2023-03-18 12:00:31 首次发布

本文介绍了如何使用jSignature插件创建一个电子签名系统，包括竖屏和横屏实例。涉及到CSS样式设置、JavaScript初始化插件以及事件处理，如清除签名和保存提交。示例代码详细展示了签名区域的样式配置以及与用户的交互功能。

一、插件安装：

http://willowsystems.github.io/jSignature/#/about/

二、竖屏实例

注意：css中的# #signature {}与js中的初始化jSignature插件 $sigdiv.jSignature({})相呼应，这块是个坑呀！网上很有人说清这个坑。


    #signature {
        border: 2px solid #000;
        /* 设置边框 */
        border-radius: 4px;
        /* 设置边框圆角 */
        height: 500px;
        /* 设置签名区域的高度 */
        width: 96%;
        /* 设置签名区域的宽度 */
        background-color: rgb(255, 255, 255);
        color: rgb(255, 0, 0);
        margin: 0 auto;
    }

    // 初始化jSignature插件
    $sigdiv.jSignature({
        "decor-color": "transparent",
        "height": "100%",
        "width": "100%"
    });

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签名系统</title>
</head>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jSignature/jSignature.min.js"></script>
<link rel="stylesheet" href="css/body.css">
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<style>
    body {
        background-color: rgb(243, 243, 243);
    }

    #box {
        width: 100%;
        height: 100%;
        background-color: rgb(225, 225, 225);
    }

    #signature {
        border: 2px solid #000;
        /* 设置边框 */
        border-radius: 4px;
        /* 设置边框圆角 */
        height: 500px;
        /* 设置签名区域的高度 */
        width: 96%;
        /* 设置签名区域的宽度 */
        background-color: rgb(255, 255, 255);
        color: rgb(255, 0, 0);
        margin: 0 auto;
    }

    /* #region ========== search顶部导航区 ============= */


    #box {
        overflow: hidden;
    }

    #search {
        width: 100%;
        height: 55px;
        background-color: #2f63a7;
        padding-right: 10px;
    }

    /* 左箭头 */

    #search .left-class {
        padding-left: 15px;
        padding-top: 10px;
        font-size: 18px;
        color: white;
        overflow: hidden;
    }

    #search .left-class span {

        display: block;
        float: left;
        line-height: 28px;
        margin-right: 10px;
    }

    #search .left-class span:nth-child(2) {
        line-height: 32px;
    }

    /* #endregion */

    .sign_title {

        width: 94%;
        height: 55px;
        background-color: #000000;
        padding-right: 10px;
        margin: 0 auto;
        margin-top: 20px;
        text-align: