案例效果


一、創建項目
二、代碼示例
hml代碼部分
{{mouth}}月{{day}}日{{week}}
時間內容
是否刪除該條計劃
復制
css代碼部分
.container {
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
}
.title{
width: 100%;
height: 40px;
font-size: 24px;
color: #fff;
text-align: left;
padding-left: 12px;
background-color: dodgerblue;
margin-bottom: 10px;
}
.txt{
width: 100%;
text-align: left;
font-size: 16px;
color: dodgerblue;
padding-left: 16px;
}
.showTime{
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.showText{
font-size: 16px;
color: #333;
padding-right: 12px;
}
.boxTitle{
flex-direction: row;
align-items: flex-start;
justify-content: space-around;
width: 100%;
margin-top: 4px;
border: 1px;
}
.text{
font-size: 16px;
text-align: center;
height: 40px;
/* border: 1px;*/
}
.boxContent{
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.hengStyle{
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: 100%;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
.inputTitle{
width: 30%;
height: 40px;
font-size: 16px;
color: #333;
border-radius: 0px;
background-color: #eee;
}
.inputTxt{
width: 70%;
font-size: 16px;
height: 40px;
border-radius: 0px;
border-left-width: 1px;
background-color: #eee;
}
.btnStyle{
width: 100%;
justify-content: center;
align-items: center;
}
.inputBtn{
width: 20%;
height: 40px;
text-align: center;
font-size: 16px;
border-radius: 0px;
background-color: #ccc;
}
.dialogText{
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.inner-btn {
width: 80%;
height: 50px;
align-items: center;
justify-content: space-around;
}
復制
js代碼部分:
export default {
data: {
// year:"",
mouth:"",
day:"",
week:"",
// hour:"",
// min:"",
planList:[
{
id:0,
time:"選擇時間",
content:"",
}
],
timeValue:"",
inputValue:"",
selectVal:"2021-06-08",
},
onShow(){
this.getDate();
},
getDate:function(){
let newDate = new Date();
this.year = newDate.getFullYear();
this.mouth = newDate.getMonth();
this.day = newDate.getDay();
this.hour = newDate.getHours();
this.min = newDate.getMinutes();
let weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
this.week = weekArray[newDate.getDay()];
},
clickTime(idx){//彈出
this.$element("chooseTime").show(idx);
this.idx = idx;
},
chooseDate(e){//選擇時間
let idx = this.idx;
this.timeValue = e.year + "-" + e.month + "-" + e.day;
this.planList[idx].time = this.timeValue;
},
inputPlanValue(e){//監聽輸入
let idx = this.idx;
this.inputValue = e.value;
this.planList[idx].content = this.inputValue;
},
addPlan(){//增加計劃表
this.planList.push({time:"選擇時間",content:""});
},
deleteList(idx){//刪除計劃
this.$element("delDialog").show();
this.delIdx = idx
},
setBack(){
this.$element("delDialog").close();
},
setTure(){
let idx = this.delIdx
this.planList.splice(idx,1);
this.$element("delDialog").close();
console.log(idx)
},
}
復制
三.案例效果


-
HarmonyOS +關注
關注
67文章
1095瀏覽量
22745 -
原子化服務 +關注
關注
0文章
24瀏覽量
43
發布評論請先 登錄
相關推薦
HarmonyOS應用開發-DistributedHealthDemoPhone體驗
說明:此Demo展示如何在手機上調用相應接口,獲取手表斷的心率和步數等健康數據,配合分布式健康手表端應用,可以實現數據跨設備...
發表于 07-04 11:08 ?
484次
閱讀
【HarmonyOS HiSpark Wi-Fi IoT 套件試用連載】之環境搭建及HelloWorld程序開發
環境搭建
Author: HonestQiao 喬幫主的docker環境適用于套件使用,具體參考網址:https://blog.51cto.com/harmonyos/5223948...
發表于 07-03 15:30 ?
1086次
閱讀
HarmonyOS應用開發-DistriButedHealthDome分布式健康數據體驗
說明:此Demo展示如何在手表上調用相應接口,獲取心率和步數等健康數據,配合分布式健康手機端應用,可以實現數據跨設備瀏覽以及...
發表于 07-02 11:36 ?
1788次
閱讀
【學習打卡】ArkUI eTS上實現"流光按鈕"效果
1. 實現效果
對自定義的按鈕添加動態效果,通過這種實現的思路還可以實現更改更多的按鈕效果。
2. 實現原理
在兩個Stack堆...
發表于 07-01 12:05 ?
2315次
閱讀
HarmonyOS應用開發-DistributedDateDome分布式數據訪問體驗
說明:基于分布式數據接口,實現多種設備上一致的數據訪問體驗。
效果圖:
完整代碼地址:https://gitee.com/jltfcloudcn/...
發表于 07-01 09:58 ?
1215次
閱讀
華為HarmonyOS 3.0將于下個月發布,時間或將定在25號之后
日前,有微博博主爆料稱,華為HarmonyOS 3.0正式版將于七月下旬發布。 該博主還補充道:Ha....
HarmonyOS應用開發-DistributeDatabaseDraw多設備實時同步筆跡體驗
說明:多設備實時同步筆跡,也可撤回筆跡。 ? 它旨在幫助開發人員快速了解HarmonyOS應用程序開發,多屏協作交互和HarmonyO...
發表于 06-30 17:03 ?
1058次
閱讀
【學習打卡】OpenHarmony開源項目介紹
OpenHarmony開源項目
【堅果系列】OpenHarmony應用開發【02】-OpenHarmony開源項目介紹
作者:堅果
公眾號:"大前端之...
發表于 06-30 13:02 ?
6298次
閱讀
【學習打卡】OpenHarmony應用開發01
引言
因為個人的一些原因,好久也是沒有碰OpenHarmony了,今天剛好有空,恰好也是調整好了自己的狀態,所以就來開始繼續更新了...
發表于 06-30 12:44 ?
2585次
閱讀
基于HarmonyOS開發的運動員智能訓練系統
# 開發者說 #
【開發者說】欄目是為HarmonyOS開發者提供的展示和分享平臺,在這里,大家可以發表自己的技術洞察和見解,也可...
發表于 06-29 09:39 ?
3016次
閱讀
【HarmonyOS HiSpark Wi-Fi IoT 智能家居套件體驗 】HarmonyOS HiSpark Wi-Fi IoT介紹+第一印象
一、HarmonyOS HiSpark
HarmonyOS HiSpark Wi-Fi IoT 智能家居套件是潤和軟件推出的支持HarmonyOS...
發表于 06-25 23:29 ?
2088次
閱讀

華為HarmonyOS3.0或開啟公測 臺積電3nm制程工藝產能受關注
美國當地時間6月21日,Meta、微軟等多家科技巨頭宣布成立了一個名為“元宇宙標準論壇”的組織,以促....
發表于 06-24 11:02 ?
234次
閱讀
首款搭載HarmonyOS的燃油車北京魔方將于6月底開啟預售
近日,北京汽車推出的全新緊湊型SUV——北京魔方出售的信息被公布了出來,這款酷似電動車的燃油車即將在....
AITO問界M5榮獲行業首個車載語音助手A級權威認證
立足智能科技,優化人機交互,我們一直在努力!AITO問界M5-HarmonyOS智能座艙高分榮獲行業....
一個可應用于HarmonyOS的高效IO庫
為了滿足開發者對IO的更高要求,三方組件庫推出IO處理利器——okio(JS版本)。okio使用Se....
拓維信息旗下開鴻智谷成為HarmonyOS Connect ISV伙伴
5月31日-6月1日,由華為主辦的2022 HarmonyOS Connect伙伴峰會在深圳召開。作....
了解DevEco Studio的預覽功能
選中預覽器UI界面中的組件,則組件樹上對應的組件將被選中,同時代碼編輯器中的布局文件中對應的代碼塊高....
華為HarmonyOS負責人王成錄已離職,下一站依舊是HarmonyOS
日前,有消息傳出,華為HarmonyOS的負責人王成錄博士已經離開了華為,并且其微博號的華為官方認證....
HarmonyOS折疊屏設計規范
圖1是信息展示案例對比圖,設計規范建議展開態不應出現頁面內的內容元素數量減少,或圖形化元素模糊、分辨....
華為p50參數配置支持5g嗎
華為p50是華為公司于2021年7月發布的一款旗艦手機,華為p50參數配置暫時不支持5g,雖然華為p....
華為p50e怎么樣值得買嗎
華為P50E是今年3月16日發布的新機,華為P50E是屬于華為P50系列,它的外觀延續了P50系列的....
如何用低代碼實現一個簡單的頁面跳轉功能
我們先開發第一個頁面,如圖4所示,第一個頁面是在容器中展示“低代碼入門”文本和“一鍵入門”按鈕,它們....
評論