手写签名板

演示代码

html

<view style="height: 400rpx;width: 400rpx;background-color: #F1EFEF;">
  <page-signBoard ref="sign" :line-width='1'></page-signBoard>
</view> 
<page-btn @click="$refs.sign.clear()">清空画板</page-btn>
<page-btn @click="save">保存</page-btn>
<image :src="src" style="width: 200rpx;height: 200rpx;"></image>

<script>
  export default {
    data() {
      return { 
        src:'', 
      }
    },
    methods: {
      save(){
        this.$refs.sign.save().then(res=>{ 
          this.src=res
        })
      }
    }
  }
</script>

Attributes

属性名称	类型	可选值	默认值	说明
line-width	Number/String	任意整数	6	线宽
line-color	String	任意颜色值	#000000	线颜色
width	Number/String	任意整数	0,自动计算	画布宽，默认使用父组件的宽高。单位upx
height	Number/String	任意整数	400	画布高，单位upx

Methods

需要通过$refs.ref来实现。

方法名称	返回参数	返参类型	说明
clear	-	-	清空画板
save	签名图片地址	String	Promise风格

在 GitHub 上编辑此页

上次更新:

手写签名板 ​

演示代码 ​

Attributes ​

Methods ​

手写签名板

演示代码

Attributes

Methods