M-vue-sign NPM

Vue3 电子签批

使用

import { createApp } from 'vue';
import MVueSign from 'm-vue-sign';
import App from './App.vue';

createApp(App).use(MVueSign).mount('#app');

<m-vue-sign :width="600" :height="400" @confirm="confirm" />

const confirm = (sign) => {
    consoel.log(sign.toDataURL('image/jpeg'));
};

属性

width: { type: [Number, String], default: '100%' }, //组件宽度
height: { type: [Number, String], default: '100%' }, //组件高度
background: { type: String, default: 'rgba(46, 51, 56, 0.05)' }, //画板背景颜色
defaultValue: { type: [String, Array], default: '' }, //默认数据
tool: { type: Boolean, default: true }, //是否开启工具栏
toolClear: { type: Boolean, default: true }, //工具栏清除按钮
toolUndo: { type: Boolean, default: true }, //工具栏回撤按钮
toolRedo: { type: Boolean, default: true }, //工具栏还原按钮
toolColor: { type: Boolean, default: true }, //工具栏颜色
toolWidth: { type: Boolean, default: true }, //工具笔锋
toolConfirm: { type: Boolean, default: true }, //工具确认
toolClearText: { type: String, default: '清空' }, //工具栏清除按钮提示文字
toolUndoText: { type: String, default: '撤回' }, //工具栏回撤按钮提示文字
toolRedoText: { type: String, default: '还原' }, //工具栏还原按钮提示文字
toolColorText: { type: String, default: '颜色' }, //工具栏颜色提示文字
toolWidthText: { type: String, default: '笔锋' }, //工具笔锋提示文字
toolConfirmText: { type: String, default: '确定' }, //工具确认文字
toolConfirmType: { type: String as PropType<'default' | 'tertiary' | 'primary' | 'info' | 'success' | 'warning' | 'error'>, default: 'primary' }, //工具确认按钮类型
device: { type: Boolean, default: false }, //是否开响应分辨率
dotSize: { type: Number, default: null }, //单点半径
minWidth: { type: Number, default: 0.5 }, //画笔最小宽度
maxWidth: { type: Number, default: 2.5 }, //画笔最大宽度
throttle: { type: Number, default: 16 }, //每秒绘制次数
minDistance: { type: Number, default: 5 }, //每个点间距
backgroundColor: { type: String, default: '' }, //画布背景颜色
penColor: { type: String, default: '#000000' }, //画笔颜色
velocityFilterWeight: { type: Number, default: 0.7 } //新速度权重

方法

toDataURL(type?: string, encoderOptions?: number) //获取画布数据
fromDataURL(dataUrl: string, options?: { ratio?: number; width?: number; height?: number; xOffset?: number; yOffset?: number }) // 加载URL数据
fromData(pointGroups: PointGroup[], options?: FromDataOptions) // 加载笔画数据