todo_list

最新推荐文章于 2022-06-07 15:12:15 发布

zheng_li_dong

最新推荐文章于 2022-06-07 15:12:15 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/zheng_li_dong/article/details/90647060

版权

写一个简单的移动端 Todo_List效果

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
</head>
<body>
    <div id="app">

        <!-- header - start -->
        <header class="bar bar-nav">
            <button class="button pull-left">
              <span class="icon icon-star"></span>
            </button>

            <button 
                class="button pull-right" 
                @click='add_todo_flag=!add_todo_flag'
            >
                <span class="icon icon-edit"></span>
            </button>
            <h1 class="title">Todo_List</h1>
        </header>
        <!-- header - end -->

        <!-- content - start -->
        <div class="content">
            <input 
                type="text" 
                v-show='add_todo_flag' 
                v-model='add_todo_input' 
                @keyup.enter='addTodo' 
                @focus='getFocus'
            >

            <div 
                class="card" 
                v-for='( todo , index ) in newTodos' 
                :key='todo.id'
            >
                <div class="card-content">
                    <div class="card-content-inner">
                        {{ todo.task }}
                    </div>
                    
                    <div class="my-btn-box pull-right">
                        <button 
                            class="button button-success" 
                            @click='todo.flag=!todo.flag' 
                            :class="[ todo.flag?'button-fill':'' ]"
                        >
                            <span class="icon icon-check"></span>
                        </button>

                        <button 
                            class="button button-warning" 
                            @click='check( index )'
                        >
                            <span class="icon icon-remove"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- content - end -->

        <!-- footer - start -->
        <footer class="bar bar-tab">
            <a 
                v-for='tab in tabs' 
                :key='tab.id' 
                class="tab-item external" 
                :class="[ type===tab.name?tab.mold:'' ]" 
                @click='type=tab.name' 
                href="#" 
                v-html='tab.content'
            ></a>
        </footer>
        <!-- footer - end -->

        <!-- mask - start -->
        <div 
            class="mask-box" 
            v-show='mask_flag' 
            @click='mask_flag=false'
        >
            <div class="mask-box-bg"></div>
            <div class="card">
                <div class="card-content">
                    <b class="card-content-inner"> 您确定要删除吗？</b>
                    <div class="my-btn-box pull-right">
                        <button 
                            class="button button-warning button-fill" 
                            @click='remove( active_index )'
                        > 
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- mask - end -->
    </div>
</body>
<script src="../../vue.js"></script>
<script src="./index.js"></script>
</html>

CSS 代码：

/* content - start */
    .content .card-content{
        overflow: hidden;
    }

    .content .my-btn-box{
        display: flex;
    }

    .content .my-btn-box .button{
        margin: 7px;
    }
/* content - end */

/* mask - start */
    .mask-box{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0; top: 0;
        z-index: 10000;
    }
    .mask-box-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0; top: 0;
        background: #000;
        opacity: .5;
    }
    
    .mask-box .card{
        width: 80%;
        height: 100px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 10px;
    }
    .mask-box button{
        margin-top: 10px;
        width: 100px;
        height: 32px;
    }
    .mask-box b{
        display: block;
    }
/* mask - end */

/* footer - start */
footer a{
    border-radius: 10px
}

footer a.tab-item.external.success{
    background: green;
    color: white;
}

footer a.tab-item.external.primary{
    background: blue;
    color: white;
}

footer a.tab-item.external.warning{
    background: orange;
    color: white;
}
/* footer - end */

JS 代码：

new Vue ({
    el : '#app',

    data : {
        todos : [
            {
                id : 1,
                task : '做作业',
                flag : true
            },

            {
                id : 2,
                task : '打游戏',
                flag : true
            },

            {
                id : 3,
                task : '化妆',
                flag : true
            }
        ],

        add_todo_flag : false,  // 页面右上角的编辑按钮开关

        add_todo_input : '请输入内容：',  // input的value值

        mask_flag : false,  //遮罩层开关

        active_index : 0,  //保存index,在mask点击确定按钮的时候使用

        tabs : [
            {
                id : 1,
                content : "<span class='icon icon-app'></span><span class='tab-label'>所有任务</span>",
                name : 'all',
                mold : 'success'
            },

            {
                id : 2,
                content : "<span class='icon icon-cart'></span><span class='tab-label'>已完成</span>",
                name : 'finish',
                mold : 'primary'
            },

            {
                id : 3,
                content : "<span class='icon icon-settings'></span><span class='tab-label'>未完成</span>",
                name : 'unfinish',
                mold : 'warning'
            },
        ],

        type : 'all'
    },

    methods : {
        check ( index ){
            this.active_index = index;
            if ( this.todos[ index ].flag){
                this.remove ( index )
            }else {
                this.mask_flag = true
            }
        },

        remove ( index ){
            this.todos.splice ( index , 1 )
        },

        addTodo (){
            this.todos.push ({
                id : this.todos.length + 1,
                task : this.add_todo_input,
                flag : true
            });
            this.add_todo_input = '';
            this.add_todo_flag = false
        },

        getFocus (){
            this.add_todo_input = ''
        }
    },

    computed : {
        allTodos (){
            return this.todos
        },

        finishTodos (){
            return this.todos.filter ( todo => {
                return todo.flag && todo
            })
        },

        unfinishTodos (){
            return this.todos.filter ( todo => {
                return !todo.flag && todo
            })
        },

        newTodos (){
            switch ( this.type ) {
                case 'all':
                    return this.allTodos;
                    break;
                case 'finish':
                    return this.finishTodos;
                    break;
                case 'unfinish':
                    return this.unfinishTodos;
                    break;
                default:
                    break;
            }
        }
    }
})

zheng_li_dong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
todo_list

写一个简单的移动端 Todo_List效果HTML 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
复制链接

扫一扫