Harmony 记事本增添删除样式

运行结果

css代码：

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 100px;
}

.title {
    font-size: 25px;
    margin-top:20px;
    margin-bottom: 20px;
    color:#000000;
    opacity: 0.9;
    font-size:28px;
}
.item{
    width:325px;
    padding:10px 0;
    flex-direction:row;
    align-items:center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo{
    color:#000;
    width:180px;
    font-size:18px;
}
.switch{
    font-size:12px;
    texton-color: green;
    textoff-color: red;
    text-padding: 5px;
    width:100px;
    heigh:24px;
    allow-scale: false;
}
.remove{
    font-size:12px;
    margin-left: 10px;
    width:68px;
    height: 22px;
    color:#fff;
    background-color: red;
}
.info{
    width:100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text{
    font-size:18px;
    color:#AD7A1B;
}
.info-num{
    color:orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.add-todo{
    position: fixed;
    left: 0;
    bottom:0;
    width:100%;
    height:60px;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
    background-color: #ddd;
}
.plan-input{
    width:240px;
    height:35px;
    background-color: #fff;
}
.plan-btn{
    width:90px;
    height: 30px;
    font-size:15px;
}

js代码

import todoList from "../../common/date/todoList.js"
export default {
    data: {
       todoList
    },
   remove(index){
       console.log(index)
       this.todoList.splice(index,)
   },
    switchChange(index){
        this.todoList[index].status = !this.todoList[index].status
    },
    addTodo(){
        this.todoList.push({
            info:'IDE工具无法监听键盘输入',
            status:false
        })
    },
    computed:{
        todoCount(){
            let num =0;
            this.todoList.forEach(element=>{
                if(!element.status){
                    num++
                }
            });
            return num
        }
    }
}

hml代码

<div class="container">
    <text class="title">待办事项</text>
    <div class="item" for="{{todoList}}">
        <text class="todo">{{$item.info}}
        </text>
        <switch showtext="true" checked="{{$item.status}}"
                texton="完成"
                textoff="待办"
                class="switch"
                @change="switchChange($idx)"
                >
        </switch>
        <button class="remove" @click="remove($idx)">
            删除
        </button>
    </div>
    <div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">{{todoCount}}</text>
        <text class="info-text">件事情待办</text>
    </div>
    <div class="add-todo">
     <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="assTodo" @click="addTodo">添加待办</button>
    </div>
</div>

 

js中引入的js代码

export default[
    {
        info:'学习离散',
        status:true,
    },
    {
        info:'学习数据结构',
        status:false,
    },
    {
        info:'学习四级',
        status:true,
    },
    {
        info:'学习培训任务',
        status:false,
    },
    {
        info:'休息',
        status:true,
    }
]