vue 移动端签名 全局引入

vue-signature

之前写过这个，只不过是在需要得页面单独引入。现在写下全局引入。
之前网上有说

main.js

import vueSignature from "vue-signature";
Vue.use(vueSignature);

XXX.vue

<template>
  <div class="home">
      <vueSignature
          ref="signature"
          :sigOption="option"
          :h="h"
          :w="w"
          :disabled="disabled"
          
      ></vueSignature>
  </div>
</template>

<script>
// @ is an alias to /src
// import vueSignature from "vue-signature"
export default {
  name: 'Home',
  data(){
    return {
      disabled:false,
      h: "100%",
      w: "100%",
      option: {
          penColor: "rgb(0, 0, 0)",
          backgroundColor: "rgb(255,255,255)"
      },
    }
  },
  components: {
    // vueSignature
  }
}
</script>
<style >
.home{
  height: 400px;
  width:100%;
  border:1px solid #eee
}
</style>

但是报错

分析原因，组件没有注册，接下来就去找到他得源码，并没有注册组件

解决：这里注册下

import VueSignature from './components/vueSignature.vue'
VueSignature.install = function(Vue) {
    Vue.component(VueSignature.name, VueSignature);
  };
export default VueSignature

也可以在项目中得main.js中注册

import vueSignature from "vue-signature";
VueSignature.install = function(Vue) {
    Vue.component(VueSignature.name, VueSignature);
  };
Vue.use(vueSignature);