todolist 案例

最新推荐文章于 2023-08-10 10:19:27 发布

nanwanLisa

最新推荐文章于 2023-08-10 10:19:27 发布

阅读量490

点赞数

文章标签：模仿todolist案例

本文链接：https://blog.csdn.net/nanwanLisa/article/details/97428181

版权

仿todolist案例

1.使用 vue 框架
2.选择一个组件库：
组件库：组件的集合体是一个html css js img 等的一个集合

ui库
- bootstrap
- Amaze UI
- SUI


SUI库分为 PC端和 移动端
pc端：
http://sui.taobao.org/sui/docs/gallery.html
移动端： http://m.sui.taobao.org/

流程

1，先用组件库大体的布局（选择SUI库）移动端：
http://m.sui.taobao.org/
图片示例：

1，上官网找相关的样式连接复制下来


<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

开始页面的载入


  <body>
    <div class="page-group">
        <div class="page page-current">
        
 <!-- 你的html代码 -->
        
        </div>
    </div>

    

  </body>

1.在基础组件里面找标题栏


<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">Lisa todolist</h1>
</header>

2.页面的section部分


<section>
<div class="content">
<input type="text" placeholder="请输入编辑内容" v-model="val" v-show="inputflag" @keyup.13="add">
<div class="card" v-for="(item,index) in newtodos">
<div class="card-content">
<div class="card-content-inner">
<p>{{item.task}}</p>
<div>
<button class="button button-danger pull-right" @click="check(index)">
<i class="icon icon-remove"></i>
</button>
<button class="button button-success pull-right" :class="[ item.flag && 'button-fill' ]" @click="item.flag=!item.flag">
<i class="icon icon-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>

3.遮罩层部分


<div class="mask-box" v-show="maskflag" @click="maskflag=false">
<div class="mask-bg">
<div class="mask-content">
<p>您确定要删除吗</p>
<button class="button button-fill button-danger pull-right" @click="masksure(activeindex)">
<!-- 这里面拿不到上面 v-for 循环里面的index
所以 想要拿到上面的index的值 我们需要先保存该值
当我们有了vue的时候该变量就是数据
-->
确定</button>
</div>
</div>
</div>

4.底部


<div class="tab-bar">
<ul>
<li class="circle" v-for="item in tabbars" :class="['circle-'+item.style,type===item.text && 'circle-fill']" @click="type=item.text">
{{item.text}}
</li>
<!-- li的类名需要挨个儿往上加
li点击的时候须要切换加类名 不能写死了
所以需要用循环加类名-->
<!--
tab
点击li的时候须要实现选项卡的切换 背景也得改变
-->
</ul>
</div>

需要实现的效果
1.任务的列表渲染

<div>
    <div class="card"  v-for="(item,index) in todos)">    
         <div class="card-content">    
          <div class="card-content-inner">
          <p>{{ item.task }}</p>
          <div>
            <button>
                    <i></i>
                    </button>
              <button>
                    <i></i>  
                    </button>
          </div>
               </div>

           </div>
       </div>
    </div>
    
</div>

new Vue({
    el:'.page-group'
    data:{
        
    }
    

})

2.列表选中的类名添加（添加背景填充的类名）


<button class="button button-danger pull-right" @click="check(index)">
<i class="icon icon-remove"></i>
</button>
<button class="button button-success pull-right" :class="[ item.flag && 'button-fill' ]" @click="item.flag=!item.flag">
<i class="icon icon-check"></i>
</button>

这里判断了item的flag是true还是false 是true的时候 添加类名‘button-fill’

   切换卡片打钩按钮的点击选中状态 点击的时候 取反  

@click="item.flag=!item.flag

效果展示：

3.点击垃圾桶图标删除该条数据


<button class="button button-danger pull-right" @click="check(index)">

<i class="icon icon-remove"></i>

</button>

添加点击事件：
因为点击删除的时候会出现确定删除的遮罩层


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


check(index) { 
        if (this.todos[index].flag) { 
                this.remove(index)
        } else { 
                this.maskflag = true
                this.activeindex = index 
        }
},


check(index) {

//当点击删除按钮时判断任务的完成状态 此时的index值就是data里面index值


        if (this.todos[index].flag) { 
        
        //flag为true的时候证明已经完成可以      直接删除
        
        this.remove(index)
    } else { 
    //为false证明没有完成,出现模态框
    
this.maskflag = true 

// maskflag 是控制模态框出现的开关

this.activeindex = index 

//保存当前点击的index的值 方便遮罩层里面的button确定删除数据的判断
/*
模态框出现了之后 点击确定或者点击其他地方模态框要关闭（隐藏）
所以同一个关闭事件要在两个地方实现 一个是点击请确定的button按钮 一个是点击按钮之外的遮罩层的地方
我们需要利用事件冒泡（给最大的父元素添加事件）
*/
}
},

