Vue-案列-todelist

最新推荐文章于 2024-11-29 09:12:36 发布

panda_pan9527

最新推荐文章于 2024-11-29 09:12:36 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/panda_pan9527/article/details/97514637

案列:todolist

用SUI组件库编写html样式

常见的组件库
- ui库： √
  1. bootstrap
  2. Amaze UI
  3. SUI
    - pc： http://sui.taobao.org/sui/docs/gallery.html
    - 移动： http://m.sui.taobao.org/
  4. Framework7： http://framework7.taobao.org/
- 组件库: 组件的集合体
  
  什么是组件？组件是一个html css js img 等的一个集合体

写头部的样式和图标事件
写中间li的循环事件，添加对勾事件，判断任务是否完成
写删除的遮罩，然后给删除添加一个是否删除的时间
写底部样式，用添加类名的方法来判断所有任务，完成的任务，未完成的任务
用计算属性来绑定已完成任务，所有任务和未完成任务

//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="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="page-group">
        <div class="page page-current">
            <!-- 你的html代码 -->
            <!-- header -- start -->
            <header class="bar bar-nav">
                <a class="icon icon-star pull-left"></a>
                <a class="icon icon-edit pull-right" 
                    @click = "inputFlag = !inputFlag"
                ></a>
                <h1 class="title">panda-pan</h1>
            </header>
            <!-- header -- end -->
            <!-- content -- start -->
            <section>
                <div class="content">
                    <input type="text"
                    v-model = 'val'
                    v-show = 'inputFlag'
                    @keyup.13 = 'addItem' 
                    placeholder = "亲，请输入你的任务"
                    >
                    <div class="card"
                         v-for = "(item,index) in nowTodos"
                         
                    >
                        <div class="card-content">
                            <div class="card-content-inner">
                                <p> {{item.task}} </p>
                                <button class="pull-right button button-danger">
                                    <i class="icon icon-remove"
                                        @click = "check(index)"
                                    ></i>
                                </button>
                                <button 
                                class="pull-right button button-success"
                                @click = "item.flag = !item.flag"
                                :class = "[item.flag && 'button-fill']"
                                >
                                    <i class="icon icon-check"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
            <!-- content -- end -->
            <!-- 遮罩 -- start -->
                <div class="box" 
                     v-show = 'maskFlag'
                     @click = "maskFlag = false"
                     >
                    <div class="mask"></div>
                    <div class="office">
                        <p>死东西，任务完成了嘛，就删我！</p>
                        <button class="pull-right button button-fill button-warning"
                        @click = "ensure(activeIndex)"
                        >确定</button>
                    </div>
                </div>
            <!-- 遮罩 -- end -->
            <!-- footer -- start -->
            <div class="footer">
                <ul>
                    <li class="circle"
                        v-for = "item in tabbars"
                        :class = "[item.style,tabtype === item.type && 'button-fill']"
                        @click ="tabtype = item.type"
                    > {{item.type}} </li>
                </ul>
            </div>
            <!-- footer -- end -->
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>

</html>

//js代码
new Vue({
    el:'.page-group',
    data:{
        todos:[
            {
                id:1,
                task:'任务一',
                flag:true
            },
            {
                id:2,
                task:'任务二',
                flag:true
            },
        ],
        val:'',
        inputFlag:false,//输入框的开关
        itemFlag:true,//任务完成开关
        activeIndex:0,//存放索引值
        maskFlag:false,//遮罩开关
        tabtype:'A',
        tabbars:[
            {
                id:1,
                type:'A',
                style:'button button-success',
                
            },
            {
                id:2,
                type:'F',
                style:'button',
               
            },
            {
                id:3,
                type:'U',
                style:'button button-warning',
              
            }
        ]
    },
    methods:{
       addItem(){
           this.todos.push({
               id:this.todos.length+1,
               task:this.val,
               flag:true
           })
           this.inputFlag = false//input显示隐藏开关
       },
       check(index){//点击删除按钮判断任务是否完成
           if(this.todos[index].flag){
               this.remove(index)
           }else{
            this.activeIndex = index//将索引值赋给存放索引的开关
            this.maskFlag = true
           }
       },
       remove(index){//删除任务
         this.todos.splice(index,1)
       },
       ensure(index){//遮罩确定按钮，确定是否删除
            this.remove(index)
       }

    },
    computed:{
        nowTodos(){
            switch(this.tabtype){
                case 'A':
                return this.todos
                backe;
                case 'F':
                return this.todos.filter(item=>item.flag&&item)
                backe;
                case 'U':
                return this.todos.filter(item=>!item.flag&&item)
            }
        }
    }
})

//css代码
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.content{
    padding-top:54px; 
  }
.card{
  overflow: hidden;
  padding:10px; 
}
.button-danger{
  margin-left: 5px;  
}
.content input{
  margin-left: 77px;
  border:1px solid yellowgreen;
  background: #FFFAFA;
  border-radius: 5px;
  padding: 5px;
}
.box{
  width:100%;
  height: 100%;
  position: fixed;
  z-index: 99;
}
.box .mask{
  width: 100%;
  height:100%;
  position: fixed;
  background: #000;
  opacity: .5;
}
.box .office{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 355px;
  height: 100px;
  background: #fff;
  border-radius: 10px;
  padding: 0 10px;
}
.box .office p{
  font-weight: bold;
}
.box .office button{
  width: 80px;
  height: 30px;
}
.footer{
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 10px;
  left: 0;
  
}
.footer ul{
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around
}
.footer .circle {
  width: 80px;
  height: 80px;
  float: left;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
}