mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
fix: lint
This commit is contained in:
07akioni
parent
e8ef691808
commit
379303a7ea
@ -2,14 +2,11 @@
|
||||
# Basic
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight :text="text" :words="words" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI is a Vue3 component library, it is relatively complete, tunable themes, written in TypeScript, fast.',
|
||||
words: ['Naive UI', 'Vue3', 'TypeScript', 'fast']
|
||||
@ -17,3 +14,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight :text="text" :words="words" />
|
||||
</template>
|
||||
|
||||
@ -4,26 +4,11 @@
|
||||
By default, highlighting is case-sensitive, which you can turn on using the `case-sensitive` property.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:case-sensitive="true"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI is written in full TypeScript and works seamlessly with your TypeScript projects',
|
||||
words: ['Naive UI', 'typeScript']
|
||||
@ -31,3 +16,19 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:case-sensitive="true"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -4,26 +4,11 @@
|
||||
The `component` property allows you to specify tag for highlighted text.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
component="H4"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI is a Vue3 component library, it is relatively complete, tunable themes, written in TypeScript, fast.',
|
||||
words: ['Naive UI', 'Vue3', 'TypeScript', 'fast']
|
||||
@ -31,3 +16,19 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
component="H4"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -4,39 +4,11 @@
|
||||
Change the style to make the highlight more striking.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px 12px',
|
||||
'border-radius': '30px',
|
||||
background: '#409EFF',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI is written in full TypeScript and works seamlessly with your TypeScript projects',
|
||||
words: ['Naive UI', 'typeScript']
|
||||
@ -44,3 +16,32 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px 12px',
|
||||
'border-radius': '30px',
|
||||
'background': '#409EFF',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
@ -2,14 +2,11 @@
|
||||
# 基础
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight :text="text" :words="words" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI 是一个 Vue3 的组件库，它比较完整，主题可调，用 TypeScript 写的，快。',
|
||||
words: ['Naive UI', 'Vue3', 'TypeScript', '快']
|
||||
@ -17,3 +14,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight :text="text" :words="words" />
|
||||
</template>
|
||||
|
||||
@ -4,26 +4,11 @@
|
||||
默认情况下，高亮是不区分大小写，你可以通过 `case-sensitive` 属性来开启区分大小写模式。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:case-sensitive="true"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接',
|
||||
words: ['Naive UI', 'typeScript']
|
||||
@ -31,3 +16,19 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:case-sensitive="true"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -2,29 +2,13 @@
|
||||
# 高亮标签
|
||||
|
||||
通过 `component` 属性可以指定高亮文本的标签。
|
||||
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
component="H4"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI 是一个 Vue3 的组件库，它比较完整，主题可调，用 TypeScript 写的，快。',
|
||||
words: ['Naive UI', 'Vue3', 'TypeScript', '快']
|
||||
@ -32,3 +16,19 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
component="H4"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -4,39 +4,11 @@
|
||||
换个样式，让高亮更加醒目。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px',
|
||||
'border-radius': '6px',
|
||||
background: '#18a058',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
display: 'inline-block',
|
||||
margin: '4px',
|
||||
padding: '4px 12px',
|
||||
'border-radius': '30px',
|
||||
background: '#409EFF',
|
||||
color: 'white'
|
||||
}"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
setup() {
|
||||
return {
|
||||
text: 'Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接',
|
||||
words: ['Naive UI', 'TypeScript']
|
||||
@ -44,3 +16,32 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px',
|
||||
'border-radius': '6px',
|
||||
'background': '#18a058',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
<n-highlight
|
||||
:text="text"
|
||||
:words="words"
|
||||
:highlight-style="{
|
||||
'display': 'inline-block',
|
||||
'margin': '4px',
|
||||
'padding': '4px 12px',
|
||||
'border-radius': '30px',
|
||||
'background': '#409EFF',
|
||||
'color': 'white',
|
||||
}"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import {
|
||||
h,
|
||||
defineComponent,
|
||||
type PropType,
|
||||
type CSSProperties,
|
||||
computed
|
||||
type PropType,
|
||||
computed,
|
||||
defineComponent,
|
||||
h
|
||||
} from 'vue'
|
||||
import type { ExtractPublicPropTypes } from '../../_utils'
|
||||
|
||||
@ -34,7 +34,7 @@ export type HighlightProps = ExtractPublicPropTypes<typeof highlightProps>
|
||||
export default defineComponent({
|
||||
name: 'Highlight',
|
||||
props: highlightProps,
|
||||
setup (props) {
|
||||
setup(props) {
|
||||
const escapeRegExp = (text: string): string =>
|
||||
text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||||
|
||||
@ -56,7 +56,7 @@ export default defineComponent({
|
||||
let modifiedText = text
|
||||
|
||||
const pattern = words
|
||||
.map((word) => (autoEscape ? escapeRegExp(word) : word))
|
||||
.map(word => (autoEscape ? escapeRegExp(word) : word))
|
||||
.join('|')
|
||||
const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi')
|
||||
|
||||
@ -79,7 +79,7 @@ export default defineComponent({
|
||||
|
||||
return { highlightedText }
|
||||
},
|
||||
render () {
|
||||
render() {
|
||||
return h('span', {
|
||||
innerHTML: this.highlightedText
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user