4.点击编辑图标出现input框输入内容



val :  ' ' ,
inputflag: false, //因为input一开始是看不见的 点击编辑图标它才会出现

添加 v-show=“inputflag” 给它一个开关

<input type="text" placeholder="请输入编辑内容" v-model="val" v-show="inputflag" @keyup.13="add">

5.输入的内容要像任务一样一次显示在列表里

<input type="text" placeholder="请输入编辑内容" v-model="val" v-show="inputflag" @keyup.13="add">

  添加add事件 添加数据在数组里：
  
  
add() {
this.todos.push({
id: this.length + 1,
task: this.val
})
this.val = ''
},

6.若该条数据没有备选中则点击垃圾桶图标的时候会弹出一个遮罩层
8.点击遮罩层确定的按钮该条数据要被删除


<button class="button button-danger pull-right" @click="check(index)">
<i class="icon icon-remove"></i>
</button>


maskflag: false, // 遮罩（模态框）的开关


<div class="mask-box" 
        v- show="maskflag"  
        @click="maskflag=false">
        
<div class="mask-bg">

<div class="mask-content">
<p>您确定要删除吗</p>

<button class="button 
    button-fill button-danger pull-right" 
    @click="masksure(activeindex)">

<!-- 这里面拿不到上面 v-for 循环里面的index
所以 想要拿到上面的index的值 我们需要先保存该值
当我们有了vue的时候该变量就是数据
-->

            确定</button>
        </div>
    </div>
</div>


check(index) {

//当点击删除按钮时判断任务的完成状态 此时的index值就是data里面index值


        if (this.todos[index].flag) { 
        
        //flag为true的时候证明已经完成可以      直接删除
        
        this.remove(index)
    } else { 
    //为false证明没有完成,出现模态框
    
this.maskflag = true 

// maskflag 是控制模态框出现的开关

this.activeindex = index 

//保存当前点击的index的值 方便遮罩层里面的button确定删除数据的判断
/*
模态框出现了之后 点击确定或者点击其他地方模态框要关闭（隐藏）
所以同一个关闭事件要在两个地方实现 一个是点击请确定的button按钮 一个是点击按钮之外的遮罩层的地方
我们需要利用事件冒泡（给最大的父元素添加事件）
*/
}
},

7.遮罩层有一个确定删除的图标点击确定或者遮罩层其他地方遮罩层会消失


<button class="button button-fill button-danger pull-right" @click="masksure(activeindex)">

此时传的参需要把上面代码中循环的index保存下来，
因为点击确定的时候我们确定的是想、删除点击删除按钮出现遮罩层 删除承载删除的那一条数据
activeindex使我们存的index

masksure(index) { //遮罩层里面的确定按钮这行的事件
this.remove(index) //该删除事件需要index值
}

9,底部数据也是列表渲染的结果


type: 'A',
tabbars: [{
id: 1,
text: 'A',
style: 'all'
},
{
id: 2,
text: 'F',
style: 'fanish'
},
{
id: 3,
text: 'U',
style: 'unfanish'
}
]



<!-- tabbar start -->
    <div class="tab-bar">
    <ul>
<li class="circle" 
    v-for="item in tabbars" 
       :class="['circle-'+item.style,type===item.text && 'circle-fill']" 
       @click="type=item.text">
       
    {{item.text}}
    
</li>

li的类名需要挨个儿往上加
li点击的时候须要切换加类名 不能写死了
所以需要用循环加类名

点击li的时候须要实现选项卡的切换 背景也得改变


</ul>
</div>

10.底部圆圈的tab效果

11.点击第一个首先自己的背景填充然后相对应数数据显示


computed: {
// 首先要把数组里面 已完成的挑出来 未完成的挑出来 所有的数据就是todos数组挑出来
// 循环有 while do···while for map foreach filter（把满足条件的循环出来形成一个新数组） some every
alltodos() {
return this.todos
},
fanishtodos() {
// 已完成任务
return this.todos.filter(item => item.flag && item)
},
unfanishtodos() {
return this.todos.filter(item => !item.flag)
},
newtodos() {
switch (this.type) {
case 'A':
return this.alltodos
break;
case 'F':
return this.fanishtodos
break;
case 'U':
return this.unfanishtodos
break;
default:
break;
}
}
},

nanwanLisa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todolist 案例

仿todolist案例1.使用 vue 框架2.选择一个组件库：组件库：组件的集合体是一个html css js img 等的一个集合ui库bootstrapAmaze UISUISUI库分为 PC端和移动端pc端：http://sui.taobao.org/sui/docs/gallery.html移动端： http://m.sui.taobao.org/...
复制链接

扫一扫