83 lines
1.9 KiB
Markdown
83 lines
1.9 KiB
Markdown
#### 手写签名、电子签名组件，支持APP、微信小程序、H5
|
||
- 支持APP、微信小程序、H5
|
||
```
|
||
本插件为手写签名(电子签名)组件，支持APP、微信小程序、H5三端使用
|
||
```
|
||
|
||
- 组件属性说明
|
||
|
||
| 序号 | 属性名称|属性说明
|
||
|--|--|--|
|
||
|1 |settings|签名设置项，签名区域宽高、文字颜色等设置
|
||
|2 |base64|是否强制返回图片base64，默认为false，即返回的是临时地址
|
||
|
||
- settings属性说明
|
||
```
|
||
{ //签名设置
|
||
width: '750',//签名区域的宽
|
||
height: '500',//签名区域的高
|
||
lineWidth:3,//签名时线宽
|
||
textColor:'#007AFF' //签名文字颜色
|
||
}
|
||
```
|
||
|
||
- 组件事件说明
|
||
|
||
|序号|事件名称|事件说明
|
||
|--|--|--|
|
||
|1|change|点击保存/清除按钮事件，返回图片地址或图片base64（根据base64属性的值返回相应的结果），点击清除按钮是返回 ''
|
||
|
||
|
||
- 使用示例
|
||
```
|
||
<template>
|
||
<view>
|
||
<jushi-signature base64 :settings="settings" @change="signatureChange"></jushi-signature>
|
||
<view class="" style="margin-top: 20rpx;">
|
||
<text class="text">保存后的签名图片</text>
|
||
<view class="preview">
|
||
<image :src="imgUrl" mode="" style="width: 100%;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
settings:{ //签名设置
|
||
width: '750',//签名区域的宽
|
||
height: '500',//签名区域的高
|
||
lineWidth:3,//签名时线宽
|
||
textColor:'#007AFF' //签名文字颜色
|
||
},
|
||
imgUrl: ''
|
||
}
|
||
},
|
||
methods: {
|
||
signatureChange(e) {
|
||
this.imgUrl = e
|
||
console.log(e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.preview{
|
||
margin: 10rpx;
|
||
border: 1rpx solid #aaaaaa;
|
||
border-radius: 10rpx;
|
||
}
|
||
.text {
|
||
margin: 20rpx;
|
||
color: #aaaaaa;
|
||
}
|
||
</style>
|
||
```
|
||
- 备注
|
||
```
|
||
欢迎来邮件咨询和讨论，邮箱：1052775690@qq.com
|
||
```
|