vue.js文本居中_Vue.js的文本荧光笔库
vue.js文本居中
vue-text-highlight (vue-text-highlight)
Text highlighter library for Vue.js.
Vue.js的文本荧光笔库。
安装 (Installation)
npm install --save vue-text-highlight
# or
yarn add vue-text-highlight
用法 (Usage)
基本用法 (Basic Usage)
import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';Vue.component('text-highlight', TextHighlight);// new Vue ...
SomeComponent.vue (SomeComponent.vue)
<template><text-highlight :queries="queries">{{ description }}</text-highlight>
</template>
data() {return {queries: ['birds', 'scatt'],description: 'Tropical birds scattered as Drake veered the Jeep'};
}
输出量 (Output)
![](/assets/blank.gif)
更多的选择 (More Options)
All available props in TextHighlight
component are:
TextHighlight
组件中所有可用的道具是:
queries:
Array<String|RegExp>|String|RegExp
queries:
Array<String|RegExp>|String|RegExp
This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.
该道具接受字符串,正则表达式以及字符串或正则表达式数组。 如果给出了array,它将在全局范围内突出显示匹配的字符串/正则表达式的并集。
[caseSensitive]:
Boolean
[caseSensitive]:
Boolean
Whether string being searched is case sensitive.
是否搜索字符串区分大小写。
[diacriticsSensitive]:
Boolean
[diacriticsSensitive]:
Boolean
Whether string being searched is diacritics sensitive.
是否搜索字符串对变音符号敏感。
[highlightStyle]:
Object|Array|String
[highlightStyle]:
Object|Array|String
Styles to be applied to highlighted
<mark>
. Similar to style bindings in vue, it acceptsArray
syntax,Object
syntax, or plain styling asString
. This prop will then be merged with default highlight styles inTextHighlight
component. See style binding in Vue.js.要应用于突出显示的
<mark>
样式。 与vue中的样式绑定类似,它接受Array
语法,Object
语法或纯样式作为String
。 然后,该道具将与TextHighlight
组件中的默认突出显示样式合并。 请参阅Vue.js中的样式绑定。[highlightClass]:
Object|Array|String
[highlightClass]:
Object|Array|String
Classes to be added to highlighted
<mark>
. Similar to class bindings in vue, it acceptsArray
syntax,Object
syntax, or class asString
. See class binding in Vue.js.要添加到突出显示的
<mark>
。 与vue中的类绑定相似,它接受Array
语法,Object
语法或class作为String
。 请参阅Vue.js中的类绑定。[highlightComponent]:
Object|String
[highlightComponent]:
Object|String
By default vue-text-highlight uses
<mark>
for the highlighting. Pass this props to override with other tag (string
) or custom component (Vue component definition).默认情况下,vue-text-highlight使用
<mark>
突出显示。 将此道具传递给其他标签(string
)或自定义组件(Vue组件定义)进行覆盖。This component will be passed with two props from
text-highlight
:该组件将与
text-highlight
两个道具一起传递:index:
Number
index:
Number
Index of highlighted component.
高亮组件的索引。
text:
String
text:
String
Highlighted words, equals to
this.$slots.default[0].text
高亮显示的单词,等于
this.$slots.default[0].text
For more details, see example below.
有关更多详细信息,请参见下面的示例 。
Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than
index
andtext
passed fromtext-highlight
.上面未列出的其他道具和侦听器将转发到突出显示的组件。 与从
text-highlight
传递的index
和text
相比,这些道具的合并将具有更高的优先text-highlight
。
高级用法 (Advanced Usage)
There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.
在某些情况下,您可能希望使用突出显示的单词来做更多的事情。 因此,vue-text-highlight支持自定义组件来突出显示单词。 在这种情况下,以下示例在单击时发出警报。
OtherComponent.vue (OtherComponent.vue)
<template><text-highlight:queries="queries":highlightComponent="MyClickableComponent":baz="foo"@customlistener="alert">{{ description }}</text-highlight>
</template>
import MyClickableComponent from 'MyClickableComponent';
data() {return {queries: ['birds', 'scatt'],description: 'Tropical birds scattered as Drake veered the Jeep'MyClickableComponent,foo: 'bar',};
},
methods: {alert() {},
}
MyClickableComponent.vue (MyClickableComponent.vue)
<template><mark class="custom" @click="$emit('customlistener')"><slot></slot></mark>
</template>
props: {baz: String, // From OtherComponent.vueindex: Number, // From TextHighlighttext: String, // From TextHighlight, equals to `this.$slots.default[0].text`
}
翻译自: https://vuejsexamples.com/text-highlighter-library-for-vue-js/
vue.js文本居中
vue.js文本居中_Vue.js的文本荧光笔库相关推荐
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 选择 用户名 学号 班级 操作 {{item.User ...
- json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
- vue.js确认对话框_vue.js精美的未保存的更改对话框
vue.js确认对话框 Vue未保存的更改对话框 (Vue Unsaved Changes Dialog) A beautiful unsaved changes dialog, inspired b ...
- js add方法_Vue.js列表过渡
进入/离开 & 列表过渡 示例一: <style>/* 移动的时间 */.fade-enter-active{transition: all .3s ease;}/* 移动的方向, ...
- vue.js表格赋值_vue.js input框之间赋值方法
如下所示: demo.html Index Page 测试 {{ result1 }} 测试 {{ result2 }} demo.js new Vue({ el: "#demo" ...
- vue的tap插件_Vue.js的RTF编辑器– Tiptap
用于Vue.js应用程序的无呈现(完全可自定义)和可扩展的WYSIWYG RTF编辑器. 安装和下载: # Yarn $ yarn add tiptap # NPM $ npm install tip ...
- vue.js组件数据绑定_Vue.js的增强的数据透视表组件
vue.js组件数据绑定 VUE数据透视表加 (vue-pivot-table-plus) A customized vue component for pivot table. 数据透视表的定制vu ...
- vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
- mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路
今天看一篇文档中见到了了v-cloak指令,感觉很新鲜.由于使用的频率不高.但还是想了解下是做什么的. 众所周知,程序的指令一般都是语义化的,然后,我企图从cloak这个单词能找到点线索. 然后发现, ...
最新文章
- java 中 bean 的生命周期
- 虚拟存储器--虚拟地址与物理地址
- 模拟实现顺序表ArrayList1(三级)
- 【双100%解法】剑指 Offer 24. 反转链表
- while和do-while循环结构
- GB/T 28181-2016与GB/T 28181-2011变更对比
- 导致页面顶部空白一行解决方法
- 机器学习导论(一)绪论
- p2p借贷项目面试题
- 传感器技术-电容式传感器(学习笔记六)
- [地图]通用网格地图库:粗糙地形导航的实现和用例
- 从第一代 iPhone 细数到 iPhone 12,iPhone 屏幕尺寸进化历程背后的 app 设计哲学
- 数据分析实战45讲(20)朴素贝叶斯分类(一)
- RTK固定解什么意思
- 浅谈从信息化到数字化时代下的业财一体化
- 有哪些十分惊艳的书值得推荐?
- CleanMate吸尘器机器人_几款国外进口智能扫地机器人大比拼
- Kettle学习, 更新表数据。
- android ble 蓝牙绑定流程,android BLE蓝牙开发
- verilog 四位二进制全加器和半加器
热门文章
- x3650 linux 不重启看raid,IBM3650服务器阵列出现故障
- 2023年,30多岁失业了,找不到工作,该如何走出低谷?
- 苹果9.1系统无服务器,ios9.1更新失败怎么办?ios9.1更新失败连接不到互联网问题的解决方法...
- linux 网卡设置双ip,CentOS7单网卡设置双IP的方法
- WebStorm激活汉化
- ASP.NET MVC AuthorizeAttribute
- C++ 编程 关机小助手
- ubuntu16.04下NVIDIA GTX965M显卡驱动PPA安装
- 管家婆软件安装常见问题详解!
- 备注一下从MarginNote到Scrivener的过程