vue signature 电子签名

只修改3视图文件
文件夹位置放的相同 就不用改相对地址

1. npm install vue-signature-simple
2. 文件名index.js 与main.js同级

import VueSignature from './src/components/vue-signature'

if (typeof window !== 'undefined' && window.Vue) {
   
  window.Vue.component('vue-signature', VueSignature)
}

VueSignature.install = function (Vue) {
   
  Vue.component(VueSignature.name, VueSignature)
}

export default VueSignature

3. 视图文件 layout .vue

<template>
  <div class="home">
    <div class="container">
      <div class="section-1">
        <div class="row">
          <div class="col">
            <vue-signature
              ref="s1"
              :width="width"
              :height="height"
              :stroke-size="strokeSize"
              :stroke-color="strokeColor"
            />
            <ul class="colors">
              <li
                class="color"
                :style="{ background: item }"
                @click="changeColor(item)"
                v-for="item in colors"
                :key="item"
                :class="{ active: strokeColor === item }"
              ></li>
            </ul>
          </div>
          <!-- 图片 -->
          <div class="col">
            <img :src="signature" alt="signature" v-if="signature" class="signature">
            <div class