Better Input
cast1e
parent
d17c4647b6
commit
7d404aeb66
|
|
@ -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;">
|
||||
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash' @click="del_word(scope.$index)"></box-icon>
|
||||
<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='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_name: "",
|
||||
word_type: "adj.",
|
||||
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." },],
|
||||
new_word: {
|
||||
word: "",
|
||||
trans: "",
|
||||
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({
|
||||
word: this.new_word,
|
||||
type: this.word_type,
|
||||
trans: this.new_trans
|
||||
})
|
||||
if (this.has_word(this.new_word.word)) {
|
||||
ElMessage({
|
||||
message: `单词 ${this.new_word.word} 已存在`,
|
||||
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-header-bg-color:#FFFFFF00;
|
||||
--el-collapse-content-bg-color:#FFFFFF00;
|
||||
--el-collapse-header-font-size:18px;
|
||||
.el-collapse {
|
||||
--el-collapse-header-bg-color: #FFFFFF00;
|
||||
--el-collapse-content-bg-color: #FFFFFF00;
|
||||
--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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
right: -20%;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
animation: enter .8s ease-out;
|
||||
box-shadow:#e0c3fcca 0px 0px 50px 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue