56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
<template>
|
|
<section class="AiHighlight" :class="{bold,color}" v-html="html"/>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AiHighlight",
|
|
props: {
|
|
value: {default: ""},
|
|
content: {default: ""},
|
|
keywords: {default: () => []},
|
|
color: {default: ""},
|
|
bold: Boolean
|
|
},
|
|
computed: {
|
|
words: v => [v.keywords].flat(),
|
|
html() {
|
|
let {content, words, value} = this
|
|
const reg = new RegExp(`(${words.join("|")})`, 'g')
|
|
content = content?.replace(/(@v)/g, this.keywordRender(value))
|
|
return !!words.join("|") ? content?.replace(reg, this.keywordRender('$1')) : content
|
|
}
|
|
},
|
|
methods: {
|
|
keywordRender(word) {
|
|
const {color} = this
|
|
return `<p class="keyword" style="color:${color}">${word}</p>`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.AiHighlight ){
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.keyword {
|
|
display: block;
|
|
width: auto;
|
|
color: $primaryColor;
|
|
}
|
|
|
|
&.color {
|
|
.keyword {
|
|
}
|
|
}
|
|
|
|
&.bold {
|
|
.keyword {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|