Rainui

Appearance

r-signature ​

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

在线示例 完整文档 完整文档

示例 ​

vue
<template>
  <r-config-provider :themeName="themeName">
    <page-header title="签名"></page-header>
    <view class="content" style="padding: 20px 0">
      <r-image
        v-if="image"
        :src="image"
        :width="`${canvasRect.width}px`"
        :height="`${canvasRect.height}px`"
      />
      <r-divider content-position="left">基本使用</r-divider>
      <r-signature @submit="onSubmit" @clear="onClear" />

      <r-divider content-position="left">自定义颜色</r-divider>

      <r-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />

      <r-divider content-position="left">自定义线宽</r-divider>

      <r-signature :line-width="6" @submit="onSubmit" @clear="onClear" />

      <r-divider content-position="left">自定义背景颜色</r-divider>

      <r-signature
        background-color="#000"
        pen-color="#fff"
        @submit="onSubmit"
        @clear="onClear"
      />
    </view>
  </r-config-provider>
</template>
<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const show = ref({
  show1: true,
  show2: false,
  show3: false,
  show4: false,
});
const image = ref("");
const canvasRect = ref({});
const onSubmit = (data) => {
  console.log("data", data);
  image.value = data.image;
  canvasRect.value = data.canvas;
};

const onClear = () => {
  image.value = "";
};
</script>

API ​

Props ​

参数说明类型默认值可选值
type导出目标文件的类型，只支持 jpg 或 pngStringpngjpg
pen-color笔触颜色，默认黑色String#000
line-width线条宽度Number3
background-color背景颜色String-
clear-button-text清除按钮文案String清空
confirm-button-text确认按钮文案String确认
theme-namer-theme主题名称Stringdefault

Events ​

名称说明参数
start开始签名时触发-
end结束签名时触发-
signing签名过程中触发event
submit点击确定按钮时触发{image,canvas} image 为导出的临时图片 canvas 为 canvas 的对象实例
clear点击取消按钮时触发-

Methods ​

名称说明参数
clear可调用此方法来清除签名-
submit触发 submit 事件，与点击确认按钮的效果等价-