使用前需在插件市场安装插件 插件ID：lime-signature

HTML代码

<template>
  <view class='signature h-100'>
    <view class='h-100'>
      <l-signature
        disableScroll
        backgroundColor='#ddd'
        ref='signatureRef'
        :penColor='penColor'
        :penSize='penSize'
        :openSmooth='openSmooth'
      ></l-signature>
    </view>
    <view class='button'>
      <view @click='onClick("clear")'>
        <!-- clear按钮的SVG图标 -->
      </view>
      <view @click='onClick("undo")'>
        <!-- undo按钮的SVG图标 -->
      </view>
      <view @click='onClick("save")'>
        <!-- save按钮的SVG图标 -->
      </view>
    </view>
  </view>
</template>

JavaScript

<script>
export default {
  data() {
    return {
      title: 'Hello',
      penColor: 'red',
      penSize: 5,
      url: '',
      openSmooth: true
    }
  },
  methods: {
    onClick(type) {
      if (type == 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type == 'save') {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            console.log(res.isEmpty)
            // 生成图片的临时路径
            // H5 生成的是base64
            this.url = res.tempFilePath
          }
        })
        return
      }
      if (this.$refs.signatureRef)
        this.$refs.signatureRef[type]()
    }
  }
}
</script>

Css代码

<style>
.signature {
  position: relative;
}
.button {
  position: absolute;
  background: #fff;
  padding: 10px;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
}
.h-100 {
  height: 100%;
}
</style>

API

Props

事件 Events

Vue 2 和 Vue 3 的平台兼容性：