【IMWeb训练营作业】用Vue做任务列表To do list

来源：互联网发布：网络科技产品编辑：程序博客网时间：2024/06/08 19:51
预览页面：点击打开链接
效果图：
下面是代码
<!DOCTYPE html><html><head>    <title>plan and task list</title>    <meta charset="UTF-8"/>    <script type="text/javascript" src="./FileSaver.min.js"></script>    <script type="text/javascript" src="./vue.js"> </script></head><body><style type="text/css">    .plan {        width: 79%;        float: left;        background: #ccc;    }    .list {        width: 20%;        float: right;        background: #ddd;    }    .plancontent {        height: 800px;    }    .listcontent {        height: 800px;    }    .must {        height: 400px;        background-color: #ff9900;    }    .option {        background-color: #4dab4d;        height: 400px;    }    .edit {        width: 100%;        height: 800px;    }    .footer {        clear: both;        padding-top: 20px;    }    h1 {        margin: 0 0;    }    body {        margin: 0 0;    }    .header {        position: relative;    }    .userbar {        position: absolute;        right: 0;        top: 0;        height: 55px;    }    .userbar li {        float: left;        list-style: none;        margin: 0px 5px 0px 5px;        padding: auto;        line-height: 55px;    }    a {        color: #000;    }    .edit textarea {        width: 100%;        height: 373px;        resize: none;        padding: 0 0;        border: 1px solid black;        margin: 0 0;        box-sizing: border-box;    }    h1, h2 {        margin: 0;    }    #upload {        opacity: 0;        position: absolute;        z-index: 10;        left: 23px;        height: 21px;        top: 17px;        width: 32px;        font-size: 1px;    }    .finished{        text-decoration:line-through;    }    .unfinished{        text-decoration:none;    }</style><div class="header" style="height: 55px;">    <img src="./grape.png" style="height: 100%;">    <h1 style="display: inline;"><span            style="vertical-align:top; padding:17px 0px 17px 0px;line-height: 55px">时间管理小应用</span>    </h1>    <div class="userbar">        <ul style="margin: 0">            <li><a href="#">导入</a><input type="file" id="upload" name="all" value="导入"/></li>            <li><a href="#" id="exportToFile">导出</a></li>            <li><a href="#">帮助</a></li>        </ul>    </div></div><div class="content">    <div class="plan">        <h1 align="center">计划</h1>        <h2 align="center" style="color: #777777;font-size: 17px;">要做成一系列动作的集合，用以完成待办事项</h2>        <div class="plancontent">            <div class="must">                <h2 align="center">必须做的计划</h2>                <div class="edit">                    <textarea id="mustDoPlan" placeholder="计划动作1 计划动作2" v-model="mustDoPlan"></textarea>                </div>            </div>            <div class="option">                <h2 align="center">可选做的计划</h2>                <div class="edit">                    <textarea id="optionDoPlan" placeholder="计划动作1 计划动作2" v-model="optionDoPlan"></textarea>                </div>            </div>        </div>    </div>    <div class="list">        <h1 align="center">任务列表</h1>        <h2 align="center" style="color: #777777;font-size: 17px;">  </h2>        <div class="listcontent">            <div class="list-header">                <input id="taskinput" type="text" placeholder="添加任务"                      v-model="newItem" v-on:keyup.enter="addNewList" style="width: 100%;box-sizing: border-box;background: url(./si-glyph-baby.svg) no-repeat;padding: 5px 5px 5px 50px;border:none;font-size: 21px; autofocus">            </div>            <ul class="todo-list" style="padding: 0;">                <li v-for="list in lists" style="list-style:none;" ><input type="checkbox" v-model="list.option" v-on:click="clickList(list)"><span v-bind:class="{finished:list.option,unfinished:!list.option}">{{list.text}}</span></li>            </ul>            <div class="todo-footer">                <!--<input type="checkbox" id="checkall">-->                <span><span id="taskall" >{{totalNumber}}</span><span> 待办事件 </span></span>                <button style="float: right;" id="del" v-on:click="delSelections">删除选中</button>            </div>        </div>    </div></div><div class="footer">    <div style="float: left;">        <span align="right">凡事预则立不预则废</span>    </div>    <div style="float: right;">        <span>反馈邮箱：55154717@qq.com</span>    </div></div></body><script type="text/javascript">// vue初始化代码var app = new Vue({    el:'.content',    data:{        mustDoPlan : '',        optionDoPlan : '',        lists : [],        newItem:"",        totalNumber:0    },    methods:{        addNewList:function(){            if(!this.newItem){ //如果为空，什么都不添加                return false;            }            this.lists.push({                text:this.newItem,                option:false            });            this.totalNumber++;            this.newItem="";        },        clickList:function(list){            if(list.option)            {                this.totalNumber--;            }            else            {                this.totalNumber++;            }        },        delSelections:function(){            var i=0;            newList =[];            for (i=0;i<this.lists.length;i++)            {                if(this.lists[i].option===false)// 需要保留的记下来                {                    newList.push(this.lists[i]);                }                           }            this.lists.splice(0,this.lists.length);//删除所有，重新加入            for(i=0;i<newList.length;i++)                this.lists.push(newList[i]);            this.totalNumber=this.lists.length;        }            }//end of methods }//end of vue)    function restoreData(all)    {        window.app._data.mustDoPlan=all.mustDoPlan;        window.app._data.optionDoPlan=all.optionDoPlan;        window.app._data.newItem=all.newItem;        window.app._data.totalNumber=all.totalNumber;        (function()        {            var i=0;            for(i=0;i<all.lists.length;i++)                window.app._data.lists.push(all.lists[i]);        })();//立即执行函数    }    //处理上传    var inputElement = document.getElementById("upload");    inputElement.addEventListener("change", handleFiles, false);    function handleFiles() {        if (this.files.length > 0) {//选中了文件才进行读取，否则不读            var reader = new FileReader();            reader.onload = function (f) {                var all = JSON.parse(f.target.result);                restoreData(all);            };            reader.readAsText(this.files[0]);        }    }    //检测页面关闭事件    window.onbeforeunload = function () {        localStorage.data = JSON.stringify(window.app._data);    };    window.onload = function () {//加载已经保存的数据        if ("undefined" !== typeof localStorage.data) {            var all = JSON.parse(localStorage.data);            restoreData(all);        }    };    //导出按钮    var exportToFile = document.getElementById("exportToFile");    exportToFile.addEventListener("click", function () {        var jsonAll = JSON.stringify(window.app._data);        var blob = new Blob([jsonAll], {type: "text/plain;charset=utf-8"});        saveAs(blob, "planAndTask.txt");    }, false);        var text = document.getElementById("taskinput");    text.focus();</script></html>
0 0