83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
### 使用方法
|
||
* 注意
|
||
+ 同一个页面不同的输入框需要设置不同的canvasId和canvasIds，否则在同一个页面会出现冲突
|
||
```
|
||
<template>
|
||
<view class="content">
|
||
<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="header" :action="action"
|
||
@signToUrl="signToUrl">
|
||
</signInput>
|
||
</view>
|
||
</template>
|
||
```
|
||
```
|
||
<script>
|
||
import signInput from "@/components/am-sign-input/am-sign-input.vue"
|
||
export default {
|
||
components: {
|
||
signInput
|
||
},
|
||
data() {
|
||
return {
|
||
action: "", //上传服务器的地址
|
||
header: {}, //图片上传携带头部信息
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @param {Object} e
|
||
* 签名完成回调
|
||
*/
|
||
signToUrl(e) {
|
||
if (e.error_code && e.error_code === '201') {
|
||
uni.showToast({
|
||
title: e.msg,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
```
|
||
<style lang="scss">
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
#### 实际效果演示H5
|
||
- 打开演示后，按F12调整到手机调试模式查看效果
|
||
[实际效果演示](https://static-mp-2766f90e-0e50-4c71-87fb-0ab51aedcf85.next.bspapp.com/signInput/#/)
|
||
|
||
### 参数说明Props
|
||
|
||
参数|类型|说明|必传
|
||
---|---|---|---
|
||
action|String|生成图片后上传的接口地址|true
|
||
canvasId|String|canvasId|true
|
||
canvasIds|String|canvasIds与上一个id不可重复|true
|
||
header|Object|文件上传携带的头部属性|true
|
||
outSignWidth|Number|输出图片文件大小-宽度|false
|
||
outSignHeight|Number|输出图片文件大小-高度|false
|
||
minSpeed|Number|画笔最小速度|false
|
||
minWidth|Number|线条最小粗度|false
|
||
maxWidth|Number|线条最大粗度|false
|
||
openSmooth|Boolean|开启平滑线条（笔锋）|false
|
||
maxHistoryLength|Number|历史最大长度(用于撤销的步数)|false
|
||
maxWidthDiffRate|Number|最大差异率|false
|
||
undoScan|Number|撤销重新渲染偏移缩放校准|false
|
||
bgColor|String|背景色如#ffffff 不传则为透明|false
|
||
|
||
### 相关同源插件
|
||
- 以页面形式展现
|
||
- [电子签名组件](https://ext.dcloud.net.cn/plugin?id=5768)
|
||
|
||
### 相关致谢
|
||
- 插件参考 [大佬的npm库](https://github.com/linjc/smooth-signature) |