TextHighlight 文本凸显 ​

<template>
  <el-text-highlight :content="content" text="葡萄" />
</template>

<script setup>
import { ref } from 'vue'

const content = ref('吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮。')
</script>

<template>
  <el-text-highlight :content="content" text="板凳" color="#626aef" />
</template>

<script setup>
import { ref } from 'vue'

const content = ref(
  `板凳宽，扁担长，扁担绑在板凳上，板凳偏不让扁担绑在板凳上。`
)
</script>

<template>
  <el-text-highlight :content="content" text="Vue" ignore-case />
</template>

<script setup>
import { ref } from 'vue'

const content = ref(
  `Vue及其全家桶——vue router、vuex、Vue CLI等，如同一套精心设计的工具箱，让前端开发如虎添翼，无论是构建复杂单页应用还是优化开发流程，都显得游刃有余，尽显专业与高效。`
)
</script>