效果(移动端)"/>
vue+element加入签名效果(移动端)
最近根据公司项目需求做一个在线签名,技术栈用的是vue+Element ui
想了想这... canvas我不太会,简单画线可还行...,想了想来呗,撸上
在网上找了很多效果,都不太无限接近效果,磕磕绊绊也算是找到了比较满意的效果
需求是用element ui dialog弹框里加入签名效果,期间也遇到很多问题,在这里总结一下,也希望能有所帮助。
!------------------------------------------------------------------------------------------
下面介绍为了方便就把项目的文件叫作父组件,然后签名的那个组件叫作子组件
! 如有不太明白的地方,多看看代码注释。为细节地方
1. 首先根据element ui 在父组件中设置好diglog弹框,并且在全局样式下,自定义样式
<div class="canva" @click="centerDialogVisible = true">
// click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现<img :src="imgsrc" alt=""/> // src = base64 ,下面介绍到
</div>
// div是在父组件中,所以有了下面子传给父数据// 然后设置dialog弹框基本样式
// title为弹框中头部出现的名字
// visible.sync 为click绑定的方法一样
// width为整个dialog的宽度
// <sign></sign>是签名组件,绑定的方法是自定义方法,子传父,后面会详细介绍
<el-dialogtitle="签名":visible.sync="centerDialogVisible"width="85%"center><sign @draw_save="getSignImg"></sign>
</el-dialog>//然后在全局样式下自定义弹框中默认的内容高度.el-dialog {.el-dialog__header{height: 20px;}.el-dialog__body{height: 400px;overflow: auto; // 项目中其他dialog需要滚动条,所以加上就会出现滚动条。签名可忽略}
}
.el-dialog__wrapper .el-dialog__title{font-size: 21px;
}
复制代码
2. 然后在父组件data中定义centerDialogVisibe=false,imgsrc=''
data(){return{imgsrc: '', // base64编码,保存为图片用到centerDialogVisible: false //dialog弹框显示 fales不显示,true显示}
}
复制代码
3. 然后dialog弹框的样式写好之后,就该引入组件了,组件是在网上找的,原文地址如下
原文地址是组件下载地址,并没有过多介绍 download.csdn/download/we…
组件为单独组件,通过components引入即可使用,根据项目需求自行配置编写样式。当作子组件引入父组件中。
组件内容如下:
<template><div class="sign"><canvas id="canvas" :width="width" :height="height"></canvas><div><button type="button" @click="clear" id="clear">清空</button><button type="button" @click="save" id="save">保存</button></div></div>
</template><script>
/** width canvas 宽度* height canvas 高度* strokeStyle 线条颜色* showUrl 是否显示预览图片* imgWidth img 宽度* imgHeight img 高度* draw_clear //监听清空事件* draw_save //监听保存事件 返回base64 img 路径* */
var preHandler = function (e) { e.preventDefault() }
export default {name: 'drawSign',props: {width: {type: String,default: '565'},height: {type: String,default: '355'},strokeStyle: {type: String,default: '#000'},showUrl: {type: Boolean,default: true},imgWidth: {type: String,default: '240'},imgHeight: {type: String,default: '106'}},data () {return {canvas: null, // canvasctx: null, // ctx canvas对象stroke_info: null, // 当前绘图的坐标url: '' // base64 图像}},methods: {init () {let that = thisthis.canvas = document.getElementById('canvas')this.ctx = this.canvas.getContext('2d')this.stroke_info = this.canvas.getBoundingClientRect()this.canvas.addEventListener('touchstart', function (event) {document.addEventListener('touchStart', preHandler, false)that.darwStart(event)})this.canvas.addEventListener('touchend', function (event) {document.addEventListener('touchend', preHandler, false)that.drawEnd()})this.clear()},darwStart (e) {let that = thislet t = e.changedTouches[0]// console.log(t.clientX, t.clientY);this.ctx.strokeStyle = this.strokeStylethis.ctx.beginPath() // 清空所有绘画路径this.ctx.moveTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top)this.canvas.addEventListener('touchmove', function (event) {that.darwMove(event)})},darwMove (e) {let t = e.changedTouches[0]this.ctx.lineTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top)this.ctx.stroke()},drawEnd () {document.removeEventListener('touchstart', preHandler, false)document.removeEventListener('touchmove', preHandler, false)document.removeEventListener('touchend', preHandler, false)},clear () {this.ctx.clearRect(0, 0, this.width, this.height)this.url = ''this.$emit('draw_clear')},save () {console.log(this)let data = this.canvas.toDataURL()// let query = {url: data}this.$emit('draw_save', data) // $emit 传data给父组件,当签名签完了之后,会保存图片的,data是base64编码,图片img src直接可识别// console.log(this.canvas);}},mounted () {this.$nextTick(_ => {this.init()})}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>#clear,#save{width:270px;height:50px;line-height:50px;font-size:20px;position:absolute;}#clear{bottom:0;}#save{bottom:0;right:0;}
</style>复制代码
4. 然后在父组件methods中写方法接收子组件传来的data
// 如上标签中加入的自定义方法
getSignImg (val) {//val 是接收子组件的data的this.imgsrc = val // 让签的名变成图片this.centerDialogVisible = false }
复制代码
子组件有中带有两个按钮,一个是清除,一个是确定,点击确定时,图片保存到原来需要的位置后,dialog应该关闭,所以加上了element ui 提供的
this.centerDialogVisible = false
复制代码
就可以点击确定,关闭dialog弹框了
总结:
- elemnet ui dailog弹框不要写入 标签内,要写在根元素中,不要被包裹,如下结构可参考
</el-col></el-row><el-dialogtitle="签名":visible.sync="centerDialogVisible"width="85%"center><sign @draw_save="getSignImg"></sign></el-dialog></div>
复制代码
-
想要点击某个元素出现dialog弹框时,就给某个元素加上element提供的点击事件(),然后dialog中的定义(:visible.sync)也必须一致
-
在没有引入组件之前,是在父组件中写js代码,因为dialog弹框出现时,弹框里面的dom才会加载,js会立即执行,用了其提供的open方法也不是很理想,js代码总会比dom先执行一步,我也放在定时器中让js缓慢执行,然后清除定时器又成了问题,所以就放弃了这种写法,改为组件引入。
-
如果某个元素绑定了element提供的点击事件之后,想又得绑定一个点击事件,那么把提供的方法写在自己的方法中
<div class="canva" @click="isShow">methods:{isShow(){this.centerDialogVisible = true//...}
}
复制代码
-
想要改变canvas宽高,画线粗细,画线颜色,画线背景,一定在子组件内props中更改,自定义改会出问题,canvas描线会模糊,有锯齿
-
父组件想要子组件中的data,就利用子传父,$emit ,父组件得用子组件的data,保存为图片,子组件就得传出去
然后以上就总结完毕,搜了好多文章,并没有详细的介绍签名效果,有的是需要引入插件,有的是需要写js,有的更是要充某币购买,很是麻烦,然后再这里写上这篇文章,是为了帮助更多的人,也许公司项目刚好也做这个效果呢,这些都有可能。不过还好下载的组件没花钱,花钱买了,怪怪的,免费最好。
如果对你有帮助,烦请点个赞再走呗
转载于:
更多推荐
vue+element加入签名效果(移动端)
发布评论