【vue】可编辑div部分字段高亮
参考了帖子:https://segmentfault.com/a/1190000008261449
以及帖子:https://blog.csdn.net/smartsmile2012/article/details/53642082
这次的组件:
1.通用性不强,是为了特殊功能而制定的,放在这里是为了方便日后查阅内部的相关知识点;
2.实现的是输入类似(1and2or3)or(4and5)这样的逻辑运算表达式的时候,高亮and or单词,加粗左括号(右括号)
3.另外,代码有缺陷:a.输入法中文输入的时候会错乱,重复输入值;b.不能阻止输入其他字符
4.由于其中有一部分是借鉴的代码,所以IE9的部分没测试;多半是不行的,项目也不需支持IE9
template 代码
<template>
<div class="edit-div"
v-html="innerText"
:contenteditable="canEdit"
@focus="isLocked = true"
@blur="isLocked = false"
@input="changeText">
</div>
</template>
script 代码
<script type="text/ecmascript-6">
export default{
name: 'edit-div',
props: {
value: {
type: String,
default: ''
},
canEdit: {
type: Boolean,
default: true
}
},
data() {
return {
isLocked: false,
tempText: this.value