v-highlight 指令

介绍

v-highlight 指令用于为元素添加背景高亮效果。

基础用法

传入一个有效的高亮颜色值，即可为元素添加背景高亮效果。

<template>
  <div v-highlight="'#ff0000'">红色背景高亮</div>
</template>

扩展用法

1. 字符串颜色值，支持以下颜色值类型：

• RGB: 如rgb(255, 0, 0)
• RGBA: 如rgba(255, 0, 0, 0.5)
• HEX: 如#ff0000
• 颜色关键字：如red、blue、yellow等

RGB

<div v-highlight="'rgb(0, 255, 0)'">绿色背景高亮</div>

RGBA

<div v-highlight="'rgba(0, 0, 255, 0.5)'">半透明蓝色背景高亮</div>

HEX

<div v-highlight="'#ff0000'">红色背景高亮</div>

Color Keyword

<div v-highlight="'yellow'">黄色背景高亮</div>

2. 对象配置方式

你朋友不及格，你感觉很糟；你朋友考第一，你感觉更糟。———《三傻大闹宝莱坞》

我表现得我不喜欢任何事物，是因为我从来没得到过我想要的。———《破产姐妹》

如果你不出去走走，就会以为眼前的就是全世界。———《天堂电影院》

查看代码

<script setup lang="ts">
import { vHighlight } from '@cp-vuedir/core'
</script>

<template>
  <div class="highlight-examples">
    <div v-highlight="'#ff0000'" class="highlight-item">
      你朋友不及格，你感觉很糟；你朋友考第一，你感觉更糟。———《三傻大闹宝莱坞》
    </div>
    <p v-highlight="{ bgColor: '#ffff00', textColor: '#000000' }" class="highlight-item">
      我表现得我不喜欢任何事物，是因为我从来没得到过我想要的。———《破产姐妹》
    </p>
    <p v-highlight="{ bgColor: 'rgba(0, 0, 255, 0.5)', auto: true }">
      如果你不出去走走，就会以为眼前的就是全世界。———《天堂电影院》
    </p>
  </div>
</template>

<style scoped>
.highlight-examples {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 5px;
}
</style>

链式调用

通过对象配置方式，可以组合使用多个参数，实现更灵活的高亮效果：

链式传参

我常常对自己说，别告诉别人你不开心，勤奋点做事，没什么事便早点回家睡觉去。 ———《阿飞正传》

查看代码

<template>
  <div class="demo-block">
    <div class="modifier-example">
      <h4>链式传参</h4>
      <div v-highlight.bgColor-red.textColor-blue.auto-true>
        我常常对自己说，别告诉别人你不开心，勤奋点做事，没什么事便早点回家睡觉去。 ———《阿飞正传》
      </div>
    </div>
  </div>
</template>

<script setup>
import { vHighlight } from '@cp-vuedir/core'
</script>

<style scoped>
.demo-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modifier-example {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.modifier-example h4 {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.modifier-example div {
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
}
</style>

API

字符串类型

属性名	说明	类型	是否必选	默认值
value	高亮配置，一个有效的颜色指：rgb、rgba、hex、color关键字	string	✓	-

配置对象类型

属性名	说明	类型	是否必选	默认值
bgColor	高亮的背景颜色	string	✓	-
textColor	高亮时的文字颜色	string	○	-
auto	是否自动计算文字颜色，若开启则textColor将被忽略	boolean	○	false

注意事项

注意

• 如果同时传入textColor和auto='true'时，则textColor将被忽略。