antd vue 输入框高亮设置关键字
<highlight-textareaplaceholder="请输入主诉"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-textarearef="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-textareaplaceholder="请输入主诉"type="textarea"v-model="formModel.mainSuit":highlightKey="schema.componentProps.highlightKey" >
// highlightKey 高亮关键字数组 如： ['团队']
// formModel.mainSuit 绑定字段</highlight-textarea>参考说明
