登陆可实现PC、移动端同步进度.
Element 美化 TODO 项目
1. 前言
本小节我们将带大家利用 Element 一起优化我们的 TODO 项目。
2. Element 简介
Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
3. 编写路由
首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们可以打开 ‘router/index.js’ 文件进行如下配置：
import Vue from "vue";
import VueRouter from "vue-router";
import List from "../views/List.vue";
import Add from "../views/Add.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/list",
name: "list",
component: List,
alias: "/"
},
{
path: "/add",
name: "home",
component: Add
}
];
const router = new VueRouter({
routes
});
export default router;
4. 入口文件
要使用 Element 首先我们需要通过 npm 安装 Element：
npm install element-ui --save
安装完成之后，我们需要修改 main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
5. 使用 Vuex 保存数据
5.1 创建 mutation-types (store/types.js)
export const INIT_TODO = "INIT_TODO";
export const ADD_TODO = "ADD_TODO";
export const DEL_TODO = "DEL_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
5.2 创建 store (store/index.js)
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
import { ADD_TODO, DEL_TODO, COMPLETE_TODO, INIT_TODO } from "./types";
export default new Vuex.Store({
state: {
list: []
},
getters: {
count: state => isComplete => {
return state.list.filter(item => item.isComplete === isComplete).length;
},
todoList: state => {
return state.list;
}
},
mutations: {
[INIT_TODO](state, payload) {
state.list = payload.list;
},
[ADD_TODO](state, payload) {
state.list.push(payload);
},
[DEL_TODO](state, payload) {
const index = payload.index;
state.list.splice(index, 1);
},
[COMPLETE_TODO](state, payload) {
const index = payload.index;
state.list[index].isComplete = 1;
}
},
actions: {
initList({ commit }) {
axios.get("/todo/list").then(res => {
commit(INIT_TODO, { list: res.data.data });
});
}
}
});
6. 改造 App.vue
<template>
<div id="app">
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router>
<el-menu-item index="/list">
<i class="el-icon-menu"></i>
<span slot="title">待办列表</span>
</el-menu-item>
<el-menu-item index="/add">
<i class="el-icon-circle-plus-outline"></i>
<span slot="title">添加待办</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "App",
components: {},
methods: {
...mapActions(["initList"])
},
created() {
this.initList();
}
};
</script>
<style lang="scss">
* {
padding: 0;
margin: 0;
}
#app {
height: 100%;
}
</style>
7. 编写列表页面（views/list.vue）
<template>
<div>
<el-table
class="el-table"
:data="todoList"
border
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column fixed prop="name" label="事项名称" width="150">
</el-table-column>
<el-table-column prop="date" label="事项截止时间" width="120">
</el-table-column>
<el-table-column prop="type" label="事项类型" width="120">
</el-table-column>
<el-table-column prop="urgent" label="是否紧急" width="120">
<template slot-scope="scope">
<span>{{ scope.row.urgent | urgentText }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="事项详情"></el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.$index)"
type="danger"
size="small"
>删除</el-button
>
<el-button
type="primary"
size="small"
@click="handleComplete(scope.$index)"
:disabled="scope.row.isComplete === 1"
>完成</el-button
>
</template>
</el-table-column>
</el-table>
<div style="text-align:left">
总共：{{ todoList.length }} 个任务。 已完成：{{
count(1)
}}
个任务。未完成：{{ count(0) }} 个任务。
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { COMPLETE_TODO, DEL_TODO } from "../store/types";
export default {
methods: {
...mapMutations([COMPLETE_TODO, DEL_TODO]),
handleDelete(index) {
this.DEL_TODO({ index });
},
handleComplete(index) {
this.COMPLETE_TODO({ index });
},
tableRowClassName({ row }) {
if (row.isComplete === 1) {
return "complete-row";
}
return "";
}
},
computed: {
...mapGetters(["todoList", "count"])
},
filters: {
urgentText(value) {
if (value === 0) {
return "紧急";
}
return "非紧急";
}
},
data() {
return {
tableData: []
};
}
};
</script>
<style>
.el-table .complete-row {
background: #f0f9eb;
}
</style>
8. 编写添加事项页面
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="180px">
<el-form-item prop="name" label="事项名称：">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="date" label="事项截止时间：">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date"
value-format="yyyy-MM-dd"
style="width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item prop="type" label="事项类型：">
<el-select
v-model="form.type"
placeholder="请选择活动区域"
style="width: 100%;"
>
<el-option label="学习" value="学习"></el-option>
<el-option label="工作" value="工作"></el-option>
<el-option label="游戏" value="游戏"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="urgent" label="是否紧急：">
<el-radio-group v-model="form.urgent">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="content" label="事项详情：">
<el-input type="textarea" v-model="form.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { mapMutations } from "vuex";
import { ADD_TODO } from "../store/types";
export default {
data() {
return {
form: {
name: "",
content: "",
date: "",
urgent: 1,
type: ""
},
rules: {
name: [
{ type: "string", required: true, message: "请填写待办事项的名称" }
],
content: [
{
type: "string",
required: true,
message: "请填写待办事项的详情",
trigger: "blur"
},
{
type: "string",
min: 20,
max: 50,
message: "长度限制在20-50个字符",
trigger: "blur"
}
],
type: [
{ type: "string", required: true, message: "请填写待办事项的称类型" }
]
}
};
},
methods: {
...mapMutations([ADD_TODO]),
onSubmit() {
this.$refs.form.validate(validate => {
if (validate) {
this.ADD_TODO({ ...this.form, isComplete: 0 });
this.$message({
message: "添加成功",
type: "success"
});
this.$refs.form.resetFields();
}
});
},
cancel() {
this.$refs.form.resetFields();
}
}
};
</script>
9. 小节
本小节我们主要带大家一起使用 Element 优化了我们之前的 TODO 项目，并在项目把我们在之前章节中学习的知识点加以运用。其实，诸如 Element 之类的 Vue 组件库还有很多，比如: 嘀嘀团队的 Cube-UI、有赞团队的 Vant 等等，使用这些组件库可以让我们快速高效的完成项目。
- 还没有人评论，欢迎说说您的想法！
客服
