main.js引入文件

import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);

 

根据报错提示安装依赖:

npm install --save sign-canvas

 组件文件on-line:

<template>
  <div class="sign">
    <el-dialog title="在线签名" :visible.sync="visible" :show-close="false">
      <sign-canvas
        class="sign-canvas"
        ref="SignCanvas"
        :options="options"
        v-model="value"
      />
      <div class="btnList">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="canvasClear()"
          >清空</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-check"
          @click="saveAsImg()"
          >保存</el-button
        >
        <el-button
                 type="info"
                  size="small"
                  icon="el-icon-download"
                  circle
                  @click="downloadSignImg()"
                  >下载</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "signDialog",
  props: {
    //弹窗变量
    visible: {
      type: Boolean,
      default: false
    },
    //图片信息Base64
    src: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      value: null,
      options: {
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 700, //canvas宽高 [Number] 可选
        canvasHeight: 450, //高度  [Number] 可选
        isShowBorder: false, //是否显示边框 [可选]
        bgColor: "#fcc", //背景色 [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本是透明背景的
      }
    };
  },
  methods: {
    /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },

    /**
     * 保存图片
     */
    saveAsImg() {
      const img = this.$refs.SignCanvas.saveAsImg();
      console.log()
      //alert(`image 的base64：${img}`);
      this.$emit("update:visible", false);
    },

    /**
     * 下载图片
     */
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg();
    }
  }
};
</script>

<style lang="stylus" scoped>
.sign >>> .el-dialog{
    background: #b4a078;
    width:100%;
}
.sign >>> .el-dialog__header {
    padding 2px 0px
}

.sign >>> .el-dialog__body {
    padding 0
}
.sign >>> .el-button{
    /*font-family STXingkai*/
    font-size 12px
    font-weight 400
}
.btnList{
    padding 5px
}
.sign >>> .el-dialog__title {
    line-height: 32px;
    font-size: 24px;
    /*font-family STXingkai*/
    color: hsl(40, 28.57% , 30.82%);
    text-shadow: 0 .03em .03em black;
 }
.sign-canvas {
    display: block;
    margin: 0 auto;
    background: #f4f0ea;
    border-radius: 8px;
}
</style>

引用组件的文件:

<template>
    <div class="signing-small-screen">
           <sign-dialog
                  :visible.sync="receiverSignFlag"
                  @change="handleReceiverSign"
                ></sign-dialog>

                <!-- <template
                  v-if="getReceiver != null && getReceiver != undefined"
                >
                  <img :src="getReceiver" width="80" height="60" />
                </template> -->
                <el-button
                  type="primary"
                  @click="handleReceiverFlag"
                  icon="el-icon-edit"
                  size="small"
                  style="float: right;margin-top: 15px;"
                  >签名</el-button
                > 
    </div>
</template>

<script>

export default {
    components: {
        "sign-dialog":()=>import("@/pages/sign-up-screen/on-line")
    },
    data() {
        return {
        receiverSignFlag:false,
        };
    },
    computed: {},
    watch: {},
    methods: {
        handleReceiverSign(){
            this.receiverSignFlag=true
        },
        handleReceiverFlag(){
            this.receiverSignFlag=true
        }
    },

    }
</script>
<style lang='scss' scoped>

</style>

效果图:

在当前文件使用,不用组件模式

<template>
  <div class="sign">
  
      <sign-canvas
        class="sign-canvas"
        ref="SignCanvas"
        :options="options"
        v-model="value"
      />
      <div class="btnList">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="canvasClear()"
          >清空</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-check"
          @click="saveAsImg()"
          >保存</el-button
        >
        <el-button
                 type="info"
                  size="small"
                  icon="el-icon-download"
                  circle
                  @click="downloadSignImg()"
                  >下载</el-button>
      </div>
  
  </div>
</template>
 
<script>
export default {
  name: "signDialog",
  props: {
    //弹窗变量
    visible: {
      type: Boolean,
      default: false
    },
    //图片信息Base64
    src: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      value: null,
      options: {
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 700, //canvas宽高 [Number] 可选
        canvasHeight: 450, //高度  [Number] 可选
        isShowBorder: false, //是否显示边框 [可选]
        bgColor: "#fcc", //背景色 [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本是透明背景的
      }
    };
  },
  methods: {
    /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },
 
    /**
     * 保存图片
     */
    saveAsImg() {
      const img = this.$refs.SignCanvas.saveAsImg();
      //alert(`image 的base64：${img}`);
      // this.$emit("update:visible", false);
    },
 
    /**
     * 下载图片
     */
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg();
    }
  }
};
</script>
 
<style lang="stylus" scoped>
.sign >>> .el-dialog{
    background: #b4a078;
    width:100%;
}
.sign >>> .el-dialog__header {
    padding 2px 0px
}
 
.sign >>> .el-dialog__body {
    padding 0
}
.sign >>> .el-button{
    /*font-family STXingkai*/
    font-size 12px
    font-weight 400
}
.btnList{
    padding 5px
}
.sign >>> .el-dialog__title {
    line-height: 32px;
    font-size: 24px;
    /*font-family STXingkai*/
    color: hsl(40, 28.57% , 30.82%);
    text-shadow: 0 .03em .03em black;
 }
.sign-canvas {
    display: block;
    margin: 0 auto;
    background: #f4f0ea;
    border-radius: 8px;
}
</style>

 

 参考链接:https://www.jianshu.com/p/5c8f7016b886

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue