437ae1425c
- 添加理赔申请和贷款申请的路由、页面组件和相关逻辑 - 实现理赔申请和贷款申请的数据获取、表单提交和审核流程 - 优化耳标选择器组件，支持在不同场景下的使用 - 调整图片上传组件，增加只读模式和预览功能
51 lines
1015 B
Vue
51 lines
1015 B
Vue
<template>
|
|
<section class="AiHighlight" :class="{bold}" 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>
|
|
.AiHighlight {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.keyword {
|
|
display: block;
|
|
width: auto;
|
|
color: $primaryColor;
|
|
}
|
|
|
|
&.bold {
|
|
.keyword {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|