了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言今天给大家分享一个小本人在前期学习鸿蒙应用开发时亲自编写的组件，希望能帮助大家学习如何完成一个自定义组件。组件介绍普通长按事件onlongpress不能设置长按时间。另外，绑定长按事件的按钮在长按操作前后没有明显的样式变化，用户无法从中获取到长按操作。有这种需求的场景反馈不尽如人意。因此，我根据这些需求开发了一个自定义的长按按钮组件，兼顾了按钮和进度条。初步设计图如下：项目结构组件开发页面布局：使用栈栈布局，以画布为背景，按钮按钮组件在上。组件属性参数设置参数名称描述参数类型默认值持续时间长按事件触发时间Number2000btnColor按钮颜色String#9D9D9DringColor长按时外圈颜色String#82D900finishColor事件就绪时外圈阴影颜色String#FFFF37动作拆解：给按钮绑定ontouchstart事件和ontouchend事件，实现长按操作。点击动作：点击时显示外圈，按钮逐渐变大，直到达到设定的时间展开到最大。Show(){//打印按钮的当前状态是“点击”this.$emit('btnType',{btnstate:'clicking'});console.log("————按钮状态：点击————");constel=this.$refs.canvas1;constctx=el.getContext('2d',{antialias:true});//画外圈提示长按进度ctx.lineWidth=5;ctx.strokeStyle=this.ringColor;ctx.beginPath();ctx.arc(150,150,100,0,6.28);ctx.stroke();console.log("外圈出现，按钮展开");//展开动画letoptions1={duration:this.duration,//运行时间easing:'linear',//动画时间曲线fill:'forwards',//指定动画开始状态或结束状态iterations:1,//Playtimesbegin:50.0,//播放开始end:100.0,//播放结束}this.animator.update(options1);让_this=这个；this.animator.onframe=function(value){_this.divR=value;//出现外层色圈，提示启动事件准备就绪if(100==_this.divR){ctx.beginP啊（）；ctx.arc(150,150,120,0,6.28);ctx.shadowBlur=1;ctx.shadowColor=_this.finishColor;ctx.stroke();console.log("准备好，释放触发器");}};this.animator.play();}、释放动作：按住设定的时间外圈产生阴影，释放事件开始事件；中途松开按键，按键会瞬间回到初始状态Erase(){//打印按钮当前状态为“释放”this.$emit('btnType',{btnstate:'released'});console.log("————按钮状态：释放————”);//重置动画letoptions2={duration:0,//运行时间easing:'linear',//动画时间曲线fill:'forwards',//指定动画开始状态或结束状态迭代次数:1,//Numberofplaybacksend:50.0,//播放结束即初始起点}this.animator.update(options2);让_this=这个；this.animator.onframe=function(value){_this.divR=value;};//成功启动事件if(100==_this.divR){this.disabled=true;//按钮无效，无法点击//传给父组件的事件状态值为truethis.$emit('eventType',{eventstate:true});console.log("启动成功");}//启动失败，擦除提示外圈else{constel=this.$refs.canvas1;constctx=el.getContext('2d');ctx.clearRect(45,45,210,210);console.log("启动失败")console.log("擦除外圈，重置按钮");}}，组件引用引用声明参数传递注意在官方文档中，在命名绑定子组件的事件方法或属性时在父组件中，有如下需求：最终效果结论自定义组件开发的意义在于解决某些特定场景的需求，而该组件的开发难度低，希望本文能帮助大家理解自定义的过程组件设计和开发。文章相关附件可点击下方原文链接下载：https://ost.51cto.com/resource/2353。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
