在 vuejs 组件中实现 Jsignature

Question

我是 Vue 新手，正在尝试在 'custom' Vuejs 组件中实现 Jsignature。

我的解决方案基于：https://vuejs.org/v2/examples/select2.html

它应该是直截了当的，但是我没有让它工作，到目前为止我得到的解决方案导致以下错误：

'Jsignature' is defined but never used
import Jsignature from '../../lib/jsignature

包含签名的组件。

<template>
  <div>
    <app-signature></app-signature>
  </div>
</template>
<script>
  import Signature from './signature/Signature.vue'

  export default {
   components: {
     appSignature: Signature
    }
  }
</script>

签名组件。

<template>
  <div id="signaturecanvas"></div>
</template>
<script>
  import Jsignature from '../../lib/jsignature'

  export default {
    data () {
      return {
        signature: ''
      }
    },
    methods: {
      initial () {
        var element = ('#signaturecanvas')
        element.Jsignature.jSignature()
      }
    },
    created () {
      this.initial()
    }
  }
</script>
<style></style>

Answer 1

从未使用过 Jsignature，但我想您将其用作 jquery 插件。您遇到的问题就在 this.$signaturecanvas。这是通过 jQuery 获取 div 的错误方法。

var element = ("#signaturecanvas") 或 var element = $(this.$el) 如果您想 select 编辑整个组件。 $el 指的是当前vue组件实例的标识符，基本上是组件的第一个标签。根据您想要的 select 选择适当的方式，您应该可以让它正常工作。

Answer 2

我没有导入 JQuery 和 JSignature，而是选择使用签名板。 https://github.com/szimek/signature_pad

这个 'plug-in' 在原生 javascript/html5 中，这使得我的应用程序对 JQuery 等外部库的限制更少。

在 vuejs 组件中实现 Jsignature

Implement Jsignature within vuejs component

javascript

vue.js

jsignature