1:组件库:
-
ui库:
- bootstrap
- Amaze UI
- SUI
-
组件库:组件的集合体
- 组件是一个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
}