3.gif
<template>
<div class="practice-list">
<section class="todo-box">
<practiceTitle title="待办TODO列表"></practiceTitle>
<todoHeader @newVal="receiveVal"></todoHeader>
<todoNowork :todoArr="todoArr" @newFinishItem="newFinishArr"></todoNowork>
<todoFinish :todoArr="finishTodoArr"></todoFinish>
</section>
<section class="">
<practiceTitle title="选项卡"></practiceTitle>
<tabTitle @changeIndex="receiveTabIndex" :tabArr="tabArr"></tabTitle>
<tabContent :tabActiveIndex="tabActiveIndex" :tabArr="tabArr"></tabContent>
</section>
<section class="">
<practiceTitle title="下拉菜单"></practiceTitle>
<dropMenu :dropArr="dropMenuArr"></dropMenu>
</section>
</div>
</template>
<script>
import practiceTitle from '../views/practiceTitle.vue'
import todoHeader from '../views/todo/header.vue'
import todoNowork from '../views/todo/nowork.vue'
import todoFinish from '../views/todo/finish.vue'
import tabTitle from '../views/tab/tabTitle.vue'
import tabContent from '../views/tab/tabContent.vue'
import dropMenu from '../views/dropMenu/dropMenu.vue'
export default {
name: 'Practice01',
components: {practiceTitle, todoHeader, todoNowork, todoFinish, tabTitle, tabContent,dropMenu},
data() {
return {
todoArr: [],
finishTodoArr: [],
tabArr: [{
"title": "河南",
"content": "走回强周律管地流中按写段列军压上。"
}, {
'title': '江西',
'content': '特气采以派式到式里极极元我圆红发。用别器法地南件过变品布还打导土术连。'
}, {
'title': '海南',
'content': '江收来们立影红来七始能情才。机会七产习需存电建手全别每响例段己。空加光各改自层和又件路必成家。'
}],
tabActiveIndex: 0,
dropMenuArr:[
{name:'首页',children:[]},
{name:'我要出借',children:['出借计划','出借列表']},
{name:'我要借款',children:['我要借款','我要还款']},
{name:'我的账户',children:['出借账户','借款账户']},
{name:'关于我们',children:[]}
]
}
},
methods: {
receiveVal: function (item) {
this.todoArr.unshift(item);
},
newFinishArr: function (item) {
this.finishTodoArr.push(item);
},
receiveTabIndex: function (index) {
this.tabActiveIndex = index;
}
},
computed: {},
}
</script>
//practiceTitle.vue
<template>
<h2>{{title}}</h2>
</template>
<script>
export default {
name: "practiceTitle",
props:['title']
}
</script>
<style scoped>
</style>
// nowork.vue
<template>
<div>
<h3>待完成({{todoArr.length}})</h3>
<ul>
<li v-for="(item,index) in todoArr" :key="index" class="clear"><input class="fl" type="checkbox" @click="dealItem(index,item)" v-model="checked">第{{index+1}}项：{{item.val}}<span @click="deleteItem(index)" class="delete-todo-icon">删除</span></li>
</ul>
<p class="txt-white" v-if="!todoArr.length">暂无待办内容！</p>
</div>
</template>
<script>
export default {
// 从父级接收的值
props:['todoArr'],
data:function(){
return {checked:false}
},
methods:{
/**
* 删除项
* @param index
* @param status
*/
deleteItem:function (index) {
this.todoArr.splice(index,1);
},
/**
* 处理待办和完成项
* @param index
* @param item
* @param status
*/
dealItem:function (index,item) {
this.todoArr.splice(index,1);
this.$emit('newFinishItem',{val:item.val,checked:true});
}
}
}
</script>
// finish.vue
<template>
<div class="finish-todo">
<h3>已完成({{todoArr.length}})</h3>
<ul>
<li v-for="(item,index) in todoArr" :key="index" class="clear"><input class="fl" type="checkbox" @click="dealItem(index,item)" v-model="checked">第{{index+1}}项：{{item.val}}<span @click="deleteItem(index)" class="delete-todo-icon">删除</span></li>
</ul>
<p class="txt-white" v-if="!todoArr.length">暂无已完成内容！</p>
<todoFoot v-bind="$attrs"></todoFoot>
</div>
</template>
<script>
import todoFoot from './foot.vue'
export default {
// 从父级接收的值
props:['todoArr'],
components:{todoFoot},
data:function(){
return {checked:true}
},
created(){
// console.log(this.$attrs);
},
methods:{
/**
* 删除项
* @param index
* @param status
*/
deleteItem:function (index) {
this.todoArr.splice(index,1);
},
/**
* 处理待办和完成项
* @param index
* @param item
* @param status
*/
dealItem:function (index,item) {
this.todoArr.splice(index,1);
this.$emit('newFinishArr',{val:item.val,checked:true});
this.finishTodoArr.push();
}
}
}
</script>
<style scoped>
</style>
// header.vue
<template>
<div>
<input type="text" v-model="addTodoVal" v-on:keyup="addItem($event)">
</div>
</template>
<script>
export default {
// name: "Header",
data:function(){
return {
addTodoVal:''
}
},
methods:{
/**
* 增加待办项
* @param event
*/
addItem:function (event) {
if(event.keyCode==13){
if(/\s/.test(this.addTodoVal) || !this.addTodoVal){
console.log('不能为空或者包含空格!');
return;
}
this.$emit('newVal', {val:this.addTodoVal+' 创建时间：'+(new Date().toLocaleString()),checked:false});
this.addTodoVal='';
}
}
}
}
</script>
<style scoped>
</style>
//dropMenu.vue
<template>
<div class="drop-box">
<ul class="drop-ul clear">
<li v-for="(item,index) in dropArr"><a class="drop-title" href="#">{{item.name}}</a>
<ol v-if="item.children.length!=0" class="child-ol">
<li v-for="child in item.children"><a href="#">{{child}}</a></li>
</ol>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "dropMenu",
props:['dropArr'],
data(){
return {activeIndex:0,childShowStatus:true}
},
methods:{
}
}
</script>
<style scoped>
.drop-ul li{float: left; position: relative;
line-height: 30px;}
.drop-ul .drop-title{ font-size: 14px; padding: 0px 20px; color: #333; text-decoration: none;}
.drop-ul li:hover .drop-title{color: #0000ee;}
.drop-ul li:hover .child-ol{display: block;}
.child-ol{display: none; position: absolute; top:30px;
left: 0px;
background-color: #00FF33;}
.child-ol li{width: 100%;
text-align: center;
line-height: 30px;}
.child-ol li a{font-size: 12px; color: #333;}
.child-ol.show{display: block;}
</style>
// tabContent.vue
<template>
<div class="tab-content-box">
{{tabArr[tabActiveIndex].content}}
</div>
</template>
<script>
export default {
name: "tabContent",
props:['tabArr','tabActiveIndex']
}
</script>
// tabTitle.vue
<template>
<ul class="tab-menu-box clear">
<li v-for="(item,index) in tabArr" @click="changeActive(index)" :class="{active:index==qqTabActiveIndex}">{{item.title}}</li>
</ul>
</template>
<script>
export default {
name: "tabTitle",
props:['tabArr'],
data(){
return {active:true,qqTabActiveIndex:0}
},
methods:{
/**
* 切换选项卡
* @param index
*/
changeActive(index){
this.qqTabActiveIndex=index;
this.$emit('changeIndex',this.qqTabActiveIndex);
}
}
}
</script>
.finish-todo input[type='checkbox']{background-color: #00aced;}
.delete-todo-icon{float: right;
color: #00aced;
cursor: pointer; font-size: 14px;
line-height: 30px; padding: 0px 0px 0px 20px;
}
.practice-list h2{color: #fff; font-size: 24px;
line-height: 44px;
text-align: center;
font-weight: bold;}
.todo-box h3{font-size: 18px;
line-height: 30px; color: #fff;}
.todo-box li{line-height: 36px; font-size: 14px;
color: #fff;}
.practice-list>section{padding:5px 20px;
background-color: #999;
margin-bottom: 15px;}
.txt-white{color: #fff;}
.tab-container {
border: 1px solid #ddd;
margin: 10px;
padding: 10px;
}
.tab-menu-box li {
float: left;
line-height: 30px;
padding: 0px 25px;
border-top: 1px solid #edd;
border-right: 1px solid #ddd;
position: relative;
cursor: pointer;
}
.tab-menu-box li.active {
background-color: #007fff;
color: #000;
}
.tab-menu-box li.active .close-btn {
color: #fff;
}
.tab-menu-box li:first-child {
border-left: 1px solid #ddd;
}
.tab-menu-box .tab-title {
line-height: 30px;
display: block;
padding: 0px 10px;
}
.tab-menu-box .close-btn {
position: absolute;
right: 0px;
top: 0px;
right: 2px;
color: #007fff;
width: 16px;
line-height: 16px;
text-align: center;
}
.tab-menu-box .close-btn:hover {
color: #fff;
background-color: #007fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.tab-content-box {
border: 1px solid #ddd;
padding: 10px;
}
网友评论