js-刮刮卡效果,由jquery-eraser源码改的vue组件
vue-eraser
一款用于vue刮刮卡的组件
github地址: vue-eraser
npm地址: vue-eraser
在网上有看到过几个版本的组件,都有点问题
- 1、拉快了,就会断,连不起来(源码中是画的圆导致的这个问题,vue-eraser画的是线去解决不连贯的问题)
- 2、面积算得不准确
- 3、结果图片可能比覆盖图片加载得快,页面会先闪一下结果图片,然后再由canvas覆盖(在vue-eraser用到图片预加载去解决这个问题)
发现有一款jquery版的jquery-eraser,用起来很顺滑,于是我就研究了一下它的源码,把它改成了vue版的组件并且发布成npm包了,欢迎提bug。
install
npm install --save vue-eraser
Usage
1、通过import使用
import vueEaser from "vue-eraser";
<vue-eraserref="vueEraser":size="25"coverSrc="http://cdn.dowebok.com/140/images/2.jpg":completeFunction="completeFunction":progressFunction="progressFunction"
></vue-eraser>
2、通过script标签引入
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"><title>vue-eraser</title><style>*{margin: 0;padding: 0;}#app{width: 600px;margin: 50px auto;}.btn:nth-of-type(1){margin-top: 10px;display: inline-block;width: 100px;height: 40px;background-color: #2d8cf0;color: #fff;font-size: 16px;text-align: center;line-height: 40px;border: none;touch-action: manipulation;font-weight: 400;cursor: pointer;white-space: nowrap;user-select: none;border-radius: 4px;transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;}.btn:nth-of-type(2){margin-top: 10px;margin-top: 10px;display: inline-block;width: 100px;height: 40px;background-color: #19be6b;color: #fff;font-size: 16px;text-align: center;line-height: 40px;border: none;touch-action: manipulation;font-weight: 400;cursor: pointer;white-space: nowrap;user-select: none;border-radius: 4px;transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;}</style></head><body><div id="app"><h3>测试时当时用的图片链接可能失效请更换图片链接</h3><vue-eraserref="vueEraser":size="50":complete-ratio="0.5":cover-src="coverSrc":result-src="resultSrc":complete-function="completeFunction":progress-function="progressFunction"></vue-eraser><button class="btn" @click="reset">reset</button><button class="btn" @click="clear">clear</button></div>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="vue-eraser/dist/vue-eraser.js"></script>
<script>
new Vue({el: "#app",data (){return {coverSrc: 'https://img.zcool.cn/community/01f5795541d50b00000115410b205a.jpg@1280w_1l_2o_100sh.jpg',resultSrc:"http://exueshi.oss-cn-hangzhou.aliyuncs.com/productLogo/2019-2-26-1551143063378.jpg"}},mounted() {},methods: {completeFunction (ratio){console.log("complete");},progressFunction (ratio){console.log(ratio);},reset (){this.$refs.vueEraser.reset();},clear(){this.$refs.vueEraser.clear();}},
});
</script></body>
</html>
property
Name | Type | Default | Description |
---|---|---|---|
element-id | String | vueEraser | 该组件外层元素的id |
size | Number | 50 | 清除的半径 |
completeRatio | Number | 0.7 | 完成需要刮掉的面积占比 |
completeFunction | Function | - | 达到completeRatio后的回掉函数 |
progressFunction | Function | - | 刮的过程中的回掉函数,返回实时的面积占比 |
resultSrc | String | http://cdn.dowebok.com/140/images/1.jpg | 刮刮卡结果区域的图片 |
coverSrc | String | -(required) | 刮刮卡遮罩层的图片 |
转载于:https://www.cnblogs.com/chenlei987/p/10598135.html
js-刮刮卡效果,由jquery-eraser源码改的vue组件相关推荐
- jQuery Easyui 源码分析之combo组件
/** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...
- 模拟电子签章盖章效果的jQuery插件源码
转自http://www.jquerycn.cn/a_5675 客户提了个需求,需要在已审核的文档上加盖公章,网上找了找没有现成的,自己动手丰衣足食 老规矩,上图看效果: 可以内嵌在各种容器中,已包装 ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- 深入学习jquery源码之高德地图组件的使用
深入学习jquery源码之高德地图组件的使用 高德地图组件是一类高度模块化的LBS服务组件,开发者通过调用相应标签便可轻松实现诸如在地图上标注点.查找附近poi.公交/驾车线路规划等功能.该类组件仅针 ...
- (已更新)最新打卡抽奖助手小程序源码,带微信通知功能,去授权
源码已经测试,去除授权 安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置 推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
- 最新款打卡抽奖助手小程序源码,带微信通知功能,去授权
源码已经测试,去除授权 安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置 推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
- jQuery方法源码解析--jQuery($)方法(一)
jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在 ...
- JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈 ...
- 人事管理系统整站php,卡盟整站程序源码 php版
卡盟整站源码是该网站的内核程序,内核是Ecshop,类似平台开钻之类整站程序,也是重要的源码文件,其中包含了各种源码类型文件,比较全,安装操作比较简单.卡盟整站源码是一个点卡销售/充值平台程序,可以开 ...
最新文章
- JVM 老年代对象来源
- Python中通过PyPDF2实现PDF添加水印
- ibatis spring框架升级到5.x_Java SSM框架常见面试题,良心整理,
- SDNU 1062.Fibonacci(矩阵快速幂)
- [ERROR] org.testng.TestNGException:Cannot find class in classpath:
- ios即时通讯客户端开发之-mac上安装MySQL
- 洛谷——P1652 圆
- 【APP】取代top工具的Linux运维利器--htop
- linux 查看数据库和表
- 对外汉语语料库有哪些_史上最全最新的语料库资源大全【对外汉语教学研究工具】...
- office2019初体验与kms服务器搭建
- dex字符串解密_[原创]通过CTF学习Android漏洞(炸弹引爆+dex修复)
- mutate 字段替换
- 【Microsoft Azure 的1024种玩法】六十九.通过SSMS将本地自建SQL Server 数据库脱机迁移至Azure SQL Database
- 介绍中国传统节日的网页html,介绍中国传统节日
- 知乎爬虫请求头参数x-zse-96(代码可直接运行)
- body onload
- 《校园宿舍管理系统》之数据库程序设计/GUI/java/eclipse/MySQL/JDBC
- Bugku—PHP代码审计—md5函数
- 数字平原maya制作写实科幻场景
热门文章
- mysql show 翻页_mysql show操作
- MyEclipse6.5安装SVN插件的三种方法
- 杜绝网上压根没测过就乱写之 《oracle mybatis 返回自增主键 》
- 详解c++指针的指针和指针的引用
- Java 9 揭秘(18. Streams API 更新)
- eclipse tomcat插件安装
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- 【Cloud Foundry 应用开发大赛】“八卦街”图片采集应用
- ISA2004升级到ISA2006需要注意的事项
- 机器人剥人皮眼看自己是机器人_高中生自己编程机器人,获世界大赛“全能奖”...