当前位置：首页 > 前端教程

elementui高亮

2026-03-05 17:49:18前端教程

高亮显示文本的方法

在Element UI中实现高亮显示文本，可以通过结合CSS样式或自定义组件来实现。以下是几种常见的方法：

使用CSS样式高亮

通过添加自定义类名和CSS样式，可以实现文本高亮效果。例如，定义一个高亮类名并应用到需要高亮的元素上：

<template>
  <div class="highlight-text">需要高亮的文本</div>
</template>

<style>
.highlight-text {
  background-color: yellow;
  color: black;
  padding: 2px 4px;
  border-radius: 2px;
}
</style>

使用Element UI的Tag组件

Element UI的Tag组件可以用于高亮显示某些内容，尤其是状态或标签类的高亮：

<template>
  <el-tag type="success">高亮文本</el-tag>
</template>

自定义高亮组件

如果需要更灵活的高亮功能（如搜索关键词高亮），可以创建一个自定义组件：

<template>
  <div>
    <span v-html="highlightText(text, keyword)"></span>
  </div>
</template>

<script>
export default {
  methods: {
    highlightText(text, keyword) {
      if (!keyword) return text;
      const regex = new RegExp(keyword, 'gi');
      return text.replace(regex, match => `<span style="background-color: yellow;">${match}</span>`);
    }
  }
};
</script>

动态搜索高亮

对于搜索场景，可以通过动态绑定数据实现高亮：

<template>
  <div>
    <el-input v-model="keyword" placeholder="输入关键词"></el-input>
    <div v-html="highlightText(content, keyword)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      content: '这是一段需要高亮显示的文本内容。'
    };
  },
  methods: {
    highlightText(text, keyword) {
      if (!keyword) return text;
      const regex = new RegExp(keyword, 'gi');
      return text.replace(regex, match => `<span style="background-color: yellow;">${match}</span>`);
    }
  }
};
</script>