Vue 高亮文本

最新推荐文章于 2024-05-15 11:55:14 发布
最新推荐文章于 2024-05-15 11:55:14 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： 前端从看懂到看开 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34120430/article/details/107424627
版权

Vue 高亮文本

我为了方便和简单处理, 想着使用 Vue自带的自定义指令进行文本高亮

Vue custom-directive

发布到了npm
vue-light-word

效果如图
在这里插入图片描述

加入全局指令

import Vue from 'vue'
import VueHighLight from 'vue-light-word'

Vue.config.productionTip = false
// 在new之前注册v-light
// VueHighLight(Vue, {defaultClass: 'default-light'})
VueHighLight(Vue)
new
最低0.47元/天 解锁文章
居十四
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中富文本框设置代码高亮
weixin_58207509的博客
11-01 853
1、安装 npm install vue-quill-editor --save -dev // 富文本 npm install highlight.js --save -dev // 代码高亮 2、在 main.js 中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // f
vuemarkdown高亮插件
08-10
Vue Markdown高亮插件是为Vue.js应用设计的一款用于增强Markdown文本渲染效果的组件，它主要解决了在Vue环境中，Markdown代码块的语法高亮显示问题。这款插件通常结合Vue.js框架，使得开发者能够轻松地在Vue组件中...
vue点击高亮
aocang1339的博客
08-09 198
首先在data定义一个数组，数组里面的结构是对象，在对象里面写一个键值对，对应上你需要的文字，然后定义一个 active:'' 。在html结构中用 v-for 循环遍历出来，然后加个class 例如 :class="{live_btn:true,active:active === item.name} ，再定义一个方法， 例如 @click="conversion(...
vue实现点击高亮效果
最新发布
m0_57005111的博客
05-15 553
【代码】vue实现点击高亮效果。
vue高亮
weixin_30666943的博客
07-06 55
:class="{'activeTab': true}"，提前写好的css样式.activeTab就会起作用 .item(@click="addActive" :class="{'activeTab': addTableShow === true}") 高亮 转载于:https://www.cnblogs.com/maldive/p/9274937.html...
Vue-Search-Highlight：一款强大的Vue.js文本高亮插件
gitblog_00098的博客
04-06 632
Vue-Search-Highlight：一款强大的Vue.js文本高亮插件 项目地址:https://gitcode.com/wintc23/vue-search-highlight 项目简介 Vue-Search-Highlight 是一个轻量级且易于使用的Vue.js组件，它允许开发者在网页中快速实现搜索关键字的高亮显示，提升用户体验，特别是在处理大量文本数据时显得尤为实用。此项目由开发者W...
vue搜索高亮显示
素描本里的男子的博客
11-09 691
效果展示： js部分： import Vue from 'vue' function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g') const txt = binding.arg let str = '' if (txt) { str = txt.replace(reg, `<span style="color:red">${mat
vue实现多组关键词对应高亮显示功能
12-09
在这个示例中，我们将讨论如何在Vue应用中实现多组关键词的高亮显示功能。这个功能通常用于搜索结果展示或者文本分析，使得用户能够快速识别出关键信息。 首先，我们需要一些预设的数据。在这个例子中，我们有一组...
vue 富文本组件 资源 Editor.rar
01-11
"vue 富文本组件 资源 Editor.rar" 提供的可能是一个Vue.js插件或组件，专门用于实现富文本编辑功能。 富文本编辑器组件通常具有以下特性： 1. **富文本格式化**：支持插入文本、图片、链接、列表、表格等，并可以...
vue实现点击当前标签高亮效果【推荐】
08-27
在本例中，我们设置了背景颜色、边框颜色和文本颜色。 在模板中，我们使用 v-for 指令来动态渲染按钮的数据。同时，我们还使用 :class 指令来动态添加 active 类名，当 active 等于当前按钮的名称时添加该类名。...
一款纯VUE3 开发的富文本编辑器 editor
10-18
Vue3 Ts Editor是一款基于Vue3框架完全独立开发的富文本编辑器，专为现代Web应用设计，无需依赖任何第三方库或图片JS组件。这个编辑器的亮点在于其轻量化和易用性，使得开发者能够快速集成到自己的项目中，极大地...
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
Vue关键字高亮显示
H某人的博客
06-16 617
Vue关键字高亮显示
vue实现搜索文字高亮
m0_68716504的博客
01-24 870
在日常项目中我们往往会有搜索高亮的需求，下面方法可帮助我们实现，可能不是最优但是可以解决。
VUE给元素添加高亮
jiaotongdaren的博客
06-18 364
* 高亮样式 代码： 就是这样啦
vue3 使用 highlight
qq_52179917的博客
11-11 672
【代码】vue3 使用 highlight。
VUE 实现内容搜索并高亮显示
qiandeqiande的专栏
04-15 8407
先展示效果图： 用到的相关正则： // 清除所有span标签 var reg1 = new RegExp('</?span.*?>', 'gi') //g 全局搜索 i表示不区分大小写 this.contextHtml = this.contextHtml.replace(reg1, '') //搜索关键词，并返回所在位置（索引） var rStr = new RegExp(value, 'gi') //i表示不区分大小写，g表示全局搜索 var arr...
vue下canvas绘制矩形
weixin_30294709的博客
09-17 1534
起因：根据项目需求本人写了一个绘制矩形的组件。功能：在图片中绘制矩形，根据图片大小进行自适应展示，获取图片矩形坐标。思路：首先定义一个固定大小的DIV，DIV标签中有监测鼠标变化的四个事件mousedown，mousemove，mouseup，mouseleave。 第二在DIV标签内有img，canvas两个标签，一个负责图片展示,一个负责绘制矩形。 其中img与DIV标签的大小相当，...
Vue中如何进行代码高亮与语法着色？
Java徐师兄的博客
06-14 1396
如果默认的prism.js主题不能满足你的需求，你可以使用prism.js提供的自定义工具生成自定义主题。这个命令会生成一个themes.css文件，包含了多种主题。这里我们将自定义主题文件命名为themes.css，并将其放在了Vue项目的根目录下。你可以根据自己的需求来修改文件名和文件路径。如果prism.js默认的语言列表不能满足你的需求，你可以使用prism.js提供的自定义工具生成自定义语言。这个命令会列出所有支持的语言。你可以在Vue的入口文件中引入所需的语言模块。
vue 按标签高亮文本
09-05
要实现在Vue中按标签高亮文本，可以使用Vue的计算属性和v-html指令。 首先，需要在Vue组件的数据中定义一个包含文本的字符串，例如： ```javascript data() { return { text: '<p>Lorem ipsum dolor <span class="highlight">sit amet</span>, consectetur adipiscing elit.</p>', }; }, ``` 然后，可以创建一个计算属性来处理文本，将指定的标签高亮，例如： ```javascript computed: { highlightedText() { const highlighted = this.text.replace(/<span class="highlight">|<\/span>/g, ''); // 移除之前的高亮标签 return highlighted.replace(/<([^>]+)>/g, (match, tag) => { return `<span class="highlight">${tag}</span>`; // 将指定标签用高亮的span标签包裹 }); }, }, ``` 最后，在模板中使用v-html指令将计算属性的值渲染到页面上，例如： ```html <template> <div> <p v-html="highlightedText"></p> </div> </template> ``` 这样就可以实现按标签高亮文本的效果，其中匹配的标签会被包裹在带有class="highlight"的span标签中，从而实现高亮显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值