vue+element加入签名效果(移动端可用)


Posted in Javascript onJune 17, 2019

下面介绍为了方便就把项目的文件叫作父组件,然后签名的那个组件叫作子组件

! 如有不太明白的地方,多看看代码注释。为细节地方

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-dialog
      title="签名"
      :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.net/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, // canvas
   ctx: null, // ctx canvas对象
   stroke_info: null, // 当前绘图的坐标
   url: '' // base64 图像
  }
 },
 methods: {
  init () {
   let that = this
   this.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 = this
   let t = e.changedTouches[0]
   // console.log(t.clientX, t.clientY);
   this.ctx.strokeStyle = this.strokeStyle
   this.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-dialog
      title="签名"
      :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加入签名效果(移动端可用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
基于Vue实现timepicker
Apr 25 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
AngularJS表单验证功能
Oct 19 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
详解vue v-model
Aug 31 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
详解vue微信网页授权最终解决方案
Jun 16 #Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 #Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 #Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
php的curl实现get和post的代码
2008/08/23 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
django url到views参数传递的实例
2019/07/19 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