vue中可以选择文字高亮的插件
vue中可以选择文字高亮的插件欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢.
·
vue中可以选择文字高亮的插件
高亮,类似下面这种情况
一般可由后端返回带标签的字段,前端直接渲染即可
前端实现高亮,可以使用vue-text-highlight插件
实现比较简单
安装:
npm install --save vue-text-highlight
引入:
在main.js里:
import TextHighlight from ‘vue-text-highlight’;
Vue.component(‘text-highlight’, TextHighlight);
使用:
<text-highlight :queries="queries">{{ description }}</text-highlight>
data() {
return {
queries: ['birds', 'scatt'],//需要高亮的文字
description: 'Tropical birds scattered as Drake veered the Jeep'
};
}
运行结果:
当然,可以自己设置高亮的样式
.text__highlight {
color: red !important;
background: none !important;
}
贴一段我自己的代码
<ul class="list2">
<li v-for="(item, index) in myData" :key="index">
<text-highlight :queries="queries">{{item.companyName}}</text-highlight>
</li>
</ul>
更多推荐
已为社区贡献3条内容
所有评论(0)