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 相关文章推荐
再谈javascript面向对象编程
Mar 18 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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
基于PHP对XML的操作详解
2013/06/07 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php操作MongoDB类实例
2015/06/17 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js 通用订单代码
2013/12/23 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
Python 的 Socket 编程
2015/03/24 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python实现随机加减法生成器
2020/02/24 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
退休欢送会主持词
2015/07/01 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS