100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<template>
|
|
<div id="app">
|
|
<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange"/>
|
|
<a-button type="primary" @click="addItemToList">添加事项</a-button>
|
|
|
|
<a-list bordered :dataSource="infolist" class="dt_list">
|
|
<a-list-item slot="renderItem" slot-scope="item">
|
|
<!-- 复选框 -->
|
|
<a-checkbox :checked="item.done" @change="(e)=>(cbStatusChange(e,item.id))">{{ item.info }}</a-checkbox>
|
|
<!-- 删除链接 -->
|
|
<a slot="actions" @click="removeItemByID(item.id)">删除</a>
|
|
</a-list-item>
|
|
|
|
<!-- footer区域 -->
|
|
<div class="footer" slot="footer">
|
|
<span>{{unDoneLength}}条剩余</span>
|
|
<a-button-group>
|
|
<a-button :type="viewstatus==='all'?'primary':'default'" @click="changelist('all')">全部</a-button>
|
|
<a-button :type="viewstatus==='undone'?'primary':'default'" @click="changelist('undone')">未完成</a-button>
|
|
<a-button :type="viewstatus==='done'?'primary':'default'" @click="changelist('done')">已完成</a-button>
|
|
</a-button-group>
|
|
<a @click="clean">清除已完成</a>
|
|
</div>
|
|
</a-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState,mapGetters} from 'vuex';
|
|
export default {
|
|
name: "app",
|
|
data() {
|
|
return { };
|
|
},
|
|
created(){
|
|
this.$store.dispatch('getlist')
|
|
},
|
|
methods: {
|
|
handleInputChange(e){
|
|
// console.log(e.target.value)
|
|
this.$store.commit('setInputValue',e.target.value)
|
|
},
|
|
addItemToList(){
|
|
//trim()去除字符串头尾两边的空格
|
|
if(this.inputValue.trim().length <=0){
|
|
//弹出一个警告框
|
|
return this.$message.warning('文本框内容不能为空')
|
|
}
|
|
this.$store.commit('addItem')
|
|
},
|
|
removeItemByID(id){
|
|
// console.log(id)
|
|
this.$store.commit("removeItem",id)
|
|
},
|
|
cbStatusChange(e,id){
|
|
//监听复选框选中状态的变化
|
|
// console.log(e.target.checked,id)
|
|
const param = {
|
|
id:id,
|
|
done:e.target.checked
|
|
}
|
|
this.$store.commit('changeStatus',param)
|
|
},
|
|
//清除已完成的任务
|
|
clean(){
|
|
this.$store.commit('cleanDone')
|
|
},
|
|
//修改页面展示的列表数据
|
|
changelist(status){
|
|
// console.log(status)
|
|
this.$store.commit('changeviewstatus',status)
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState(['list','inputValue','viewstatus']),
|
|
...mapGetters(['unDoneLength','infolist'])
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
#app {
|
|
margin: 175px 450px;
|
|
padding: 10px;
|
|
}
|
|
.my_ipt {
|
|
width: 500px;
|
|
margin-right: 10px;
|
|
}
|
|
.dt_list {
|
|
width: 500px;
|
|
margin-top: 10px;
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|