feat: 调整失焦的问题的
This commit is contained in:
parent
57d2686738
commit
6d18c510b8
@ -5,11 +5,18 @@
|
||||
<img :src="imageUrl()" alt="" />
|
||||
<div class="text__container">
|
||||
<div class="text__title" v-if="showTextTitle">
|
||||
<span class="text">{{ nodeName }}</span>
|
||||
<el-icon class="editIcon" @click="showTextTitle = false"><EditPen/></el-icon>
|
||||
<span class="text">{{ localName }}</span>
|
||||
<el-icon class="editIcon" @click="startEditing"><EditPen/></el-icon>
|
||||
</div>
|
||||
<div class="input_name_container" v-else >
|
||||
<el-input v-model="nodeName" @keydown="handleInputKeydown" />
|
||||
<el-input
|
||||
v-model="localName"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
/>
|
||||
<el-button
|
||||
class="input_name_select"
|
||||
circle
|
||||
@ -94,15 +101,31 @@ const props = defineProps({
|
||||
const emits = defineEmits(['setNodeName'])
|
||||
|
||||
const showTextTitle = ref(true)
|
||||
const nodeName = ref(props.nodeProperties.name || props.nodeName)
|
||||
const localName = ref('')
|
||||
const isEditing = ref(false)
|
||||
|
||||
// 开始编辑
|
||||
const startEditing = () => {
|
||||
isEditing.value = true
|
||||
showTextTitle.value = false
|
||||
|
||||
// 使用 nextTick 确保 DOM 更新后再聚焦
|
||||
nextTick(() => {
|
||||
if (inputRef.value && inputRef.value.input) {
|
||||
inputRef.value.input.focus()
|
||||
// 选择所有文本
|
||||
inputRef.value.input.select()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const confirmNodeName = () => {
|
||||
emits('setNodeName', nodeName.value)
|
||||
emits('setNodeName', localName.value)
|
||||
showTextTitle.value = true
|
||||
}
|
||||
|
||||
const cancelNodeName = () => {
|
||||
nodeName.value = props.nodeProperties?.name || props.nodeName
|
||||
localName.value = props.nodeProperties?.name || props.nodeName
|
||||
showTextTitle.value = true
|
||||
}
|
||||
|
||||
@ -138,6 +161,32 @@ const execute = () => {
|
||||
document.dispatchEvent(myEvent);
|
||||
}
|
||||
|
||||
const handleInputFocus = (e) => {
|
||||
console.log('Input focused')
|
||||
// 阻止事件冒泡到 LogicFlow
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
// 设置编辑状态
|
||||
isEditing.value = true
|
||||
|
||||
// 延迟执行，确保事件处理完成
|
||||
setTimeout(() => {
|
||||
if (inputRef.value && inputRef.value.input) {
|
||||
inputRef.value.input.focus()
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleInputBlur = (e) => {
|
||||
console.log('Input blurred')
|
||||
// 如果正在编辑，不要立即取消编辑状态
|
||||
if (isEditing.value) {
|
||||
// 可以选择在失焦时自动保存或取消
|
||||
// 这里我们选择不自动保存，让用户点击确认按钮
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
@ -151,7 +200,12 @@ const imageUrl = () => {
|
||||
return new URL(props.icon, import.meta.url).href;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
localName.value = props.nodeProperties?.name || props.nodeName
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log(34566)
|
||||
emitter.off("deleteNode");
|
||||
})
|
||||
</script>
|
||||
@ -164,6 +218,7 @@ onUnmounted(() => {
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center; // 添加垂直居中
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
@ -193,6 +248,18 @@ onUnmounted(() => {
|
||||
.el-input {
|
||||
margin-left: 12px;
|
||||
width: 120px;
|
||||
// 确保输入框有更高的 z-index
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
|
||||
// 覆盖 Element Plus 的默认样式，确保焦点状态明显
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #409eff !important;
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: 0 0 0 2px #409eff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input_name_select {
|
||||
@ -226,4 +293,11 @@ onUnmounted(() => {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加全局样式，确保输入框焦点不被其他元素干扰
|
||||
:global(.lf-node) {
|
||||
.el-input__inner {
|
||||
user-select: text !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -72,6 +72,10 @@
|
||||
v-model="params.withOr"
|
||||
placeholder="Select"
|
||||
style="width: 240px"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
>
|
||||
<el-option key="and" label="AND" value="and" />
|
||||
<el-option key="or" label="OR" value="or" />
|
||||
@ -88,6 +92,11 @@
|
||||
<!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
|
||||
<el-select
|
||||
v-model="property.nameType"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
@change="handleTypeChange(index, pIndex)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
@ -108,6 +117,11 @@
|
||||
v-model="property.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -126,6 +140,11 @@
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="visibleChange"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
@ -136,7 +155,14 @@
|
||||
{ required: true, message: '请输入变量名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-select v-model="property.condition">
|
||||
<el-select
|
||||
v-model="property.condition"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
>
|
||||
<el-option label="等于" value="equal" />
|
||||
<el-option label="不等于" value="notEqualTo" />
|
||||
<el-option label="为空" value="null" />
|
||||
@ -156,6 +182,11 @@
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index, pIndex)"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
@ -175,6 +206,11 @@
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -193,6 +229,11 @@
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="visibleChange"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
@keydown="handleInputKeydown"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
@ -415,6 +456,41 @@ const closePopover = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputFocus = (e) => {
|
||||
console.log('Input focused')
|
||||
// 阻止事件冒泡到 LogicFlow
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
// 设置编辑状态
|
||||
isEditing.value = true
|
||||
|
||||
// 延迟执行，确保事件处理完成
|
||||
setTimeout(() => {
|
||||
if (inputRef.value && inputRef.value.input) {
|
||||
inputRef.value.input.focus()
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleInputBlur = (e) => {
|
||||
console.log('Input blurred')
|
||||
// 如果正在编辑，不要立即取消编辑状态
|
||||
if (isEditing.value) {
|
||||
// 可以选择在失焦时自动保存或取消
|
||||
// 这里我们选择不自动保存，让用户点击确认按钮
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits("addAnchor", 280, "".concat(props.model.id, "_else"));
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user