1.2.15 • Published 2 years ago
signature-web v1.2.15
页面签章插件
标签引入方式
<link rel="stylesheet" href="https://unpkg.com/signature-web/lib/signature-web.css">
<script src="https://unpkg.com/signature-web/lib/signature-web.umd.min.js"></script>
npm 安装
npm install signature-web
initSignature方法参数说明
属性 | 说明 | 类型 | 是否必传 | 默认值 |
---|---|---|---|---|
busNo | 业务主键序列号不能重复 | string | 是 | - |
appCode | 应用编号 | string | 是 | - |
url | 服务请求地址 | string | 是 | - |
type | 业务类型 1-企业签章,2-个人签章 | number/string | 是 | - |
Signature类参数说明
属性 | 说明 | 类型 | 是否必传 | 默认值 |
---|---|---|---|---|
showImgNode | 生成签章图片位置的节点 | dom | 是 | - |
nodeTag | 签章的节点标识 | string | 是 | - |
width | 签章图片宽(px) | number | 否 | 200 |
height | 签章图片高(px) | number | 否 | 200 |
插件方法/类说明
方法/类名 | 说明 | 参数 | 返回值 |
---|---|---|---|
initSignature | 调用签章方法前的统一初始化方法 | 见上方参数说明 | Promise |
Signature | 签章类 | 见上方参数说明 | - |
Signature实例的方法说明
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
signature | 签章方法 | - | - |
validSeal | 校验签章 | - | - |
deleteSeal | 删除签章 | - | - |
toggleSeal | 显示/隐藏签章 | - | - |
使用步骤
1、初始化签章
必须在页面初始化的时候执行下方代码
window.testSignature = null
initSignature({
busNo: "", //业务主键序列号不能重复
appCode: "", //应用编号
url:"",
type:"2",
}).then(() => {
//签章数据源
let options = {
//展示签章图片的dom
showImgNode: document.getElementById("showImgNodeId"),
width: 200,
height: 200,
//保护HTML内容的标识符
nodeTag:"sg"
}
testSignature = new Signature(options)
})
}
2、签章
testSignature.signature()
注:testSignature为初始化中 Signature 实例对象
标签引入使用示例
<!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>Document</title>
<link rel="stylesheet" href="https://unpkg.com/signature-web/lib/signature-web.css">
<script src="https://unpkg.com/signature-web/lib/signature-web.umd.min.js"></script>
</head>
<body>
<div sg>测试html受保护内容</div>
<div id="ss" onclick="sig()">点击签章</div>
<script>
let testSignature = null
window.onload = function () {
initSignature({
busNo: 6, //业务主键序列号不能重复
appCode: "tianqin", //应用编号
url:"",
type:"2",
}).then(() => {
//需要签章的数据
let sgList = [{
//展示签章图片的dom
showImgNode: document.getElementById("ss"),
//保护HTML内容的标识符
nodeTag: "sg"
},
]
sgList.map(item => {
//创建签章数据源
let options = {
showImgNode: item.showImgNode,
width: 200,
height: 200,
nodeTag: item.nodeTag
}
testSignature = new Signature(options)
})
})
}
function sig() {
testSignature.signature()
}
</script>
</body>
</html>
npm 方式使用示例(vue)
<template>
<div id="app">
<input type="text"
sgone
value="sgone保护内容">
<p sgone>sgone保护内容</p>
<p sg>sg保护内容</p>
<div @click="sign('sgone')"
id="sgone"
style="margin-left:300px;margin-top:100px">
点击签章(sgone)
</div>
<div @click="sign('sg')"
id="sg"
style="margin-left:300px;margin-top:100px">
点击签章(sg)
</div>
<div @click="validSeal()">验全部章</div>
<div @click="deleteSeal()">删除全部章</div>
<div @click="taggerSeal()">显示/隐藏全部章</div>
</div>
</template>
<script>
import { initSignature, Signature } from "signature-web"
import "signature-web/lib/signature-web.css"
export default {
mounted() {
initSignature({
busNo: 5,//业务主键序列号不能重复
appCode: "tianqin",//应用编号
url: "",
type: '2',//业务类型 1-企业签章,2-个人签章
}).then(() => {
let sgList = [
{
showImgNode: document.getElementById("sg"),
nodeTag: "sg"
},
{
showImgNode: document.getElementById("sgone"),
nodeTag: "sgone"
}
]
this.$nextTick(() => {
sgList.map(item => {
let options = {
showImgNode: item.showImgNode,
width: 200,
height: 200,
nodeTag: item.nodeTag
}
this[item.nodeTag] = new Signature(options)
})
})
})
},
methods: {
//签章
sign(tag) {
if (this[tag]) {
this[tag].signature()
}
},
//校验所有签章
validSeal() {
this.sgone.validSeal()
this.sg.validSeal()
},
//删除所有章
deleteSeal() {
this.sgone.deleteSeal()
this.sg.deleteSeal()
},
//显示\隐藏所有章
taggerSeal() {
this.sgone.toggleSeal()
this.sg.toggleSeal()
},
}
}
</script>
1.2.0
2 years ago
1.2.8
2 years ago
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.12
2 years ago
1.1.11
2 years ago
1.1.10
2 years ago
1.1.13
2 years ago
1.2.9
2 years ago
1.2.12
2 years ago
1.2.13
2 years ago
1.2.10
2 years ago
1.2.11
2 years ago
1.2.14
2 years ago
1.2.15
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago