案例效果


一、創(chuàng)建項(xiàng)目
二、代碼示例
hml代碼部分
{{mouth}}月{{day}}日{{week}}
時(shí)間內(nèi)容
是否刪除該條計(jì)劃
復(fù)制
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;
}
復(fù)制
js代碼部分:
export default {
data: {
// year:"",
mouth:"",
day:"",
week:"",
// hour:"",
// min:"",
planList:[
{
id:0,
time:"選擇時(shí)間",
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){//選擇時(shí)間
let idx = this.idx;
this.timeValue = e.year + "-" + e.month + "-" + e.day;
this.planList[idx].time = this.timeValue;
},
inputPlanValue(e){//監(jiān)聽輸入
let idx = this.idx;
this.inputValue = e.value;
this.planList[idx].content = this.inputValue;
},
addPlan(){//增加計(jì)劃表
this.planList.push({time:"選擇時(shí)間",content:""});
},
deleteList(idx){//刪除計(jì)劃
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)
},
}
復(fù)制
三.案例效果


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。
舉報(bào)投訴
-
HarmonyOS
+關(guān)注
關(guān)注
79文章
2006瀏覽量
31934 -
原子化服務(wù)
+關(guān)注
關(guān)注
0文章
31瀏覽量
965
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
熱點(diǎn)推薦
#HarmonyOS征文#HarmonyOS實(shí)戰(zhàn)—亮眼的原子化服務(wù)體驗(yàn)
:HarmonyOS Developer:什么是原子化服務(wù)來看下幾個(gè)火熱的例子:距離HarmonyOS 2.0發(fā)布不到一個(gè)月
發(fā)表于 07-05 19:19
HarmonyOS如何高效上架原子化服務(wù)?這個(gè)平臺(tái)幫你搞定!
以往HarmonyOS應(yīng)用和原子化服務(wù)都是在AGC(App Gallery Connect)上架,二者的上架流程一樣。但應(yīng)用的形態(tài)更加復(fù)雜龐大,上架時(shí)有很多必填字段,審核標(biāo)準(zhǔn)也相對(duì)復(fù)雜
發(fā)表于 01-12 15:13
直播預(yù)告丨 Hello HarmonyOS 進(jìn)階課程第五課——原子化服務(wù)
本周三《Hello HarmonyOS系列應(yīng)用篇:原子化服務(wù)》,HDE李洋老師將帶領(lǐng)大家了解HarmonyOS
發(fā)表于 05-30 12:00
HarmonyOS原子化服務(wù)案例分享-原卡秀
一、案例說明原卡秀,原子化服務(wù)與服務(wù)卡片場(chǎng)景制作工具,本版本我們定義了個(gè)人、公司、門店、問候、使用說明五個(gè)場(chǎng)景。讓原子
發(fā)表于 07-22 14:30
HarmonyOS原子化服務(wù)案例分享-蛟龍服務(wù)
一、項(xiàng)目說明本HarmonyOS應(yīng)用服務(wù)主要匯總了原子化服務(wù)與服務(wù)卡片發(fā)展的必然趨勢(shì)、使用對(duì)象,
發(fā)表于 08-05 16:00
HarmonyOS原子化服務(wù)最新概念、呈現(xiàn)形式與觸發(fā)方式
一、HarmonyOS原子化服務(wù)最新概念總體介紹:原子化服務(wù)
發(fā)表于 12-27 10:03
《HarmonyOS原子化服務(wù)卡片原理與實(shí)戰(zhàn)》清華大學(xué)出版社李洋著
感謝所有的參與者、付出者;本著作的出版,既是對(duì)我本人及團(tuán)隊(duì)兩年多時(shí)間在HarmonyOS(鴻蒙)和OpenHarmony(開源鴻蒙)應(yīng)用、原子化服務(wù)
發(fā)表于 12-29 12:14
HarmonyOS原子化服務(wù)開發(fā)相關(guān)術(shù)語
。AI Search全局搜索用戶可快速搜索關(guān)鍵詞,與之匹配的原子化服務(wù)則會(huì)出現(xiàn)在搜索結(jié)果中。Smart Service智慧服務(wù)用戶訂閱原子
發(fā)表于 01-19 11:16
HarmonyOS 3.1 Developer Preview 原子化服務(wù)開發(fā)初體驗(yàn)
HarmonyOS 3.1 Developer Preview配套IDE下,在選擇原子化服務(wù)(Atomic service)的時(shí)候,沒有stage模式,只有FA模式,API還在8。而在
發(fā)表于 01-28 15:04
及刻周邊惠:擁抱HarmonyOS原子化服務(wù)
及刻周邊惠:擁抱HarmonyOS原子化服務(wù)
開發(fā)背景
及刻周邊惠是夢(mèng)享網(wǎng)絡(luò)旗下本地生活服務(wù)平臺(tái),旨在為消費(fèi)者提供便捷的附近美食優(yōu)惠。
當(dāng)下
發(fā)表于 03-13 10:39
HarmonyOS鴻蒙原生應(yīng)用開發(fā)設(shè)計(jì)- 元服務(wù)(原子化服務(wù))圖標(biāo)
以防止使用別人的元服務(wù)圖標(biāo)侵權(quán)意外情況等,減少自主創(chuàng)作元服務(wù)圖標(biāo)的工作量。當(dāng)然,如果有個(gè)性化的自主又有能力創(chuàng)作的除外。
元服務(wù)(原子
發(fā)表于 11-01 16:55
時(shí)間管理手冊(cè)
時(shí)間管理手冊(cè)時(shí)間的寶貴在于它既不能創(chuàng)造,也不能復(fù)還。一、“鐘表時(shí)間”的終結(jié)“鐘表時(shí)間”是指鐘表所顯示的物理的、幾何學(xué)的時(shí)間。這如同一條直線,
發(fā)表于 08-14 19:58
?30次下載
HarmonyOS原子化服務(wù)新賽道:系統(tǒng)級(jí)入口服務(wù)中心
10月22日-24日,為期三天的華為開發(fā)者大會(huì)2021(Together)在東莞舉行。本次大會(huì)《HarmonyOS應(yīng)用與服務(wù)體驗(yàn)創(chuàng)新分享》分論壇中,華為介紹了HarmonyOS全新的原子

評(píng)論