首页美化

2020-04-17 18:10:54 +08:00
parent 6a03835d66
commit 093cde16c2
12 changed files with 1185 additions and 41 deletions
@@ -0,0 +1,81 @@
+<template>
+    <li :class="{ completed: todo.done, editing: editing }" class="todo">
+        <div class="view">
+            <input
+                    :checked="todo.done"
+                    class="toggle"
+                    type="checkbox"
+                    @change="toggleTodo( todo)"
+            >
+            <label @dblclick="editing = true" v-text="todo.text" />
+            <button class="destroy" @click="deleteTodo( todo )" />
+        </div>
+        <input
+                v-show="editing"
+                v-focus="editing"
+                :value="todo.text"
+                class="edit"
+                @keyup.enter="doneEdit"
+                @keyup.esc="cancelEdit"
+                @blur="doneEdit"
+        >
+    </li>
+</template>
+
+<script>
+    export default {
+        name: 'Todo',
+        directives: {
+            focus(el, { value }, { context }) {
+                if (value) {
+                    context.$nextTick(() => {
+                        el.focus()
+                    })
+                }
+            }
+        },
+        props: {
+            todo: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            }
+        },
+        data() {
+            return {
+                editing: false
+            }
+        },
+        methods: {
+            deleteTodo(todo) {
+                this.$emit('deleteTodo', todo)
+            },
+            editTodo({ todo, value }) {
+                this.$emit('editTodo', { todo, value })
+            },
+            toggleTodo(todo) {
+                this.$emit('toggleTodo', todo)
+            },
+            doneEdit(e) {
+                const value = e.target.value.trim()
+                const { todo } = this
+                if (!value) {
+                    this.deleteTodo({
+                        todo
+                    })
+                } else if (this.editing) {
+                    this.editTodo({
+                        todo,
+                        value
+                    })
+                    this.editing = false
+                }
+            },
+            cancelEdit(e) {
+                e.target.value = this.todo.text
+                this.editing = false
+            }
+        }
+    }
+</script>