【IMWeb训练营作业】Todo Liss试手制作

初期效果图

代码部分

html：

<div id="todoList">
        <p class="title">添加任务：</p>
        <input type="text" v-model="inputData" placeholder="请输入您的任务" @keyup.enter="addList(inputData)">
        <p class="title">任务列表：</p>
        <list-com v-for="(item,index) in listData" :child-list="item" :ind="index" :key="item" @del="delete2"></list-com>
</div>

css:

	html,
        body {
            margin: 0;
            padding: 0;
        }
        
        #todoList {
            display: flex;
            height: auto;
            justify-content: flex-start;
            flex-direction: column;
            padding: 30px;
        }
        
        .title {
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px;
            background-color: #ff0000;
            color: #ffffff;
        }
        
        input {
            padding: 5px;
        }
        
        .todoList {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 5px;
            border-bottom: 1px solid #aaaaaa;
        }
        
        .todoList:hover {
            border-bottom: 0px;
            background-color: #bbbbbb;
        }
        
        .todoList:hover .delete {
            display: block;
        }
        
        .inline-block {
            display: inline-block;
        }
        
        .che {
            position: relative;
            width: 12px;
            height: 12px;
            border: 1px solid #888888;
            border-radius: 2px;
        }
        
        .sq1 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -35%;
            margin-left: -35%;
            width: 70%;
            height: 70%;
        }
        
        .sq2 {
            background-color: #ff0000;
        }
        
        .con {
            height: 20px;
            line-height: 20px;
        }
        
        .delete {
            display: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ff0000;
            color: #ffffff;
        }

js:

	var listCom = {
            props: ['childList', 'ind'],
            template: `<div class="todoList">
            <div class="inline-block">
            <input type="checkbox">
            <div class="inline-block con">{{childList}}</div></div>
            <div class="inline-block delete" title="删除" @click="delete1(ind)">x</div></div>
            </div>`,
            methods: {
                checkSelect: function() {},
                isSq: function() {

                },
                delete1: function(ind) {
                    this.$emit('del', ind);
                }
            }
        };
        var vm = new Vue({
            el: '#todoList',
            data: {
                inputData: null,
                listData: [],
                listType: 0
            },
            methods: {
                addList: function(val) {
                    this.listData.push(val);
                    this.inputData = null;
                },
                delete2: function(ind) {
                    this.listData.splice(ind, 1);
                }
            },
            components: {
                'list-com': listCom
            }
        });