Question

我是Vue的新手并尝试在'自定义'Vuejs组件中实现Jsignature。

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

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

'Jsignature'已定义但从未使用过从'../../ lib / jsignature
导入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)。 $el是指当前vue组件实例的标识符，基本上是组件中的第一个标记。根据您要选择的内容选择合适的方式，您应该使其正常工作。

Answer 2

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

这个'插件'是原生的javascript / html5，它使我的应用程序对JQuery等外部库的约束更少。

在vuejs组件中实现Jsignature

2 个答案: