2.删除
待办事项 3.标记已完成
待办事项 4.编辑
待办事项
首先，需要安装
Vue、ElementUI和
Vuex。
```
npm install
vue
npm install element-ui
npm install
vuex
```
在main.js中引入
Vue、ElementUI和
Vuex：
```javascript
import
Vue from '
vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.
css'
import
Vuex from '
vuex'
import App from './App.
vue'
Vue.use(ElementUI)
Vue.use(
Vuex)
Vue.config.productionTip = false
new
Vue({
render: h => h(App),
}).$mount('#app')
```
接下来，创建store.js文件，定义state、mutations、actions和getters：
```javascript
import
Vue from '
vue'
import
Vuex from '
vuex'
Vue.use(
Vuex)
export default new
Vuex.Store({
state: {
todos: [
{ id: 1, text: '写
代码', done: false },
{ id: 2, text: '看电影', done: true },
{ id: 3, text: '做饭', done: false }
]
},
mutations: {
add
Todo (state,
todo) {
state.
todos.push(
todo)
},
delete
Todo (state, id) {
state.
todos = state.
todos.filter(
todo =>
todo.id !== id)
},
toggle
Todo (state, id) {
state.
todos = state.
todos.map(
todo => {
if (
todo.id === id) {
todo.done = !
todo.done
}
return
todo
})
},
edit
Todo (state,
todo) {
state.
todos = state.
todos.map(item => (item.id ===
todo.id ?
todo : item))
}
},
actions: {
add
Todo ({ commit },
todo) {
commit('add
Todo',
todo)
},
delete
Todo ({ commit }, id) {
commit('delete
Todo', id)
},
toggle
Todo ({ commit }, id) {
commit('toggle
Todo', id)
},
edit
Todo ({ commit },
todo) {
commit('edit
Todo',
todo)
}
},
getters: {
todos: state => state.
todos,
done
Todos: state => state.
todos.filter(
todo =>
todo.done),
active
Todos: state => state.
todos.filter(
todo => !
todo.done)
}
})
```
在App.
vue中，使用ElementUI的组件实现
待办事项页面：
```
vue
<template>
<div class="container">
<h1 class="title">
Todo List</h1>
<div class="add-
todo">
<el-
input v-model="new
Todo" placeholder="请输入
待办事项"></el-
input>
<el-button type="primary" @click="add
Todo">添加</el-button>
</div>
<el-divider></el-divider>
<el-card v-for="
todo in active
Todos" :key="
todo.id" class="
todo-card">
<div class="
todo-content">
<el-checkbox v-model="
todo.done" @change="toggle
Todo" class="
todo-checkbox">{{
todo.text }}</el-checkbox>
<el-button-group>
<el-button type="text" @click="edit
Todo">编辑</el-button>
<el-button type="text" @click="delete
Todo">删除</el-button>
</el-button-group>
</div>
</el-card>
<el-divider></el-divider>
<h2 class="subtitle">已完成</h2>
<el-card v-for="
todo in done
Todos" :key="
todo.id" class="
todo-card">
<div class="
todo-content">
<el-checkbox v-model="
todo.done" @change="toggle
Todo" class="
todo-checkbox">{{
todo.text }}</el-checkbox>
<el-button-group>
<el-button type="text" @click="edit
Todo">编辑</el-button>
<el-button type="text" @click="delete
Todo">删除</el-button>
</el-button-group>
</div>
</el-card>
<el-dialog :visible.sync="editVisible" title="编辑
待办事项">
<el-
input v-model="edit
TodoText" placeholder="请输入
待办事项"></el-
input>
<div slot="footer">
<el-button @click="editVisible = false">取消</el-button>
<el-button type="primary" @click="saveEdit">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters, mapActions } from '
vuex'
export default {
name: 'App',
computed: {
...mapGetters(['active
Todos', 'done
Todos'])
},
data () {
return {
new
Todo: '',
edit
TodoId: null,
edit
TodoText: '',
editVisible: false
}
},
methods: {
...mapActions(['add
Todo', 'delete
Todo', 'toggle
Todo', 'edit
Todo']),
add
Todo () {
if (this.new
Todo.trim()) {
this.add
Todo({
id: Date.now(),
text: this.new
Todo,
done: false
})
this.new
Todo = ''
}
},
delete
Todo (
todo) {
this.delete
Todo(
todo.id)
},
toggle
Todo (
todo) {
this.toggle
Todo(
todo.id)
},
edit
Todo (
todo) {
this.edit
TodoId =
todo.id
this.edit
TodoText =
todo.text
this.editVisible = true
},
saveEdit () {
if (this.edit
TodoText.trim()) {
this.edit
Todo({
id: this.edit
TodoId,
text: this.edit
TodoText,
done: false
})
this.editVisible = false
}
}
}
}
</script>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.title {
text-align: center;
margin-bottom: 20px;
}
.add-
todo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.
todo-card {
margin-bottom: 10px;
}
.
todo-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.
todo-checkbox {
flex: 1;
margin-right: 10px;
}
.subtitle {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
```
最后，在index.html中添加id为app的div：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Todo List</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/js/app.js"></script>
</body>
</html>
```
这样，就完成了一个基于
Vue、ElementUI和
Vuex的
待办事项页面。
1 效果图：2 环境：======2.1 谷歌浏览器：强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。2.2 微软编辑器vscode：用于代码编写。3 知识点：===代码注释中有说明===3.1 html基础知识。3.2 css基础知识。3.3 vue基础知识。===开始===4 html基础框架： vue-note ...
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
