project:todo

todos/src/components/TodoFooter.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tdFooter">
+    <span>总计：{{ count }}</span>
+
+    <div class="tdTabs">
+      <a :class="{ active: tabType == 0 }" @click="tabClick(0)">全部</a>
+      <a :class="{ active: tabType == 1 }" @click="tabClick(1)">未完成</a>
+      <a :class="{ active: tabType == 2 }" @click="tabClick(2)">已完成</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["count", "tabType"],
+
+  methods: {
+    tabClick(newType) {
+      this.$emit("changeTabType", newType)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdFooter {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tdFooter span {
+  font-size: 16px;
+  color: #555;
+}
+
+.tdTabs a {
+  margin-right: 15px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #666;
+  transition: 0.3s;
+}
+
+.tdTabs a:hover {
+  color: #409eff;
+}
+
+.active {
+  color: #409eff !important;
+  font-weight: bold;
+}
+</style>