sh-signature

web signature 的 Vue.js 组件。 web 电子签名组件，同时支持 Vue.js 2/3。

Attributes

单人签

| Name | Description | | ------------------ | ------------------------------ | | model-value / v-model | 是否显示 弹窗 | | billCode | 签名单ID | | appendToBody | Dialog 自身是否插入至 body 元素上 | | signatureToken | 项目生成的 签名token | | envType | 环境 - 默认为 生产环境 prd |

组合签

| Name | Description | | ------------------ | ------------------------------ | | model-value / v-model | 是否显示 弹窗 | | billCode | 签名单ID | | userCode | 当前用户工号 | | appendToBody | Dialog 自身是否插入至 body 元素上 | | signatureToken | 项目生成的 签名token | | envType | 环境 - 默认为 生产环境 prd |

安装 & 使用

npm install @shinho-sh/sh-signature --save

由于不同项目接入签名组件时 token 不同，需将 token 在组件中传入

ECM

// main.js
import Vue from 'vue'
import App from './App.vue'
import { ShSignature, ShMultiuSignature } from '@shinho-sh/sh-signature'

Vue.component(ShSignature.name, ShSignature);
Vue.component(ShMultiuSignature.name, ShMultiuSignature);

new Vue({
  render: h => h(App),
}).$mount('#app')

<!-- page.vue -->
<template>
  <div id="app">
    <button @click="handleClick">会签</button>
    <ShMultiuSignature v-model="visible" :billCode="billCode" :userCode="userCode"></ShMultiuSignature>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      visible: false,
      billCode: "",
      userCode: ""  // 工号
    }
  },
  methods: {
    handleClick () {
      // TODO 调用创建业务单接口，获取 billCode
      this.visible = true
    }
  }
}
</script>

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import { ShSignature, ShMultiuSignature } from '@shinho-sh/sh-signature';

function installUI (app) {
  app.component(ShSignature.name, ShSignature)
  app.component(ShMultiuSignature.name, ShMultiuSignature);
}

const ins = createApp(App)
installUI(ins)
ins.mount('#app')

<template>
  <button @click="handleClick">会签</button>
  <ShMultiuSignature v-model="visible" :billCode="billCode" :userCode="userCode"></ShMultiuSignature>
</template>

<script>
import { ref } from "vue"
export default {
  name: 'App',
  setup () {
    const visible = ref(false)
    const info = reactive({
      billCode: "",
      userCode: "" // 工号
    })

    const handleClick = () => {
      // TODO 调用创建业务单接口，获取 billCode
      visible.value = true
    }

    return {
      visible,
      handleClick
    }
  }
}
</script>

demo 对应地址

examples
│   ├── signature
│   │   ├── multiuSignature.vue
│   │   └── signature.vue

CDN & 全局变量

用如下方式在 HTML 中插入 <script> 标签，并且通过 window.ShSignature 来访问组件接口：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="../../../dist/vue3/dist/index.umd.js"></script>

const app = Vue.createApp(...)

// 全局注册组件（也可以使用局部注册）
app.use(ShSignature)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../../../dist/vue2/dist/index.umd.js"></script>

// 全局注册组件（也可以使用局部注册）
Vue.use(ShSignature)

demo 地址

examples
│   └── umd
│       ├── vue2-umd-test.html
│       └── vue3-umd-test.html

组件本地开发

$ npm i
$ npm run serve

• 打开 http://localhost:8080/signature 来查看 个人签demo。
• 打开 http://localhost:8080/multiu/signature 来查看 组合签demo。