Sard Uniapp

Appearance

在新窗口打开⤴

Signature签名1.12+

介绍 ​

用于签名场景的组件，基于 Canvas 实现。

引入 ​

js
import Signature from 'sard-uniapp/components/signature/signature.vue'

代码演示 ​

基础使用 ​

书写完签名，点击确定按钮会触发 confirm 事件，并接收图片的 dataURL 或临时文件路径，如果没有书写或者点击了清空按钮，则会得到空字符串。

vue
<template>
  <sar-signature @confirm="onConfirm" target="filePath"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataURL = ref('')

const onConfirm = (url: string) => {
  dataURL.value = url
}
</script>
vue
<template>
  <sar-signature @confirm="onConfirm" target="filePath"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="js">
import { ref } from "vue";
const dataURL = ref("");
const onConfirm = (url) => {
  dataURL.value = url;
};
</script>

画笔颜色 ​

使用 color 属性可以设置画笔的颜色。

vue
<template>
  <sar-signature color="red" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataURL = ref('')

const onConfirm = (url: string) => {
  dataURL.value = url
}
</script>
vue
<template>
  <sar-signature color="red" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="js">
import { ref } from "vue";
const dataURL = ref("");
const onConfirm = (url) => {
  dataURL.value = url;
};
</script>

画笔粗细 ​

使用 line-width 属性可以设置画笔的粗细。

vue
<template>
  <sar-signature :line-width="5" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataURL = ref('')

const onConfirm = (url: string) => {
  dataURL.value = url
}
</script>
vue
<template>
  <sar-signature :line-width="5" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="js">
import { ref } from "vue";
const dataURL = ref("");
const onConfirm = (url) => {
  dataURL.value = url;
};
</script>

背景色 ​

使用 background 属性可以设置画板的颜色，默认为透明。如果想在最终生成的图片背景为透明的情况下设置书写时的背景颜色，则可以使用 --sar-signature-canvas-bg css 变量来设置。

vue
<template>
  <sar-signature background="#eee" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataURL = ref('')

const onConfirm = (url: string) => {
  dataURL.value = url
}
</script>
vue
<template>
  <sar-signature background="#eee" @confirm="onConfirm"></sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="js">
import { ref } from "vue";
const dataURL = ref("");
const onConfirm = (url) => {
  dataURL.value = url;
};
</script>

全屏显示 ​

如果设置 full-screen 来全屏展示签名组件，此时可以绑定 v-model:visible 属性来控制显隐。

vue
<template>
  <sar-button @click="visible = true">签名</sar-button>

  <sar-signature
    v-model:visible="visible"
    full-screen
    custom-navbar
    @confirm="onConfirm"
  >
    <view style="color: var(--sar-tertiary-color)">
      请在上面空白处手写您的签名
    </view>
  </sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataURL = ref('')

const onConfirm = (url: string) => {
  dataURL.value = url
}

const visible = ref(false)
</script>
vue
<template>
  <sar-button @click="visible = true">签名</sar-button>

  <sar-signature
    v-model:visible="visible"
    full-screen
    custom-navbar
    @confirm="onConfirm"
  >
    <view style="color: var(--sar-tertiary-color)">
      请在上面空白处手写您的签名
    </view>
  </sar-signature>

  <image v-if="dataURL" style="width: 100%" mode="widthFix" :src="dataURL" />
</template>

<script setup lang="js">
import { ref } from "vue";
const dataURL = ref("");
const onConfirm = (url) => {
  dataURL.value = url;
};
const visible = ref(false);
</script>

API ​

SignatureProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
color笔触颜色string'#000'
line-width线条宽度number3
background背景颜色string-
full-screen是否全屏展示booleanfalse
visible视屏时控制显隐booleanfalse
duration显隐持续时间number150
cancel-text取消按钮文案string'取消'
clear-text清空按钮文案string'清空'
confirm-text确定按钮文案string'确定'
type导出图片类型'png' | 'jpg''png'
targetconfirm 事件回调接收的图片类型'dataURL' | 'filePath''dataURL'
quality转换为 DataURL 时的质量number0.92

SignatureSlots ​

插槽描述属性
default全屏时定义底部提示文案-

SignatureEmits ​

事件描述类型
update:visible弹出框显隐时触发(visible: boolean) => void
confirm点击确定按钮时触发(dataURL: string) => void
clear点击清空按钮时触发() => void
cancel点击取消按钮时触发() => void

SignatureExpose ​

属性描述类型
resize外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘() => void
clear可调用此方法来清除签名() => void
confirm触发 confirm 事件，与点击确认按钮的效果等价() => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-signature-canvas-height: 400rpx;
  --sar-signature-canvas-bg: var(--sar-white);
  --sar-signature-full-bg: var(--sar-body-bg);
  --sar-signature-full-gap: 32rpx;
  --sar-signature-side-width: 104rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao