签名组件 / sign-canvas二次组件封装

1.下载 sign-canvas

cnpm install sign-canvas --save

2.引入

• 全局引入

// main.js中引入
import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);

• 按需引入

// 引入
import SignCanvas from "sign-canvas";
// 注册
components: { SignCanvas }

3.组件封装

<template>
  <div>
    <el-dialog title="在线签名"
               :width="signDialogWidth"
               v-dialogDrag
               :visible.sync="visible">
      <sign-canvas class="sign-canvas"
                   ref="SignCanvas"
                   :options="signOptions"
                   v-model="value" />
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="visible = false"
                   size="small">取 消</el-button>
        <el-button type="danger"
                   size="small"
                   @click="canvasClear">清 空</el-button>
        <el-button type="success"
                   size="small"
                   @click="downloadSignImg">下 载</el-button>
        <el-button type="primary"
                   size="small"
                   @click="saveHandle">保 存</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import SignCanvas from 'sign-canvas'
export default {
  data() {
    return {
      visible: false,
      value: null,
      signDialogWidth: '',
      signOptions: {
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
        lineJoin: 'round', //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 750, //canvas宽高 [Number] 可选
        canvasHeight: 460, //高度  [Number] 可选
        isShowBorder: false, //是否显示边框 [可选]
        bgColor: '#f4f0ea', //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: '#ff787f', //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: '#101010', // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: 'png', //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
    }
  },
  components: {
    SignCanvas,
  },
  methods: {
    init() {
      this.visible = true
      this.initSignConfig()
      this.$nextTick(() => {
        this.$refs.SignCanvas.canvasClear()
      })
    },
    // 初始化配置信息
    initSignConfig() {
      this.signDialogWidth = `${document.body.offsetWidth / 2 + 40}px`
      this.signOptions.canvasWidth = document.body.offsetWidth / 2
      this.signOptions.canvasHeight = document.body.offsetHeight / 2
    },
    // 清空
    canvasClear() {
      this.$refs.SignCanvas.canvasClear()
    },
    // 保存
    saveHandle() {
      const img = this.$refs.SignCanvas.saveAsImg()
      this.$emit('input', img)
      this.visible = false
    },
    // 下载图片
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg()
    },
  },
}
</script>
<style lang="scss" scoped>
.sign-canvas {
  border-radius: 8px;
}
</style>

4.组件中使用

<template>
    <div>
        <el-card align="left" shadow="hover">
            <div slot="header">
                <span>签 名</span>
                <el-button type="primary" @click="signatureHandle" style="float:right" size="small">点击签名</el-button>
            </div>
            <div>
                <img :src="img" class="qm" />
            </div>
        </el-card>
        <!-- 签名弹框 -->
        <SignatureCanvas ref="SignatureCanvasRef" v-model="img" />
    </div>
</template>

<script>
import SignatureCanvas from '@/components/signature.vue'
export default {
    data () {
        return {
            img: null,
        }
    },
    components: {SignatureCanvas},
    methods: {
        signatureHandle () {
            this.$refs.SignatureCanvasRef.init()
        }
    }
}
</script>