perf: 优化文件重命名，支持按esc取消编辑
This commit is contained in:
kuaifan
parent
c5f1c95f7b
commit
223fb540b1
@ -1,8 +1,20 @@
|
||||
<template>
|
||||
<div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
|
||||
<div v-if="isEdit" v-clickoutside="onClickOut" class="quick-input">
|
||||
<TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
|
||||
<Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
|
||||
<TagInput
|
||||
v-if="isTag"
|
||||
ref="input"
|
||||
v-model="content"
|
||||
:disabled="isLoad"
|
||||
@on-keyup="onKeyup"
|
||||
@on-blur="onBlur"/>
|
||||
<Input
|
||||
v-else
|
||||
ref="input"
|
||||
v-model="content"
|
||||
:disabled="isLoad"
|
||||
@on-keyup="onKeyup"
|
||||
@on-blur="onBlur"/>
|
||||
<div v-if="isLoad" class="quick-loading"><Loading/></div>
|
||||
</div>
|
||||
<template v-else>
|
||||
@ -54,9 +66,6 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
isEdit(val) {
|
||||
this.$emit("on-edit-change", val);
|
||||
},
|
||||
autoEdit(val) {
|
||||
if (val === true) {
|
||||
setTimeout(this.onEdit, 0)
|
||||
@ -65,9 +74,14 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onEditChange(val) {
|
||||
this.isEdit = val;
|
||||
this.$emit("on-edit-change", val);
|
||||
},
|
||||
|
||||
onEdit() {
|
||||
this.content = this.value;
|
||||
this.isEdit = true;
|
||||
this.onEditChange(true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus({
|
||||
cursor: 'all'
|
||||
@ -75,9 +89,18 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
onKeyup(e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.onEnter();
|
||||
} else if (e.keyCode === 27) {
|
||||
this.isEdit = false;
|
||||
this.isLoad = false;
|
||||
}
|
||||
},
|
||||
|
||||
onEnter() {
|
||||
if (this.content == this.value) {
|
||||
this.isEdit = false;
|
||||
this.onEditChange(false);
|
||||
return;
|
||||
}
|
||||
if (this.isLoad) {
|
||||
@ -86,7 +109,7 @@ export default {
|
||||
this.isLoad = true;
|
||||
this.$emit("input", this.content);
|
||||
this.$emit("on-update", this.content, () => {
|
||||
this.isEdit = false;
|
||||
this.onEditChange(false);
|
||||
this.isLoad = false;
|
||||
})
|
||||
},
|
||||
@ -99,7 +122,7 @@ export default {
|
||||
},
|
||||
|
||||
onBlur() {
|
||||
if (this.clickOutSide) {
|
||||
if (this.clickOutSide || !this.isEdit) {
|
||||
return;
|
||||
}
|
||||
this.onEnter();
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
:placeholder="tis || placeholderText"
|
||||
@keydown.enter="downEnter($event)"
|
||||
@keydown.delete="delTag(false)"
|
||||
@keyup="addTag($event, content)"
|
||||
@keyup="onKeyup"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
:disabled="disabled"
|
||||
@ -158,19 +158,22 @@
|
||||
this.addTag(false, this.content)
|
||||
this.$emit("on-blur", e)
|
||||
},
|
||||
onKeyup(e) {
|
||||
this.addTag(e, this.content);
|
||||
//
|
||||
this.$emit("on-keyup", e)
|
||||
if (e.keyCode === 13) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("on-enter", e)
|
||||
})
|
||||
}
|
||||
},
|
||||
addTag(e, content) {
|
||||
|
||||
if (e === false || e.keyCode === 13) {
|
||||
if (content.trim() != '' && this.disSource.indexOf(content.trim()) === -1) {
|
||||
this.disSource.push(content.trim());
|
||||
}
|
||||
this.content = '';
|
||||
//
|
||||
if (e.keyCode === 13) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("on-enter", e)
|
||||
})
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.max > 0 && this.disSource.length >= this.max) {
|
||||
|
||||
@ -87,9 +87,9 @@
|
||||
<li
|
||||
v-for="item in fileList"
|
||||
:class="{
|
||||
shear: shearIds.includes(item.id),
|
||||
highlight: selectIds.includes(item.id),
|
||||
}"
|
||||
shear: shearIds.includes(item.id),
|
||||
highlight: selectIds.includes(item.id),
|
||||
}"
|
||||
@contextmenu.prevent.stop="handleRightClick($event, item)"
|
||||
@click="openFile(item)">
|
||||
<div class="file-check" :class="{'file-checked':selectIds.includes(item.id)}" @click.stop="dropFile(item, 'select')">
|
||||
@ -121,7 +121,7 @@
|
||||
size="small"
|
||||
:disabled="!!item._load"
|
||||
@on-blur="onBlur(item)"
|
||||
@on-enter="onEnter(item)"/>
|
||||
@on-keyup="onKeyup($event, item)"/>
|
||||
<div v-if="item._load" class="file-load"><Loading/></div>
|
||||
</div>
|
||||
<div v-else class="file-name" :title="item.name">{{formatName(item)}}</div>
|
||||
@ -959,7 +959,6 @@ export default {
|
||||
break;
|
||||
|
||||
case 'rename':
|
||||
this.$set(item, 'newname', item.name);
|
||||
this.setEdit(item.id, true)
|
||||
this.autoBlur(item.id)
|
||||
break;
|
||||
@ -1154,9 +1153,21 @@ export default {
|
||||
},
|
||||
|
||||
onBlur(item) {
|
||||
if (this.files.find(({id, _edit}) => id == item.id && !_edit)) {
|
||||
return;
|
||||
}
|
||||
this.onEnter(item);
|
||||
},
|
||||
|
||||
onKeyup(e, item) {
|
||||
if (e.keyCode === 13) {
|
||||
this.onEnter(item);
|
||||
} else if (e.keyCode === 27) {
|
||||
this.setLoad(item.id, false)
|
||||
this.setEdit(item.id, false)
|
||||
}
|
||||
},
|
||||
|
||||
onEnter(item) {
|
||||
let isCreate = !/^\d+$/.test(item.id);
|
||||
if (!item.newname) {
|
||||
@ -1204,6 +1215,9 @@ export default {
|
||||
let item = this.$store.state.files.find(({id}) => id == fileId)
|
||||
if (item) {
|
||||
this.$set(item, '_edit', is);
|
||||
if (is) {
|
||||
this.$set(item, 'newname', item.name);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user