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 面向对象编程 万物皆对象
Sep 17 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 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随机生成信用卡卡号的方法
2015/03/23 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
PHP 裁剪图片
2021/03/09 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python自动发送邮件脚本
2018/06/20 Python
django ORM之values和annotate使用详解
2020/05/19 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
科级干部考察材料
2014/02/15 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
何玥事迹观后感
2015/06/16 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
交通事故协议书范本
2016/03/19 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技