常見的長按事件onlongpress不能設定長按的時間，除此之外，綁定了長按事件的按鈕在完成長按操作前后并沒有明顯的樣式變化，用戶無法從中得到長按操作進行的反饋，在有此類需求的場景時是無法滿足的。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
前言
今天給大家分享下我個人在學習鴻蒙應用開發初期寫的一個小組件，希望能幫助大家學習如何完成一個自定義組件。
組件介紹
常見的長按事件onlongpress不能設定長按的時間，除此之外，綁定了長按事件的按鈕在完成長按操作前后并沒有明顯的樣式變化，用戶無法從中得到長按操作進行的反饋，在有此類需求的場景時是無法滿足的。因此我根據這些需求開發一個自定義長按按鈕組件，同時兼顧按鈕和進度條兩個功能。最初的設計圖如下：
項目結構
組件開發
頁面布局：使用stack棧布局，以canvas畫布做背景，button按鈕組件在上。
<stack class="stack-parent">
<canvas ref="canvas1" class="my-canvas"></canvas>
<button type="circle" style="radius: ` divR `; background-color: ` btnColor `;"
disabled="` disabled `" ontouchstart="Show" ontouchend="Erase"></button>
</stack>
組件屬性參數設置
參數名
| 描述
| 參數類型
| 默認值
|
duration
| 長按事件觸發時長
| Number
| 2000
|
btnColor
| 按鈕顏色
| String
| #9D9D9D
|
ringColor
| 長按過程中外圈顏色
| String
| #82D900
|
finishColor
| 事件就緒時外圈陰影顏色
| String
| #FFFF37
|
動作拆解：在按鈕上綁定ontouchstart事件和ontouchend事件，以實現長按操作。
- 點擊動作：點擊時顯示外圈，按鈕逐漸變大，直至達到設定時長膨脹至最大。
Show() {
//打印按鈕當前狀態為“正在點擊”
this.$emit('btnType', {btnstate: '點擊'});
console.log("————按鈕狀態：點擊中————");
const el = this.$refs.canvas1;
const ctx = 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("外圈顯現，按鈕膨脹");
//膨脹動畫
let options1 = {
duration: this.duration, //運行時間
easing: 'linear', //動畫時間曲線
fill: 'forwards', //指定動畫起始態或終止態
iterations: 1, //播放次數
begin: 50.0, //播放起點
end: 100.0, //播放終點
}
this.animator.update(options1);
let _this = this;
this.animator.onframe = function(value) {
_this.divR = value;
//外部色圈顯現，提示啟動事件準備就緒
if(100 == _this.divR) {
ctx.beginPath();
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: '松開'});
console.log("————按鈕狀態：松開————");
//重置動畫
let options2 = {
duration: 0, //運行時間
easing: 'linear', //動畫時間曲線
fill: 'forwards', //指定動畫起始態或終止態
iterations: 1, //播放次數
end: 50.0, //播放終點為初始起點
}
this.animator.update(options2);
let _this = this;
this.animator.onframe = function(value) {
_this.divR = value;
};
//成功啟動事件
if(100 == _this.divR) {
this.disabled = true; //按鈕失效，不可點擊
//向父組件傳遞事件的狀態值為true
this.$emit('eventType', {eventstate: true});
console.log("啟動成功");
}
//啟動失敗，擦除提示外圈
else {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.clearRect(45, 45, 210, 210);
console.log("啟動失敗")
console.log("外圈擦除，按鈕重置");
}
},組件引用
<element name="swellbtn" src='common/swellbtn/swellbtn.hml'></element>
<swellbtn duration="1000" btn-color="#A39CC9" ring-color="#FFD800" finish-color="#FFFF37"
@btn-type="btnClicked" @event-type="eventState"></swellbtn>
- 注意，在官方文檔中對在父組件中綁定子組件的事件方法或屬性命名時，有以下要求：
最終效果
結語
自定義組件開發的意義在于解決某些特定場景的需求，該組件的開發難度較低，希望這篇文章能幫助大家理解自定義組件設計和開發的流程。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2353。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??。
