更新记录

0.0.7（2023-06-26） 下载此版本

修复小程序真机中的相关bug

0.0.6（2023-06-19） 下载此版本

修复小程序无法显示线条问题

0.0.5（2023-06-09） 下载此版本

新增签名线条算法 使签名文字更接近毛笔 新增多种颜色选择（暂支持h5和app） 新增撤销功能 新增设置输出文件大小

平台兼容性

使用方法

• 注意
• 同一个页面不同的输入框需要设置不同的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调整到手机调试模式查看效果 实际效果演示

参数说明Props

相关同源插件

• 以页面形式展现
• 电子签名组件

相关致谢

• 插件参考 大佬的npm库