Better Input

src/components/Editor.vue

@@ -32,7 +32,8 @@
                                     创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
                                 </div>
                                 <div class="option">
-                                    <box-icon class="btn" name='edit' color="var(--text-color)" @click="edit(wordset, class_name)"></box-icon>
+                                    <box-icon class="btn" name='edit' color="var(--text-color)"
+                                        @click="edit(wordset, class_name)"></box-icon>
                                     <box-icon class="btn" name='trash' color="var(--text-color)"
                                         @click="del(class_name, wordset.id, index)"></box-icon>
                                 </div>
@@ -69,14 +70,14 @@
             <div class="rowbox">
                 <div class="card" style="margin-bottom: 20px;">
                     <div class="title">添加单词</div>
-                    <el-input v-model="new_word"></el-input>
+                    <el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
                     <div class="colbox">
                         <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
-                        <el-input v-model="new_trans"></el-input>
+                        <el-input ref="input2" @change="focusnext($refs.input3)" v-model="new_word.trans"></el-input>
                     </div>
                     <div class="colbox">
                         <el-text class="mx-1" style="width: 80px;">词性：</el-text>
-                        <el-select v-model="word_type" class="m-2" placeholder="Select">
+                        <el-select ref="input3" v-model="new_word.type" class="m-2" placeholder="Select">
                             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                         </el-select>
                     </div>
@@ -97,10 +98,13 @@
                     <el-table-column prop="word" label="单词" />
                     <el-table-column prop="type" label="词性" />
                     <el-table-column prop="trans" label="翻译" />
-                    <el-table-column fixed="right" label="操作">
+                    <el-table-column width="100px" fixed="right" label="操作">
                         <template #default="scope">
-                            <div style="display: flex;flex-direction: row;">
+                            <div style="display: flex;flex-direction: row;justify-content: space-around;">
-                                <box-icon color="var(--text-color)" size="14px" class="btn" name='trash' @click="del_word(scope.$index)"></box-icon>
+                                <box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
+                                    @click="del_word(scope.$index)"></box-icon>
+                                <box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
+                                    @click="edit_word(scope.$index)"></box-icon>
                             </div>
                         </template>
                     </el-table-column>
@@ -108,6 +112,21 @@
             </div>
         </div>
     </div>
+    <el-dialog v-model="word_editing">
+        <div class="title">修改单词</div>
+        <el-input v-model="editing_word.word"></el-input>
+        <div class="colbox">
+            <el-text class="mx-1" style="width: 60px;">翻译:</el-text>
+            <el-input v-model="editing_word.trans"></el-input>
+        </div>
+        <div class="colbox">
+            <el-text class="mx-1" style="width: 80px;">词性：</el-text>
+            <el-select v-model="editing_word.type" class="m-2" placeholder="Select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <el-button @click="save_word" type="primary">更改</el-button>
+    </el-dialog>
 </template>
 
 <script>
@@ -124,16 +143,27 @@ export default {
             new_set_class: "",
             editing: {},
             editingClass: "",
-            new_word: "",
+            new_word: {
-            new_name: "",
+                word: "",
-            word_type: "adj.",
+                trans: "",
-            options: [{ label: "verb(v.)", value: "v." }, { label: "adverb(adv.)", value: "adv." }, { label: "noun(n.)", value: "n." }, { label: "adjective(adj.)", value: "adj." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
+                type: "adj.",
+            },
+            editing_word: {
+                word: "",
+                trans: "",
+                type: "adj.",
+                index: 0,
+            },
+            options: [{ label: "adjective(adj.)", value: "adj." }, { label: "verb(v.)", value: "v." }, { label: "noun(n.)", value: "n." }, { label: "adverb(adv.)", value: "adv." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
             table: [],
-            new_trans: "",
+            active_set_class: "",
-            active_set_class: ""
+            word_editing: false,
         }
     },
     methods: {
+        focusnext(node) {
+            node.focus();
+        },
         back_home() {
             this.$router.push("/");
         },
@@ -177,17 +207,57 @@ export default {
             this.mode = 2;
             this.editingClass = set_class_name;
         },
+        has_word(word) {
+            for (let i of this.table) {
+                if (i.word === word) return true;
+            }
+            return false;
+        },
         add_word() {
-            this.table.push({
+            if (this.has_word(this.new_word.word)) {
-                word: this.new_word,
+                ElMessage({
-                type: this.word_type,
+                    message: `单词 ${this.new_word.word} 已存在`,
-                trans: this.new_trans
+                    type: 'error',
-            })
+                });
+                return;
+            }
+            this.table.push(Object.assign({}, this.new_word));
             localStorage.setItem(this.editing.id, JSON.stringify(this.table));
             ElMessage({
-                message: `已添加 ${this.new_word} (${this.word_type})`,
+                message: `已添加 ${this.new_word.word} (${this.new_word.type})`,
                 type: 'success',
             });
+            this.new_word.word = "";
+            this.new_word.trans = "";
+            this.$refs.input1.focus();
+        },
+        edit_word(index) {
+            this.editing_word = Object.assign({}, this.table[index]);
+            this.editing_word.index = index;
+            this.word_editing = true;
+            return;
+        },
+        save_word() {
+            if (this.editing_word.word != this.table[this.editing_word.index].word) {
+                if (this.has_word(this.editing_word.word)) {
+                    ElMessage({
+                        message: `单词 ${this.new_word.word} 已存在`,
+                        type: 'error',
+                    });
+                    return;
+                }
+            }
+            this.table[this.editing_word.index] = {
+                word: this.editing_word.word,
+                type: this.editing_word.type,
+                trans: this.editing_word.trans,
+            }
+            localStorage.setItem(this.editing.id, JSON.stringify(this.table));
+            ElMessage({
+                message: `已保存更改`,
+                type: 'success',
+            });
+            this.word_editing = false;
         },
         change_name() {
             let old_name = this.editing.name;
@@ -320,23 +390,22 @@ export default {
 }
 
 
-.el-collapse{
+.el-collapse {
-    --el-collapse-header-bg-color:#FFFFFF00;
+    --el-collapse-header-bg-color: #FFFFFF00;
-    --el-collapse-content-bg-color:#FFFFFF00;
+    --el-collapse-content-bg-color: #FFFFFF00;
-    --el-collapse-header-font-size:18px;
+    --el-collapse-header-font-size: 18px;
 }
 
-.wordclass{
+.wordclass {
     flex-wrap: wrap
 }
 
-#wordsets-container{
+#wordsets-container {
     overflow-x: auto;
     height: 100%;
 }
 
-#main-container{
+#main-container {
     height: 87%;
 }
-
 </style>

src/components/Home.vue

@@ -83,6 +83,7 @@ export default {
 #title {
     font-size: 180px;
     color: var(--text-color);
+    text-shadow:  #00000057 5px 5px 20px ;
 }
 
 .button {
@@ -122,9 +123,10 @@ html.dark .button {
     height: 1350px;
     border-radius: 100%;
     position: absolute;
-    top: -100%;
+    top: -50%;
-    right: -20%;
+    right: -10%;
     animation: enter .8s ease-out;
+    box-shadow:#e0c3fcca 0px 0px 50px 10px;
     z-index: -1;
 }
 

test.js

@@ -0,0 +1,11 @@
+let a = new Set([
+    {a:1,b:2},
+    {a:2,b:2},
+    {a:1,b:3},
+    {a:1,b:2},
+    {a:1,b:2},
+    {a:1,b:2},
+    {a:1,b:2},
+]);
+
+console.log(a);