Vue-ele-sign NPM

项目说明

基于https://github.com/yinhui1129754/elesigncode的代码，二次处理目前适用vue下的一个电子签名插件 vue-ele-sign

安装依赖命令

 npm i vue-ele-sign --save-dev

使用例子

<vue-ele-sign ref="VueEleSign" :color="color" :bgImg="bgImg" :readOnly="readOnly" />
    ...
import VueEleSign from 'vue-ele-sign'
components: { VueEleSign }
    ...

运行项目

 npm install
 npm run serve

构建npm包

 npm run build-bundle

 .更新包版本
 npm publish

class

我们这个类所需要的的所有类

data 数据类
 draw 绘制类
 event 事件类
 image 图片类
 line 线段类
 main 核心类
 point 点类

core

我们这个类的中心脚本

untils

各种方法和工具

config.js 默认配置项

struct.js 没有使用到，结构字典表

untils.js 工具方法类

在vue-cli中使用我们的组件

详细可以看在vue中使用此组件

实例对象的时候可传入的参数

属性名称	描述	默认
ele	要挂载的节点	null
color	签名的颜色	'#333333'
lineWidth	签名的线宽	4
bgColor	签名的背景颜色	-1
pen	签名的笔类型可选择的值：'default' 'writing'	'default'
writingMaxLine	当笔是writing的时候我们来设置最大线宽	20
writingMinLine	当笔是writing的时候我们来设置最小线宽	10
bgImg	背景图片	''
imgType	输出图片类型	'jpg'
readOnly	是否只读	false
vsConsole	是否显示打印信息	false
datas	canvas笔迹轨迹json数据	null
direction	画布方向，用于横屏（可选择的值：'left' ，'right' ，'bottom'）	无

对象主要方法说明

方法名称	描述	参数	返回值
init	初始化方法	无	无
moutedEle	挂载到节点下	ele:传入的节点	无
resize	重置签名canvas节点大小到挂载节点的大小，一般可以和resize混合使用	无	无
resizeWithNumber	重置签名canvas节点大小到传入的宽度和高度	w:宽度,h:高度	无
destory	销毁对象:实例的对象的所有属性没有了事件取消绑定,canvas节点从挂载节点移出	无	无
drawEle	强制重新绘制数据	无	无
undo	撤销方法	无	无
redo	重做方法	无	无
toJson	将当前实例签名的数据转化为json	无	无
jsonTo	将传入的json数据转化到当前对象	json	无
imgTo	将传入的img地址显示在图层	string	无
toPng	获取当前签名的base64位数据png类型	无	无
toJpeg	获取当前签名的base64位数据jpeg类型	无	无
setColor	设置签名的颜色	color:颜色字符串rgb hex均可以	无
setLineWidth	设置线宽	lineWidth:线宽	无
setBgColor	设置背景颜色	bgColor:颜色字符串rgb hex均可以	无
setBgImg	设置背景图片	无	无
setPen	设置笔的类型	name:'default' 'writing'	无
clear	清除全部	无	无
clearSign	清除签名	无	无
getImg	获取图片地址	无	无
getFile	获取file数据	filename:文件名	无
getData	获取全部数据	filename:文件名	file：file文件，url：图片地址，datas：笔迹json数据
setReadOnly	设置只读	type:是否只读	无