vue 实现在线签名

安装：

npm install vue-esign --save

使用：

   1. main.js 中引入

 importvueEsignfrom'vue-esign '

 Vue.use(vueEsign)

    2.页面中使用 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()

<el-row>

      <el-col :span="3" style="display: flex;">

        <div class="esign-group">

          <label>画笔粗细：</label>

          <el-select  v-model="lineWidth" placeholder="请选择" size="small">

              <el-option key="2" label="2" value="2"></el-option>

              <el-option key="4" label="4" value="4"></el-option>

              <el-option key="6" label="6" value="6"></el-option>

              <el-option key="8" label="8" value="8"></el-option>

              <el-option key="10" label="10" value="10"></el-option>

          </el-select>

        </div>

      </el-col>

      <el-col :span="3">

        <div class="esign-group">

          <label>画笔颜色：</label>

          <el-color-picker v-model="lineColor" size="small"></el-color-picker>

        </div>

      </el-col>

      <el-col :span="3">

        <div class="esign-group">

          <label>画布背景：</label>

          <el-color-picker v-model="bgColor" size="small"></el-color-picker>

        </div>

      </el-col>

      <el-col :span="3">

        <div class="esign-group">

          <label>是否裁剪：</label>

          <el-switch

            v-model="isCrop">

          </el-switch>

        </div>

      </el-col>

    </el-row>

  <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"   :bgColor.sync="bgColor" />

  <el-button type="primary" size="small" @click="handleReset">清空画板</el-button>

    <el-button type="success" size="small" @click="handleGenerate">生成图片</el-button>

data () {

  return {

    lineWidth: 6,

    lineColor: '#000000',

    bgColor: '',

    resultImg: '',

    isCrop: false

  }

},

methods: {

  handleReset () {

    this.$refs.esign.reset()

  },

  handleGenerate () {

    this.$refs.esign.generate().then(res => {

      this.resultImg = res

    }).catch(err => {

      alert(err) // 画布没有签字时会执行这里 'Not Signned'

    })

  }

}