利用Vue实现ToDoList

最新推荐文章于 2022-11-03 15:48:05 发布

鹿露lu

最新推荐文章于 2022-11-03 15:48:05 发布

阅读量477

点赞数

本文链接：https://blog.csdn.net/waoohaha/article/details/97424920

版权

1：组件库：

ui库：
- bootstrap
- Amaze UI
- SUI
  - pc：http://sui.taobao.org/sui/docs/gallery.html
  - 移动： http://m.sui.taobao.org/
组件库：组件的集合体
- 组件是一个html css js img 等的一个集合体

2：思路

选择SUI ui库（移动端）
首页中的头部
- 点击右侧添加会在首页的主体内容中显示一个表单
- 再次点击表单消失
- 需要考虑到用开关来控制
  - 开关初始值为flage=false
  - 点击添加 flage取反
```
<a class="icon icon-edit pull-right" @click="flage=!flage"></a>
```
- 表单使用双向绑定点击回车键实现将表单内容添加到主体内容中（其中主体内容存放为json数据）
首页中的主体内容
- 将卡片用循环的方式渲染出来
```
 <div class="card"
    v-for="(itme,index) in newTodos"
>
```
- 然后对其实现删除和完成未完成设置
  - 完成未完成设置：
    
    1：使用到开关
    
    2：点击按钮开关值取反从而达到切换效果
  - 删除操作
    
    1：点击删除首先判断上面开关的值
    
    2：如果是ture（已完成），则直接调用删除方法进行删除
    
    3：如果是flase(未完成)，点击删除是弹出遮罩，提示用户是否确定删除
    - 点击遮罩任意位置使遮罩消失,利用事件冒泡机制，给最大的dom元素添加点击事件
  - 需要定义遮罩开关初始值为flase 当在未完成情况下点击删除将遮罩开关设为true 此时遮罩弹出
    - 对遮罩上的确认按钮添加点击事件点击确定将相对应的卡片删除
      - 此时删除相对应的卡片是利用存储值的方式在上面点击删除时，将相对应的索引存在data中在点击确认时意参数形式传入就可以获取到响度应的卡片了

首页中的底部内容

底部用循环渲染出来每个按钮都对应不同的类名
底部数据以json格式存内容包括每个按钮相对应的类名
当点击按钮时，给相对应的按钮添加相对应的类

 <ul>
    <li class="circle"
        v-for="item in tabbars"
        :class="['circle-'+item.style,texts===item.text&&'circle-fill']"
         @click="texts=item.text"
     >
      {{item.text}}
     </li>
</ul>




texts: 'A',
tabbars: [
            {
                id: 1,
                text: 'A',
                style: 'all'
            },
            {
                id: 2,
                text: 'F',
                style: 'finish'
            },
            {
                id: 3,
                text: 'U',
                style: 'unfinish'
            },
        ]

按钮分别为全部、已完成、未完成
- 按照卡片上内个完成未完成开关进行分类
- 第一类全部直接将卡片所有return
```
allTodos() {
            return this.card
        },
```
- 第二类已完成利用flifet对所有卡片进行循环判断完成未完成开关状态，将为true的return
```
 finishTodos() {
            return this.card.filter(item => item.flage && item)
        },
```
- 第三类未完成利用flifet对所有卡片进行循环判断完成未完成开关状态，将为flase的return
```
unfinishTodos() {
            return this.card.filter(item => !item.flage && item)
        },
```
- 定义一个函数使用switch进行判断将点击的按钮相对应的方法名称返回（函数在vue里面使用直接输入函数名称）

<div class="card"
                v-for="(itme,index) in newTodos"
            >
                <div class="card-content">
                    <div class="card-content-inner a" >
                        <p>{{itme.title}}</p>
                        <div class="but box">
                            <button class="button button-danger pull-right"
                                @click="judgeremove(index)"
                            >
                                <span class="icon icon-remove"></span>
                            </button>
                            <button class="button button-success pull-right"
                                :class="[itme.flage&&'button-fill']"
                                @click="itme.flage=!itme.flage"
                            >
                                <span class="icon icon-check"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>


        newTodos() {
            switch (this.texts) {
                case 'A':
                    return this.allTodos
                    break;
                case 'F':
                    return this.finishTodos
                    break;
                case 'U':
                    return this.unfinishTodos
                    break;
                default:
                    break;
            }
        }

    }
})

