Skip to content

Commit a13521c

Browse files
ywywZhounormal-wls
ywywZhou
authored and
normal-wls
committed
fix: 文本框组件\n为渲染问题修复
 --bug=129170523 # Reviewed, transaction id: 16035
1 parent ba798a9 commit a13521c

File tree

2 files changed

+57
-60
lines changed

2 files changed

+57
-60
lines changed

‎frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,7 @@
566566
position: absolute;
567567
top: 30px;
568568
right: 0;
569+
width: max-content;
569570
max-width: 600px;
570571
background: #ffffff;
571572
border: 1px solid #dcdee5;
@@ -645,6 +646,7 @@
645646
}
646647
}
647648
&.input-before::before {
649+
position: absolute;
648650
content: attr(data-placeholder);
649651
color: #c4c6cc;
650652
}

‎frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,42 @@
1212
<template>
1313
<div class="tag-textarea">
1414
<div class="rf-form-wrapper">
15-
<template v-if="formMode">
16-
<div class="rf-form-wrap" :class="{ 'input-focus': input.focus, 'input-disable': isDisabled }">
17-
<div
18-
ref="input"
19-
class="div-input"
20-
:class="{
21-
'input-before': !input.value && !pasteIng
22-
}"
23-
:contenteditable="!isDisabled"
24-
:data-placeholder="placeholder"
25-
data-test-name="formTag_textarea_divInput"
26-
v-bk-clickoutside="handleClickOutSide"
27-
@mouseup="handleInputMouseUp"
28-
@focus="handleInputFocus"
29-
@keydown="handleInputKeyDown"
30-
@input="handleInputChange"
31-
@blur="handleBlur">
32-
</div>
15+
<div class="rf-form-wrap" :class="{ 'input-focus': input.focus, 'input-disable': isDisabled, 'view-mode': !formMode }">
16+
<div
17+
ref="input"
18+
class="div-input"
19+
:class="{
20+
'input-before': !input.value && !pasteIng
21+
}"
22+
:contenteditable="!isDisabled"
23+
:data-placeholder="placeholder"
24+
data-test-name="formTag_textarea_divInput"
25+
v-bk-clickoutside="handleClickOutSide"
26+
@mouseup="handleInputMouseUp"
27+
@focus="handleInputFocus"
28+
@keydown="handleInputKeyDown"
29+
@input="handleInputChange"
30+
@blur="handleBlur">
3331
</div>
34-
<transition>
35-
<div
36-
class="rf-select-list"
37-
:style="`${varListPosition}`"
38-
v-show="showVarList && isListOpen">
39-
<ul class="rf-select-content">
40-
<li
41-
class="rf-select-item"
42-
v-for="item in varList"
43-
:key="item.key"
44-
:class="{ 'is-hover': hoverKey === item.key }"
45-
@click.stop="onSelectVal(item.key)">
46-
<span class="key">{{ item.key }}</span>
47-
<span class="name" v-bk-overflow-tips>{{ item.name }}</span>
48-
</li>
49-
</ul>
50-
</div>
51-
</transition>
52-
</template>
53-
<span v-else class="rf-view-value">{{ viewValue }}</span>
32+
</div>
33+
<transition>
34+
<div
35+
class="rf-select-list"
36+
:style="`${varListPosition}`"
37+
v-show="showVarList && isListOpen">
38+
<ul class="rf-select-content">
39+
<li
40+
class="rf-select-item"
41+
v-for="item in varList"
42+
:key="item.key"
43+
:class="{ 'is-hover': hoverKey === item.key }"
44+
@click.stop="onSelectVal(item.key)">
45+
<span class="key">{{ item.key }}</span>
46+
<span class="name" v-bk-overflow-tips>{{ item.name }}</span>
47+
</li>
48+
</ul>
49+
</div>
50+
</transition>
5451
</div>
5552
<span v-show="!validateInfo.valid" class="common-error-tip error-info">{{validateInfo.message}}</span>
5653
</div>
@@ -170,8 +167,8 @@
170167
const divInputDom = this.$el.querySelector('.div-input')
171168
if (divInputDom) {
172169
const value = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
173-
divInputDom.innerText = value
174-
if (this.render && value) {
170+
divInputDom.innerText = this.formMode ? value : this.viewValue
171+
if (this.formMode && this.render && value) {
175172
this.updateInputHtml()
176173
}
177174
divInputDom.addEventListener('paste', this.handlePaste)
@@ -286,8 +283,10 @@
286283
const lastNode = textNode.childNodes[startOffset - 1]
287284
previousText = lastNode.textContent
288285
}
289-
// 如果不包含$则不进行后续计算、 如果是完整全局变量则不进行后续操作
290-
if (previousText.indexOf('$') === -1 || /\${[a-zA-Z_][\w|.]*}/.test(previousText)) {
286+
// 过滤掉完整变量结构，取最后面一段的纯文本
287+
previousText = previousText.split(/\${[a-zA-Z_][\w|.]*}/).pop()
288+
// 如果不包含$则不进行后续计算
289+
if (previousText.indexOf('$') === -1) {
291290
this.isListOpen = false
292291
return
293292
}
@@ -390,13 +389,7 @@
390389
const varRegexp = /\${([^${}]+)}/g
391390
const divInputDom = this.$el.querySelector('.div-input')
392391
const childNodes = Array.from(divInputDom.childNodes).filter(item => item.nodeName !== 'TEXT')
393-
const deleteMap = {} // 需要删除的br下标
394392
childNodes.forEach((dom, index) => {
395-
// 删除多余的br标签
396-
if (deleteMap[index]) {
397-
divInputDom.removeChild(dom)
398-
return
399-
}
400393
// 获取行内纯文本
401394
let domValue = dom.textContent
402395
if (dom.childNodes.length) {
@@ -437,25 +430,19 @@
437430
})
438431
// 初始化时\n会转化为【独占一行】的<br>标签，导致渲染异常。当我们手动把text标签转为div标签时需要删除【紧挨】着的<br>标签
439432
if (dom.nodeName === '#text') {
440-
// 记录需要被删除的br标签下标
441-
if (dom.nextSibling?.nodeName === 'BR') {
442-
deleteMap[index + 1] = true
443-
}
444433
const newDom = document.createElement('div')
445434
newDom.innerHTML = innerHtml
446435
divInputDom.replaceChild(newDom, dom)
447436
} else if (dom.nodeName === 'DIV' && innerHtml) {
448437
dom.innerHTML = innerHtml
449438
} else if (dom.nodeName === 'BR') {
450-
// br标签实际上是初始化时\n转化的，\n表示当前行换行了，那么br标签必定会有下一行!!!
451-
if (!dom.nextSibling) {
452-
const appendDom = document.createElement('div')
453-
appendDom.innerHTML = '<br>'
454-
divInputDom.appendChild(appendDom)
439+
if (dom.previousSibling && dom.nextSibling && dom.nextSibling?.nodeName !== 'BR') {
440+
divInputDom.removeChild(dom)
441+
} else {
442+
const newDom = document.createElement('div')
443+
newDom.innerHTML = '<br>'
444+
divInputDom.replaceChild(newDom, dom)
455445
}
456-
const newDom = document.createElement('div')
457-
newDom.innerHTML = '<br>'
458-
divInputDom.replaceChild(newDom, dom)
459446
}
460447
})
461448
},
@@ -563,6 +550,7 @@
563550
position: absolute;
564551
top: 40px;
565552
right: 0;
553+
width: max-content;
566554
max-width: 600px;
567555
background: #ffffff;
568556
border: 1px solid #dcdee5;
@@ -618,6 +606,12 @@
618606
cursor: not-allowed;
619607
}
620608
}
609+
&.view-mode {
610+
padding: 0;
611+
border: none;
612+
background: inherit;
613+
cursor: default;
614+
}
621615
}
622616
.div-input {
623617
min-height: 36px;
@@ -644,6 +638,7 @@
644638
word-break: break-all;
645639
}
646640
&.input-before::before {
641+
position: absolute;
647642
content: attr(data-placeholder);
648643
color: #c4c6cc;
649644
}

0 commit comments

Comments
 (0)