【vue】可编辑div部分字段高亮

【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