2017-02-06 27 views
0

我是Vue的新手,尝试在'自定义'Vuejs组件中实现Jsignature。在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> 
+0

你得到的任何错误? – Saurabh

+0

感谢您的提交,请参阅编辑 –

+1

这看起来像一个lint错误,如果您从'../../ lib/jsignature'中删除'import Jsignature,这将会执行,或者如果您在某处使用此变量'Jsignature',这将会发生。 – Saurabh

回答

0

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

这个插件是原生javascript/html5,这使得我的应用程序对像JQuery这样的外部库的约束更少。

1

决不Jsignature的工作,但我想你使用它作为一个jQuery插件。 你的问题是在this.$signaturecanvas。这在某种程度上是通过jQuery获取div的错误方法。

var element = ("#signaturecanvas")var element = $(this.$el)如果你想选择整个组件。 $el引用当前vue组件实例的标识符,基本上是组件的第一个标签。根据你想要选择的方式选择适当的方式,你应该让它工作。