游客
游客
Lv 7
这家伙很懒！什么都没留下.

VUE3+TS，实现div块文字可编辑、可高亮关键词

1. div可编辑：contenteditable属性

实现el-input的效果

<div contenteditable="true">{{Text}}</div>


2. div文本高亮方式一：v-html

适合div块内关键词/一部分文字高亮

1. v-html绑定文字

不在是{{}}中写变量的方式

<div  v-html="repairedText"></div>

//script中

let repairedText = ref<string>("")

2. 正则化实现文本高亮

v-html绑定的文本才可以加载出来样式，{{Text}}定义的变量直接显示span语句

replace实现替换

replace可以实现颜色替换、文本替换

repairedText.value = answerText.value.replace(item.original_text, `<span class="highlight-fixed-text">${item.original_text}</span>`)


//style

.highlight-fixed-text{
color:green;
}

3. div文本高亮方式二：:style或:class

适合div块的全部文字高亮

设置变量属性highlight ，根据属性值动态切换文本样式

<div  v-for="(answerItem, answerIndex) in answerClaims" :key="answerIndex"  
@click="highlightClaim(answerItem)" :class="answerItem.highlight ? 'highlighted-text' : ''">
script：动态修改highlight 的取值
 answerClaims.value.forEach((item) => {
    if (item.data === element.data) {
      item.highlight = true
    } else {
      item.highlight = false
    }
  })


style

.highlighted-text {
  background-color: rgba(64, 158, 255, 0.3);
  border-radius: 3px;
}


computed：个人觉得，调接口获取的值推荐使用watch，但是对接口结果进一步加工显示的数据，最好用computed，它的优点就是一旦某个值发生变化后，页面会自动重新计算、重新渲染，不需要watch一直监听

repalce：在样式动态修改上很有用！