vue在html鼠标选择后添加标签

如果你想在鼠标选择的文本后面添加一个标签，可以使用JavaScript来实现。

首先，在Vue组件的模板中，为需要添加标签的元素添加一个 `id` 或 `class`，例如：

<p id="my-paragraph">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

然后，在Vue组件的JavaScript代码中，监听鼠标选择事件，并在选择结束时获取选择的文本，将其包装在标签中，并插入到选中文本的后面。例如：

const myParagraph = document.getElementById('my-paragraph');

myParagraph.addEventListener('mouseup', () => {
  const selection = window.getSelection().toString();
  if (selection) {
    const newElement = document.createElement('span');
    newElement.textContent = selection;
    newElement.style.backgroundColor = 'yellow';
    const range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.insertNode(newElement);
  }
});

这段代码中，我们首先通过 `getElementById()` 获取了需要添加标签的元素。然后，在 `mouseup` 事件中，我们通过 `window.getSelection().toString()` 获取了当前选中的文本。如果有选中的文本，我们创建一个新的 `span` 元素，并将选中的文本包装在其中。我们还可以设置新元素的样式，例如将背景色设为黄色。最后，我们使用 `Range` 对象将选中的文本删除，并将新元素插入到选中文本的后面。

请注意，这段代码只是一个简单的示例，实际上需要根据具体需求进行调整。此外，使用原生JavaScript操作DOM可能会影响Vue的性能和响应速度，建议在使用之前进行测试和评估。