手机/平板的浏览器里如何实现类似荧光笔的效果

Question

基于vue的网页应用。
要求在手机/平板浏览器中，实现类似电脑浏览器中使用鼠标选中文字的效果，并可以对选中的文字背景涂色。
就像使用荧光笔在纸上划重点一样。

不知道手机浏览器上怎么实现，请给出可以实际执行的示例代码。

实现效果如下：

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

手机/平板的浏览器里如何实现类似荧光笔的效果

你可以使用Vue.js和JavaScript来实现这个效果。下面是一个基本示例代码：

// 选择器
let selecter = null;
// 选中文字的背景颜色
let backgroundColor = '#FFFF00';
// 是否正在选择
let isSelecting = false;

// Vue组件
<template>
  <div @mousedown.prevent="handleMouseDown" @mousemove.prevent="handleMouseMove" @mouseup.prevent="handleMouseUp">
    {{ text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello World!'
    }
  },
  methods: {
    handleMouseDown(event) {
      selecter = document.getSelection();
      isSelecting = true;
    },
    handleMouseMove(event) {
      if (isSelecting) {
        let range = selecter.getRangeAt(0);
        let rectangle = range.getBoxes();
        let x = rectangle[0].x;
        let y = rectangle[0].y;
        let width = rectangle[0].width;
        let height = rectangle[0].height;
        // 鼠标移动到这个区域内，涂色
        event.target.style.background = backgroundColor;
      }
    },
    handleMouseUp(event) {
      isSelecting = false;
    }
  }
}
</script>

这个示例代码创建了一个Vue组件，包含一个text变量和一些方法。在handleMouseDown方法中，我们获取当前的选择对象，并设置isSelecting为true。在handleMouseMove方法中，我们获取当前选择的范围，计算鼠标位置，并且涂色鼠标所在的区域。在handleMouseUp方法中，我们设置isSelecting为false。

注意，这只是一个基本示例代码，您可能需要根据您的实际需求进行修改和优化。