Question

我正在处理的组件在完成后应该是textarea或contenteditable div，其中突出显示文本的后面是＃号，或使用诸如筹码的形式。

此刻，我正在与一个 contenteditable div 一起工作，该部门周围还有另一个建议关键字的组件。该组件中是一个 v模型

我的目标是将文本放在＃号后，并跨度。

<template>
    <at :ats=['#'] v-model="vmodel">
        <div contenteditable @keypress.enter="highlight"></div>
    </at>
<template>

这不是我想要的，因为它在div的开头添加了文本。例如，当我写时： “你好，有事” 我知道了 “＃问好”

<script>
import At from 'vue-at'
export default {
components: { At },
   data() {
     return { vmodel: '', };
   },
methods: {
   highlight(){
      this.vmodel = this.vmodel.replace(/\B#([^ ]+)/g,"<span class='highlight-Text'>$&</span>")
   }
}
</script>

如何操作vmodel，例如在键入时在文本上添加跨度，使其不会输出乱码？

Answer 1

我认为您的问题是正则表达式。您正在将整个比赛（$&）放在范围内。包括哈希。我不确定您要如何完成操作，但这会将散列放回原处，并将散列后的部分放到跨度内。

new Vue({
  el: '#app',
  components: {
    at: {
      props: ['value'],
      template: '<div>{{value}}<slot></slot></div>'
    }
  },
  data() {
    return {
      vmodel: 'Something#-else',
    };
  },
  methods: {
    highlight() {
      this.vmodel = this.vmodel.replace(/(#\B)([^ ]+)/g, "$1<span class='highlight-Text'>$2</span>");
      console.log("New vmodel", this.vmodel);
    }
  }
});

.highlight-Text {
  border-radius: 5px;
  color: black;
  background-color: #5297f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <at v-model="vmodel">
    <div contenteditable @keypress.enter="highlight">editable stuff</div>
  </at>
</div>

在内容可编辑的div中编辑v模型/在div中突出显示文本

1 个答案: