uniapp 如何实现文本选中划线，自定义功能

在 UniApp 开发中，实现文本选中划线以及自定义功能通常涉及到组件的交互和样式定制。你可以通过以下几个步骤来实现：

1. **文本组件**：首先，你需要在一个可编辑区域如`<text>`或`<textarea>`内显示文本内容。

<view class="editable-text">
  <text contenteditable="true" @input="handleInput">{{content}}</text>
</view>

2. **添加事件监听**：使用`@input`事件来检测用户的输入，并保存当前的选区范围。

data() {
  return {
    content: '',
    selectedRange: null,
  };
},
methods: {
  handleInput(e) {
    this.selectedRange = e.detail.range;
  },
}

3. **选中划线**：可以使用 CSS 来实现文字选中后的下划线效果。当用户选择文本时，动态改变被选中的部分的样式。

.editable-text::selection {
  background: none; /* 阻止系统默认选中效果 */
  color: currentColor; /* 保持文字颜色 */
  text-decoration: underline; /* 添加下划线 */
}

4. **自定义功能**：针对选中的文本，你可以在`handleInput`函数内部处理，例如高亮、替换、删除等操作。这需要根据实际业务逻辑编写相应处理函数。

methods: {
  handleCustomAction(range) {
    // 这里可以根据 range 对选中的文本进行操作
    const selectedText = this.content.slice(range.start, range.end);
    // ... 自定义操作 ...
  }
}

然后在`handleInput`中触发自定义操作：

handleInput(e) {
  this.handleCustomAction(this.selectedRange);
  this.selectedRange = e.detail.range; // 更新选区
}