vue-signature-pad在vue中实现电子签名效果。

首页需要下载依赖包

npm install --save vue-signature-pad

这里使用的是全局引用组件在main.js中

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

引用组件

首页需要下载依赖包

npm install --save vue-signature-pad

这里使用的是全局引用组件在main.js中

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

引用组件

  <template>
  <el-dialog
    :title="mainTitle"
    :visible.sync="editVisible"
    :modal-append-to-body="false"
    width="840px"
    @open="dlgOpen"
    @closed="dlgClosed"
    :close-on-click-modal="false"
  >
    <div id="app">
      <div class="container">
        <div class="row">
          <div class="col-12 mt-2">
            <VueSignaturePad
              id="signature"
              width="95%"
              height="400px"
              ref="signaturePad"
              :options="options"
            />
          </div>
        </div>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-button type="primary" plain @click="undo">撤销</el-button>
            </div>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-button type="success" plain @click="save">保存</el-button>
            </div>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-button type="warning" plain @click="change">换色</el-button>
            </div>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-button type="danger" plain @click="resume">重置</el-button>
            </div>
          </el-col>

          <el-col :span="4"
            ><div class="grid-content">
              <el-button type="danger" plain @click="close">关闭</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      editVisible: false,
      mainTitle: "用户签名",
      options: {
        penColor: "#000",
      },
    };
  },
  methods: {
    init(id) {
      this.editVisible = true;
    },
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();

      alert("Open DevTools see the save data.");
      console.log(isEmpty);
      console.log(data);
    },
    //切换颜色
    change() {
      if (this.options.penColor == "#00f") {
        this.options = {
          penColor: "#c0f",
        };
      } else {
        this.options = {
          penColor: "#00f",
        };
      }
    },
    //清除重置
    resume() {
      this.$refs.signaturePad.clearSignature();
    },
    //关闭
    close() {
      this.editVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
#signature {
  border: double 3px transparent;
  border-radius: 2px;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top left, #4bc5e8, #9f6274);
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin-bottom: 15px;
  margin-left: 19px;
}
</style>