重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue+element如何添加签名效果

小编给大家分享一下vue+element如何添加签名效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

公司主营业务:网站设计、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出广德免费做网站回馈大家。

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

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

1. 首先根据element ui 在父组件中设置好diglog弹框,并且在全局样式下,自定义样式


// click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现
       // src = base64 ,下面介绍到
// div是在父组件中,所以有了下面子传给父数据 // 然后设置dialog弹框基本样式 // title为弹框中头部出现的名字 // visible.sync 为click绑定的方法一样 // width为整个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引入即可使用,根据项目需求自行配置编写样式。当作子组件引入父组件中。

组件内容如下:





 #clear,#save{
  width:270px;
  height:50px;
  line-height:50px;
  font-size:20px;
  position:absolute;
 }
 #clear{
  bottom:0;
 }
 #save{
  bottom:0;
  right:0;
 }

4. 然后在父组件methods中写方法接收子组件传来的data

// 如上标签中加入的自定义方法
getSignImg (val) {
   //val 是接收子组件的data的
   this.imgsrc = val // 让签的名变成图片
   this.centerDialogVisible = false 
  }

子组件有中带有两个按钮,一个是清除,一个是确定,点击确定时,图片保存到原来需要的位置后,dialog应该关闭,所以加上了element ui 提供的

this.centerDialogVisible = false

就可以点击确定,关闭dialog弹框了

总结:

elemnet ui dailog弹框不要写入 标签内,要写在根元素中,不要被包裹,如下结构可参考


     
      
      
     
    

想要点击某个元素出现dialog弹框时,就给某个元素加上element提供的点击事件(),然后dialog中的定义(:visible.sync)也必须一致

在没有引入组件之前,是在父组件中写js代码,因为dialog弹框出现时,弹框里面的dom才会加载,js会立即执行,用了其提供的open方法也不是很理想,js代码总会比dom先执行一步,我也放在定时器中让js缓慢执行,然后清除定时器又成了问题,所以就放弃了这种写法,改为组件引入。

如果某个元素绑定了element提供的点击事件之后,想又得绑定一个点击事件,那么把提供的方法写在自己的方法中


methods:{
  isShow(){
    this.centerDialogVisible = true
    //...
  }
}

想要改变canvas宽高,画线粗细,画线颜色,画线背景,一定在子组件内props中更改,自定义改会出问题,canvas描线会模糊,有锯齿

父组件想要子组件中的data,就利用子传父,$emit ,父组件得用子组件的data,保存为图片,子组件就得传出去

然后以上就总结完毕,搜了好多文章,并没有详细的介绍签名效果,有的是需要引入插件,有的是需要写js,有的更是要充某币购买,很是麻烦,然后再这里写上这篇文章,是为了帮助更多的人,也许公司项目刚好也做这个效果呢,这些都有可能。不过还好下载的组件没花钱,花钱买了,怪怪的,免费最好。

以上是“vue+element如何添加签名效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:vue+element如何添加签名效果
链接地址:http://cqcxhl.cn/article/goseii.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP