feat(FileTree): 为重命名/新建弹窗添加自动聚焦和回车确认功能
- 使用 ref 引用输入框并在弹窗显示时自动聚焦 - 为输入框添加 pressEnter 事件监听以支持回车确认 - 统一背景菜单中字符串的引号格式
This commit is contained in:
parent
07d2134f8c
commit
49b89d7ea1
|
|
@ -76,7 +76,7 @@
|
||||||
|
|
||||||
<!-- 重命名/新建弹窗 -->
|
<!-- 重命名/新建弹窗 -->
|
||||||
<a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
|
<a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
|
||||||
<a-input v-model:value="modalInputValue" :placeholder="modalPlaceholder" />
|
<a-input ref="modalInputRef" v-model:value="modalInputValue" :placeholder="modalPlaceholder" @pressEnter="handleModalOk" />
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -102,6 +102,15 @@ const currentNode = ref(null);
|
||||||
const searchKeyword = ref("");
|
const searchKeyword = ref("");
|
||||||
const selectedKeys = ref([]);
|
const selectedKeys = ref([]);
|
||||||
const treeContentRef = ref(null);
|
const treeContentRef = ref(null);
|
||||||
|
const modalInputRef = ref(null);
|
||||||
|
|
||||||
|
watch(modalVisible, (val) => {
|
||||||
|
if (val) {
|
||||||
|
nextTick(() => {
|
||||||
|
modalInputRef.value?.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 监听 activeTab 变化,实现联动
|
// 监听 activeTab 变化,实现联动
|
||||||
watch(
|
watch(
|
||||||
|
|
@ -374,7 +383,7 @@ const handleMenuClick = async ({ key }, node) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleBackgroundMenuClick = ({ key }) => {
|
const handleBackgroundMenuClick = ({ key }) => {
|
||||||
if (key === 'refresh') {
|
if (key === "refresh") {
|
||||||
handleRefresh();
|
handleRefresh();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -383,11 +392,11 @@ const handleBackgroundMenuClick = ({ key }) => {
|
||||||
const separator = window.utools.isWindows() ? "\\" : "/";
|
const separator = window.utools.isWindows() ? "\\" : "/";
|
||||||
// 注意:如果是根驱动器(如 C:\),pop() 可能为空字符串,但 state.rootPath 是完整的
|
// 注意:如果是根驱动器(如 C:\),pop() 可能为空字符串,但 state.rootPath 是完整的
|
||||||
const rootName = state.rootPath.split(separator).pop() || state.rootPath;
|
const rootName = state.rootPath.split(separator).pop() || state.rootPath;
|
||||||
|
|
||||||
const rootNode = {
|
const rootNode = {
|
||||||
name: rootName,
|
name: rootName,
|
||||||
path: state.rootPath,
|
path: state.rootPath,
|
||||||
type: "directory"
|
type: "directory",
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMenuClick({ key }, rootNode);
|
handleMenuClick({ key }, rootNode);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue