130 lines
4.4 KiB
Markdown
130 lines
4.4 KiB
Markdown
|
# jp-signature及jp-signature-popup 写字板
|
|||
|
|
## jp-signature 写字板，可用业务签名等场景，方便用户自行改造
|
|||
|
|
## jp-signature-popup 小白专用弹框签名组件，方便小白开发使用，和输入框一样使用简单
|
|||
|
|
|
|||
|
|
# 有项目需要开发的请联系 QQ:371524845
|
|||
|
|
## 开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新
|
|||
|
|
|
|||
|
|
## 平台兼容
|
|||
|
|
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
|||
|
|
| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
|
|||
|
|
| √ | √ | √ | 未测 | 未测 | 未测 | √ |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 代码演示
|
|||
|
|
|
|||
|
|
### jp-signature 基本用法
|
|||
|
|
```html
|
|||
|
|
<view style="width: 750rpx ;height: 500rpx;">
|
|||
|
|
<jp-signature ref="signatureRef" ></jp-signature>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<button @click="clear">清空</button>
|
|||
|
|
<button @click="">撤消</button>
|
|||
|
|
<button @click="save">保存</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
url: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
save(){
|
|||
|
|
this.$refs.signatureRef.canvasToTempFilePath({
|
|||
|
|
success: (res) => {
|
|||
|
|
// 是否为空画板 无签名
|
|||
|
|
console.log(res.isEmpty)
|
|||
|
|
// 生成图片的临时路径
|
|||
|
|
// H5 生成的是base64
|
|||
|
|
this.url = res.tempFilePath
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
clear(){
|
|||
|
|
this.$refs.signatureRef.clear()
|
|||
|
|
},
|
|||
|
|
undo(){
|
|||
|
|
this.$refs.signatureRef.undo()
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|||
|
|
| -------------- | ------------ | ---------------- | ------------ |
|
|||
|
|
| penSize | 画笔大小 | <em>number</em> | `2` |
|
|||
|
|
| minLineWidth | 线条最小宽 | <em>number</em> | `2` |
|
|||
|
|
| maxLineWidth | 线条最大宽 | <em>number</em> | `6` |
|
|||
|
|
| penColor | 画笔颜色 | <em>string</em> | `black` |
|
|||
|
|
| backgroundColor | 背景颜色 | <em>string</em> | `` |
|
|||
|
|
| type | 指定 canvas 类型 | <em>string</em> | `2d` |
|
|||
|
|
| openSmooth | 是否模拟压感 | <em>boolean</em> | `false` |
|
|||
|
|
| beforeDelay | 延时初始化，在放在弹窗里可以使用 （毫秒） | <em>number</em> | `0` |
|
|||
|
|
| maxHistoryLength | 限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能 | <em>boolean</em> | `20` |
|
|||
|
|
| landscape | 横屏 | <em>boolean</em> | `` |
|
|||
|
|
| disableScroll | 当在写字时，禁止屏幕滚动以及下拉刷新 | <em>boolean</em> | `true` |
|
|||
|
|
| boundingBox | 只生成内容区域，即未画部分不生成，有性能的损耗（微信小程序pc不支持） | <em>boolean</em> | `false` |
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 事件 Events
|
|||
|
|
|
|||
|
|
| 事件名 | 说明 | 回调 |
|
|||
|
|
| ------- | ------------ | -------------- |
|
|||
|
|
| undo | 撤消，回退到上一步 | |
|
|||
|
|
| clear | 清空，清空画板 | |
|
|||
|
|
| canvasToTempFilePath | 保存，生成图片，与官方保持一致，但不需要传canvasId | |
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
- 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加vif或beforeDelay="300"
|
|||
|
|
- boundingBox 微信小程序 pc 不支持, 因为获取不到 ImageData 数据
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## jp-signature-popup 基础用法
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<jp-signature-popup v-model="title"></jp-signature-popup>
|
|||
|
|
{{title}}
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
####参数
|
|||
|
|
| 参数名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| -------- | -------- | --------| --------|
|
|||
|
|
| value | String | | 签名内容，可以通过v-model绑定 |
|
|||
|
|
| label | String | 手写签名 | |
|
|||
|
|
| popup | Boolean | false | 是否隐藏原有样式，该模式只使用弹框 |
|
|||
|
|
| required | Boolean | false | |
|
|||
|
|
| placeholder | String | 点击签名 | 签名说明 |
|
|||
|
|
| readonly | Boolean | false | 是否只能可读 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
####方法
|
|||
|
|
| 方法名 | 返回参数 | 说明 |
|
|||
|
|
| -------- | -------- | --------|
|
|||
|
|
| toPop | | 打开弹窗 |
|
|||
|
|
| close | | 关闭弹窗 |
|
|||
|
|
| deleteImg | | 删除内容 |
|
|||
|
|
|
|||
|
|
####事假
|
|||
|
|
| 事件名 | 返回参数 | 说明 |
|
|||
|
|
| -------- | -------- | --------|
|
|||
|
|
| input | 签名内容 | 签名内容 |
|