project:todo

todos/src/components/TodoHeader.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h1>待办事项</h1>
+
+    <div class="input-wrapper">
+      <input placeholder="请输入您的待办事项，按下回车后即可添加" v-model.trim="newTodo" @keyup.enter="addNewTodo" />
+    </div>
+
+    <p v-show="isShowMsg" style="color: red">
+      最多输入{{ countLimit }}个字符！！！
+    </p>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  color: #409eff;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+input {
+  width: 90%;
+  max-width: 500px;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  outline: none;
+  transition: 0.3s;
+}
+
+.input-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+input:focus {
+  border-color: #409eff;
+  box-shadow: 0 0 4px rgba(64, 158, 255, 0.5);
+}
+
+p {
+  margin-top: 8px;
+  color: red;
+  font-size: 14px;
+  text-align: center;
+}
+</style>
+
+<script>
+const WORD_COUNT_LIMIT = 50
+
+export default {
+  data() {
+    return {
+      newTodo: "",
+      countLimit: WORD_COUNT_LIMIT
+    }
+  },
+
+  computed: {
+    isShowMsg() {
+      return this.newTodo.length > WORD_COUNT_LIMIT
+    }
+  },
+
+  methods: {
+    addNewTodo() {
+      if (
+        this.newTodo.length === 0 ||
+        this.newTodo.length > WORD_COUNT_LIMIT
+      ) {
+        return
+      }
+
+      this.$emit("addTodo", this.newTodo)
+      this.newTodo = ""
+    }
+  }
+}
+</script>