案例效果

一、創建項目
二、代碼示例
hml代碼部分

復制

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)
    },
}

復制

三．案例效果