<highlight-textarea
placeholder="请输入主诉"
type="textarea"
v-model="formModel.mainSuit"
:highlightKey="schema.componentProps.highlightKey"
>
</highlight-textarea>参考链接原生input，textarea
demo地址
默认为团队组织高亮
效果演示
vue3相关组件修改
<template>
<div class="highlight-box">
<template v-if="type === 'textarea'">
<div v-if="value"
class="textarea-outer"
ref="textareaOuter"
>
<div ref="outerInner" class="outer-inner"
v-html="highlightHtml(value)">
</div>
</div>
<a-textarea
ref="textareaBox"
:autoSize="true"
:placeholder="placeholder"
v-model:value="value">
</a-textarea>
</template>
<template v-if="type === 'input'">
<div v-if="value"
class="input-outer"
v-html="highlightHtml(value)">
</div>
<a-input type="text" class="ant-input"
:placeholder="placeholder"
v-model:value.trim="value"/>
</template>
</div>
</template>
<script >
export default {
name: 'HighlightTextarea',
data() {
return {
value: ''
};
},
props: {
placeholder: {
type: String,
required: false,
default: '请输入'
},
text: {
type: String,
required: false,
default: ''
},
highlightKey: {
type: Array,
require: false,
default: () => [
'团队'
]
},
type: {
type: String,
required: true,
default: 'textarea'
},
maxHeight: {
type: Number,
required: false,
default: 220
},
modelValue: {
type: String,
default: ''
}
},
watch: {
value (v) {
console.log(v, 'value 3333')
// this.value = this.text.replace(/(^\s*)|(\s*$)/g, '').replace(/<br \/>|<br\/>|<br>/g, '\n');
this.$emit("update:modelValue", v);
},
modelValue: {
deep: true,
immediate: true,
handler(v) {
console.log(v, 'modelValue 3333')
this.value = v ? this.modelValue : ''
},
},
disabled: {
deep: true,
immediate: true,
handler(v) {
// this.editorConfig.readOnly = v
// this.$nextTick(() => {
// if (this.editor) v ? this.editor.disable() : this.editor.enable();
// })
},
}
},
created() {
// this.value = this.text.replace(/(^\s*)|(\s*$)/g, '').replace(/<br \/>|<br\/>|<br>/g, '\n');
},
mounted() {
// this.scrollMousewheel();
},
methods: {
highlightHtml(str) {
if ((!str || !this.highlightKey || this.highlightKey.length === 0) && this.type !== 'textarea') {
return str;
}
let rebuild = str;
if (this.highlightKey.filter(item => ~str.indexOf(item)).length) {
let regStr = '';
let regExp = null;
this.highlightKey.forEach(list => {
regStr = this.escapeString(list);
regExp = new RegExp(regStr, 'g');
rebuild = rebuild.replace(regExp, `<span>${list}</span>`);
});
}
if (this.type === 'textarea') {
rebuild = rebuild.replace(/\n/g, '<br/>').replace(/\s/g, ' ');
// textarea有滚动条时，div底部不能和textarea重合，故加一个<br/>
// const wrap = this.$refs.textareaBox;
// if (wrap && wrap.scrollHeight > this.maxHeight) {
// rebuild = rebuild + '<br/>';
// }
}
return rebuild;
},
syncScrollTop() {
const wrap = this.$refs.textareaBox;
const outerWrap = this.$refs.textareaOuter;
const outerInner = this.$refs.outerInner;
if (wrap.scrollHeight > this.maxHeight && outerInner.scrollHeight !== wrap.scrollHeight) {
outerInner.style.height = `${wrap.scrollHeight}px`;
}
if (wrap.scrollTop !== outerWrap.scrollTop) {
outerWrap.scrollTop = wrap.scrollTop;
}
},
// scrollMousewheel() {
// if (this.type === 'input') {
// return;
// }
// this.$nextTick(() => {
// this.eventHandler('add');
// });
// },
// 处理字符串中可能对正则有影响的字符
escapeString(value) {
const characterss = ['(', ')', '[', ']', '{', '}', '^', '$', '|', '?', '*', '+', '.'];
let str = value.replace(new RegExp('\\\\', 'g'), '\\\\');
characterss.forEach(function (characters) {
let r = new RegExp('\\' + characters, 'g');
str = str.replace(r, '\\' + characters);
});
return str;
},
eventHandler(type) {
const wrap = this.$refs.textareaBox;
if (wrap) {
let mousewheelevt = (/Firefox/i.test(navigator.userAgent))
? 'DOMMouseScroll' : 'mousewheel';
wrap[`${type}EventListener`](mousewheelevt, this.syncScrollTop);
wrap[`${type}EventListener`]('scroll', this.syncScrollTop);
}
}
},
destroyed() {
// this.eventHandler('remove');
}
};
</script>
<style lang="less">
@width: 100%; // 500px
.highlight-box {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: relative;
display: flex;
//font-size: 12px;
width: @width;
//position: relative;
//color: #333333;
background: #ffffff;
border-radius: 2px;
overflow: hidden;
.textarea-outer,
.input-outer {
box-sizing: border-box;
width: @width;
position: absolute;
top: 0;
left: 0;
right: 0;
border: 1px solid transparent;
border-top: 0;
// 鼠标事件失效 ie6-10不支持
pointer-events: none;
cursor: text;
span {
color: red; // #F27C49
}
&:hover {
border-color: #4C84FF;
}
}
.textarea-outer {
overflow-y: auto;
//line-height: 20px;
word-break: break-all;
.outer-inner {
padding: 5px 8px;
width: 100%;
box-sizing: border-box;
}
}
textarea {
width: @width;
//line-height: 20px;
resize: none;
}
.input-outer,
input {
width: @width;
height: 32px;
line-height: 32px;
}
.input-outer {
bottom: 0;
padding: 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
textarea,
input {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
//font-size: 12px;
// position: relative;
// z-index: 2;
// 光标的颜色
//color: #333333;
// 文本颜色
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-text-fill-color: transparent;
background: transparent;
border-radius: 2px;
border: 1px solid #d9d9d9;
padding: 4px 8px;
box-sizing: border-box;
//&::placeholder {
// -webkit-text-fill-color: #d5d5d5;
//}
//&:hover {
// border-color: #36cfc9;
//}
//&:focus {
// border-color:#36cfc9;
// box-shadow: 0 0 0 2px #DBE4FF;
// outline: none;
//}
}
}
</style>使用组件
<highlight-textarea
placeholder="请输入主诉"
type="textarea"
v-model="formModel.mainSuit"
:highlightKey="schema.componentProps.highlightKey"
>
// highlightKey 高亮关键字数组 如： ['团队']
// formModel.mainSuit 绑定字段
</highlight-textarea>参考说明
