第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

首頁 慕課教程 Vue 入門教程 Vue 入門教程 Element 美化 TODO 項(xiàng)目
此間少年_ · 更新于 2020-12-07

Element 美化 TODO 項(xiàng)目

1. 前言

本小節(jié)我們將帶大家利用 Element 一起優(yōu)化我們的 TODO 項(xiàng)目。

2. Element 簡(jiǎn)介

Element 是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。由 “餓了么” 公司前端團(tuán)隊(duì)開源。

3. 編寫路由

首先，我們需要定義兩個(gè)路由，分別是待辦事項(xiàng)列表頁面和添加待辦事項(xiàng)頁面。我們可以打開 ‘router/index.js’ 文件進(jìn)行如下配置：

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 保存數(shù)據(jù)

5.1 創(chuàng)建 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 創(chuàng)建 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="事項(xiàng)名稱" width="150">
      </el-table-column>
      <el-table-column prop="date" label="事項(xiàng)截止時(shí)間" width="120">
      </el-table-column>
      <el-table-column prop="type" label="事項(xiàng)類型" 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="事項(xiàng)詳情"></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 }} 個(gè)任務(wù)。 已完成：{{
        count(1)
      }}
      個(gè)任務(wù)。未完成：{{ count(0) }} 個(gè)任務(wù)。
    </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. 編寫添加事項(xiàng)頁面

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="180px">
    <el-form-item prop="name" label="事項(xiàng)名稱：">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item prop="date" label="事項(xiàng)截止時(shí)間：">
      <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="事項(xiàng)類型：">
      <el-select
        v-model="form.type"
        placeholder="請(qǐng)選擇活動(dòng)區(qū)域"
        style="width: 100%;"
      >
        <el-option label="學(xué)習(xí)" value="學(xué)習(xí)"></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="事項(xiàng)詳情：">
      <el-input type="textarea" v-model="form.content"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即創(chuàng)建</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: "請(qǐng)?zhí)顚懘k事項(xiàng)的名稱" }
        ],
        content: [
          {
            type: "string",
            required: true,
            message: "請(qǐng)?zhí)顚懘k事項(xiàng)的詳情",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            max: 50,
            message: "長(zhǎng)度限制在20-50個(gè)字符",
            trigger: "blur"
          }
        ],
        type: [
          { type: "string", required: true, message: "請(qǐng)?zhí)顚懘k事項(xiàng)的稱類型" }
        ]
      }
    };
  },
  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. 小結(jié)

本小節(jié)我們主要帶大家一起使用 Element 優(yōu)化了我們之前的 TODO 項(xiàng)目，并在項(xiàng)目中，把我們?cè)谥罢鹿?jié)中學(xué)習(xí)的知識(shí)點(diǎn)加以運(yùn)用。其實(shí)，諸如 Element 之類的 Vue 組件庫還有很多，比如： 嘀嘀團(tuán)隊(duì)的 Cube-UI、有贊團(tuán)隊(duì)的 Vant 等等，使用這些組件庫可以讓我們快速高效地完成項(xiàng)目。