完整代码：（仅供参考）

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="./css/index.css">
<div class="page-group">
        <div class="page page-current">
        <!-- 你的html代码 -->

        <!-- heard start -->
        <header class="bar bar-nav">
            <a class="icon icon-star pull-left"></a>
            <a class="icon icon-edit pull-right" @click="ifinput=!ifinput"></a>
            <h1 class="title">标题</h1>
          </header>
        <!-- heard end -->

        <!-- content start -->
        <div class="content">

            <input type="text" placeholder="请输入代办事项" v-model="val" @keyup.13="keyup" v-show="ifinput">

            <div class="card"
                v-for="(itme,index) in newTodos"
            >
                <div class="card-content">
                    <div class="card-content-inner a" >
                        <p>{{itme.title}}</p>
                        <div class="but box">
                            <button class="button button-danger pull-right"
                                @click="judgeremove(index)"
                            >
                                <span class="icon icon-remove"></span>
                            </button>
                            <button class="button button-success pull-right"
                                :class="[itme.flage&&'button-fill']"
                                @click="itme.flage=!itme.flage"
                            >
                                <span class="icon icon-check"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- content end -->

        <!-- shade start -->
        <div class="shade" v-show="confirmbut" @click="confirmbut=false"> <!-- 利用了冒泡的原理   无论是点击空白还是按钮 confirmbut都会等于false -->
            <div class="hiit">
                <p>您确定要删除吗？</p>
                <button class="button button-fill button-danger pull-right" @click="confirm(num)">确定</button>
            </div>
        </div>
        <!-- shade end -->


        <!-- foot start -->
            <div class="foot">
                <ul>
                    <li class="circle"
                        v-for="item in tabbars"
                        :class="['circle-'+item.style,texts===item.text&&'circle-fill']"
                        @click="texts=item.text"
                    >
                    {{item.text}}
                    </li>
                </ul>
            </div>
        <!-- foot end -->
        </div>
    </div>
<script src="./lib/vue.js"></script>
<script src="./js/index.js"></script>

new Vue({
    el: ".page-group",
    data: {
        card: [
            {
                id: 1,
                title: '任务一',
                flage: true
            },
            {
                id: 2,
                title: '任务二',
                flage: true
            },
        ],
        val: '',
        ifinput: false,
        confirmbut: false,
        num: 0,
        texts: 'A',
        tabbars: [
            {
                id: 1,
                text: 'A',
                style: 'all'
            },
            {
                id: 2,
                text: 'F',
                style: 'finish'
            },
            {
                id: 3,
                text: 'U',
                style: 'unfinish'
            },
        ]
    },
    methods: {
        judgeremove(index) { //点击卡片删除按钮 如果已经完成  直接删除   如果未完成   显示友情提示 
            this.num = index   //保存当前点击的dom元素的索引
            if (this.card[index].flage) {
                this.remove(index)
            } else {
                this.confirmbut = true
            }
        },
        remove(i) {  //删除卡片
            this.card.splice(i, 1)
        },
        confirm(index) {//点击友情提示的删除按钮
            this.remove(index)
        },
        keyup() {//添加卡片
            this.card.push(
                {
                    id: this.length + 1,
                    title: this.val,
                    flage: true
                }
            )
            this.val = ''
            this.ifinput = false
        }
    },
    computed: {
        allTodos() {
            return this.card
        },
        finishTodos() {
            // return this.card.filter(function(item){
            //     if(item.flage){
            //         return item
            //     }
            // })
            // 简写
            return this.card.filter(item => item.flage && item)
        },
        unfinishTodos() {
            return this.card.filter(item => !item.flage && item)
        },
        newTodos() {
            switch (this.texts) {
                case 'A':
                    return this.allTodos
                    break;
                case 'F':
                    return this.finishTodos
                    break;
                case 'U':
                    return this.unfinishTodos
                    break;
                default:
                    break;
            }
        }

    }
})

li{
    list-style: none;
}
.card-content-inner{
    overflow: hidden;
}
.button{
    margin-left: 10px
}

/* 遮罩 */
.shade{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 80;
}
.shade .hiit{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    width: 80%;
    height: 120px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
}


.foot{
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 10px;

}
.foot ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 0px
}
.circle{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
}
.circle.circle-all{
    border: 1px solid green;
    color: green
}
.circle.circle-all.circle-fill{
    background: green;
    color: whitesmoke
}
.circle.circle-finish{
    border: 1px solid blue;
    color: blue
}
.circle.circle-finish.circle-fill{
    background: blue;
    color: whitesmoke
}
.circle.circle-unfinish{
    border: 1px solid orange;
    color: orange
}
.circle.circle-unfinish.circle-fill{
    background: orange;
    color: whitesmoke
}

鹿露lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Vue实现ToDoList

1：组件库：ui库：bootstrapAmaze UISUIpc：http://sui.taobao.org/sui/docs/gallery.html移动： http://m.sui.taobao.org/组件库：组件的集合体组件是一个html css js img 等的一个集合体2：思路选择SUI ui库（移动端）首页中的头部点...
复制链接

扫一扫