Vue实现动态输入关键字高亮

最新推荐文章于 2024-06-11 09:32:12 发布

h_hui_hui

最新推荐文章于 2024-06-11 09:32:12 发布

阅读量442

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/h_hui_hui/article/details/135595194

版权

文章介绍了如何在Vue和React项目中，使用VueRef和事件监听，实现实时文本输入框的高亮显示关键词并替换功能。同时，文本区域会同步滚动。

摘要由CSDN通过智能技术生成

<style scoped>
.main {
  width: 500px;
  margin-left: 100px;
  height: 500px;
  position: relative;
}
.common-style {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: monospace;
  word-break: break-all;
  letter-spacing: 1px; /* 设置字间距 */
  line-height: 1.5715;
}
/* div */
.highlight-shadow-input {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -100px;
  padding: 9px;
  border: 1px;
  box-sizing: border-box;
  overflow: auto;
  white-space: pre-wrap;
  text-align: left;
  vertical-align: bottom;
  z-index: 0;
}
.highlight-input {
  position: relative;
  padding: 5px 11px;
  display: block;
  margin-left: -100px;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
  word-break: break-all;
  resize: none;
}
.show-text {
  -webkit-text-fill-color: transparent;
}
</style>

<style>
.vin-matching-error {
  color: #ff4d4f;
  position: relative;
  z-index: 10000;
  word-break: break-all;
  font-size: 14px;
  line-height: 1.5715;
}
</style>

<template>
  <div style="padding: 50px">
    <a-row>
      <a-col :span="8">
        <div class="main">
          <div
            v-html="content"
            class="highlight-shadow-input common-style"
            spellcheck="false"
          ></div>
          <a-textarea
            v-model:value="vinStringq"
            cols="30"
            rows="10"
            class="highlight-input common-style"
            :class="{ 'show-text': vinStringq }"
            @input="processInput"
            @scroll="syncScroll"
            spellcheck="false"
            placeholder="请输入符合要求的数据。"
          ></a-textarea>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
const vinStringq = ref("");
const content = ref("");

let syncScroll = (event) => {
  let contentDivDom = document.querySelector(".highlight-shadow-input");
  const scrollTop = event.target.scrollTop;
  contentDivDom.scrollTop = scrollTop;
};

function processInput(e) {
  const keyWords = ["react", "vue","香蕉","苹果"];
  let value = e.target.value;
  keyWords.forEach((word) => {
    value = value
      .replaceAll(word, `<span style="color:#e52e2e">${word}</span>`)
      .replaceAll("\n", "<br>");
  });
  content.value = value;
}
</script>