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

最新推荐文章于 2024-07-13 17:00:16 发布

送快递的小年轻

最新推荐文章于 2024-07-13 17:00:16 发布

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue 光标定位可编辑div

本文链接：https://blog.csdn.net/u011250535/article/details/80572799

版权

这篇博客介绍了如何在Vue项目中创建一个可编辑的div，当输入特定词汇如'and'、'or'以及括号时，这些词汇会被高亮并加粗。文章提到该组件的通用性不强，主要用于特殊功能，并列举了代码存在的问题，包括中文输入时的错乱和无法阻止输入非预期字符。此外，由于部分代码来源于其他资源，未测试在IE9下的兼容性。

摘要由CSDN通过智能技术生成

【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